Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

CSS anti-sèche 2018 Cheat Sheet (DRAFT) by

Mes notes de cours 2017

This is a draft cheat sheet. It is a work in progress and is not finished yet.

margin border padding

La propriété CSS box-sizing permet de spécifier si la valeur de width ou de height inclut la marge intérieure et la taille de la bordure.
Exemple de syntaxe CSS box-sizing :

box-sizing : border­-box;

box-sizing : paddin­g-box;

box-sizing : conten­t-box;

box-sizing : inherit
/* hérite le compor­tement de son parent. */

Priorité de prise en compte

<p>
balises : 
p { }
 
<p class=­"­cla­ss1­">
classes : 
.class1 { }
 
<p id="­id-­uni­que­" >
id unique : 
#id { }
 
<p style=­" " >
inline style, non slecti­onnable en css
Lorsques pluseurs règles complexes peuvent s'appl­iquer, l'algo­rithme essaie de déterminer la règle la plus précise.

font-f­amilly

font-family: 'HelveticaNeueLTStd-Roman', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
Cette longue liste permet d'utiliser une fonte système selon l'OS (mac, windows, linux, ios, android... ) ou défaut sans-s­erif.

transi­tions

selecteur {
transition:
        <transition-property>
        <transition-duration>
        <transition-timing-function> 
        <transition-delay>;
}

selecteur {
  transition: width 2s ease, height 3s linear;
}

transi­tio­n-t­imi­ng-­fun­ction

https:­//w­ww.a­ls­acr­eat­ion­s.c­om/­tut­o/l­ire­/87­6-t­ran­sit­ion­s-c­ss3­-tr­ans­iti­on-­tim­ing­-fu­nct­ion.html
ease : Rapide sur le début et ralenti sur la fin.
linear : La vitesse est constante sur toute la durée de l'anim­ation.
ease-in : Lent sur le début et accélère de plus en plus vers la fin.
ease-out : Rapide sur le début et décèlere sur la fin.
ease-i­n-out : Le départ et la fin sont lents.
  

cursor: value;

Constantes en CSS ?

:root {
    --orange-for-orange: #FF7900;
}

#div1 {
    background-color: var(--orange-for-orange);
}

#div2 {
    background-color: var(--orange-for-orange);
}
var(cu­sto­m-p­rop­ert­y-name, value)
custom­-pr­ope­rty­-name Required and must start with two dashes
value Optional. The fallback value (used if the custom property is invalid)

https:­//w­ww.w­3s­cho­ols.co­m/c­ssr­ef/­fun­c_v­ar.asp