Référence de 154 propriétés CSS
Ce que fait chaque propriété, les valeurs réellement utilisées et si elle s'hérite — une ligne chacune.
Mise en page11
Les propriétés qui décident du type de boîte et de ce qui arrive en cas de débordement.
displayDéfinit le type de boîte de l'élément : le point de départ de toute mise en page.visibilityAffiche ou masque ; avec hidden, la place reste occupée.floatFait flotter un élément sur un côté pour que le texte l'entoure ; flex et grid le remplacent.clearPlace l'élément sous les flottants qui précèdent.overflowDécide si le contenu qui déborde est rogné ou défile.overflow-xNe gère que le débordement horizontal.overflow-yNe gère que le débordement vertical.box-sizingDétermine si la largeur inclut la marge intérieure et la bordure ; border-box est plus simple.aspect-ratioVerrouille le rapport largeur/hauteur : un côté suffit.container-typePermet des styles réagissant à la taille d'un conteneur parent plutôt qu'à l'écran.isolationCrée un nouveau plan pour que le mélange ne déborde pas.
Flexbox et grille24
Les propriétés qui alignent les éléments et les posent sur une grille : presque toute mise en page moderne passe par là.
flex-directionIndique si les éléments flex s'alignent en ligne ou en colonne.flex-wrapDécide si les éléments passent à la ligne quand la place manque.flexRègle d'un coup le partage de l'espace restant ; flex: 1 le divise également.flex-growLa part d'espace restant que prend cet élément.flex-shrinkDe combien l'élément rétrécit quand la place manque ; 0 le fige.flex-basisLa taille de départ avant de grandir ou rétrécir.justify-contentRépartit les éléments le long de l'axe principal.align-itemsAligne les éléments sur l'axe transversal ; center centre verticalement.align-selfModifie l'alignement d'un seul élément.align-contentRépartit les lignes elles-mêmes quand les éléments passent sur plusieurs rangées.gapL'espace entre les éléments ; contrairement aux marges, rien à l'extérieur.row-gapNe fixe que l'espace entre les rangées.column-gapNe fixe que l'espace entre les colonnes.orderChange l'ordre visuel sans toucher à l'ordre HTML.grid-template-columnsDéfinit le nombre et la largeur des colonnes de la grille.grid-template-rowsDéfinit le nombre et la hauteur des rangées de la grille.grid-template-areasNomme des zones pour écrire la mise en page comme un dessin.grid-columnIndique sur combien de colonnes s'étend un élément.grid-rowIndique sur combien de rangées s'étend un élément.grid-auto-flowDétermine dans quel sens se placent les éléments non positionnés.grid-auto-rowsFixe la hauteur des rangées créées automatiquement.place-itemsRègle les deux axes d'alignement d'un coup ; un seul center centre tout.place-contentPlace le bloc de contenu sur les deux axes.justify-itemsPlace les éléments horizontalement dans leur cellule.
Boîte et espacements16
Taille et espacements. Les marges extérieures fusionnent ; la marge intérieure est peinte par le fond.
widthLa taille horizontale ; 100 % suit le parent, 100vw la fenêtre.heightLa taille verticale ; auto ne prend que ce qu'exige le contenu.min-widthEmpêche la boîte d'être plus étroite ; dans flex, 0 autorise le rétrécissement.max-widthPlafonne la largeur ; la façon courante de limiter la longueur des lignes.min-heightEmpêche la boîte d'être plus basse.max-heightPlafonne la hauteur ; le surplus relève d'overflow.marginL'espace extérieur ; les marges haut et bas fusionnent.margin-topL'espace extérieur au-dessus.margin-rightL'espace extérieur à droite ; auto pousse la boîte à gauche.margin-bottomL'espace extérieur en dessous.margin-leftL'espace extérieur à gauche ; auto des deux côtés centre la boîte.paddingL'espace intérieur ; la couleur de fond s'y étend.padding-topL'espace intérieur au-dessus.padding-rightL'espace intérieur à droite.padding-bottomL'espace intérieur en dessous ; en pourcentage, il crée de la hauteur.padding-leftL'espace intérieur à gauche.
Texte25
Police, interligne, alignement : la façon dont le texte se lit. La plupart s'héritent.
font-sizeLa taille du texte ; rem multiplie la taille racine et suit le zoom du lecteur.font-familyDéfinit la police ; le navigateur parcourt la liste, terminez par une famille générique.font-weightLa graisse ; 400 correspond au normal et 700 au gras.font-styleActive ou désactive l'italique.fontRegroupe plusieurs valeurs de police ; ce qui est omis revient à sa valeur initiale.line-heightL'interligne ; une valeur sans unité comme 1.5 s'hérite mieux.letter-spacingL'espacement entre lettres ; le resserrer un peu convient aux grands titres.word-spacingL'espacement entre les mots.text-alignAligne le texte horizontalement.text-decorationAjoute soulignement ou barré ; sert aussi à retirer le soulignement des liens.text-decoration-lineChoisit uniquement la ligne tracée.text-decoration-colorColore uniquement cette ligne.text-decoration-styleDéfinit le style de ligne ; wavy donne l'ondulation du correcteur.text-transformForce la casse à l'affichage seulement ; le texte source reste intact.text-indentIndente la première ligne du bloc.text-overflowTronque le texte qui déborde par des points de suspension ; exige overflow et nowrap.text-shadowProjette une ombre derrière le texte : utile pour du blanc sur photo.white-spaceGère espaces et retours à la ligne ; nowrap garde tout sur une ligne.word-breakDétermine où couper les mots longs ; keep-all évite de couper les mots coréens.overflow-wrapForce le retour à la ligne des chaînes très longues : pratique pour les URL.writing-modeChange le sens d'écoulement du texte : c'est ainsi qu'on écrit à la verticale.vertical-alignAligne verticalement dans la ligne ; fonctionne aussi dans les cellules.font-variant-numericChoisit un style de chiffres ; tabular-nums fixe leur largeur et stabilise les tableaux.hyphensAutorise la césure en fin de ligne ; nécessite que la langue soit déclarée.text-wrapChoisit la coupure des lignes ; balance égalise la longueur des lignes d'un titre.
Couleur et fond13
Couleur du texte, du fond, dégradés et transparence.
colorLa couleur du texte ; currentColor renvoie à cette valeur.background-colorLa couleur de fond ; elle remplit aussi la marge intérieure.background-imagePlace une image ou un dégradé en fond ; on peut en superposer plusieurs.background-sizeDimensionne l'image de fond ; cover remplit sans vide, contain montre tout.background-positionPositionne l'image de fond dans la boîte.background-repeatDétermine si l'image de fond se répète.background-attachmentDétermine si le fond défile avec la page ou reste fixe.backgroundRegroupe toutes les valeurs de fond ; ce qui est omis revient à l'initial.background-clipLimite l'étendue du fond ; text le découpe selon les lettres.opacityL'opacité globale ; les enfants s'estompent aussi.mix-blend-modeDéfinit le mélange des couleurs avec ce qui est dessous.accent-colorColore les contrôles dessinés par le navigateur, cases et boutons radio.color-schemeDéclare les schémas clair et sombre pris en charge.
Bordures13
Bordures, coins et ombres. Le contour n'occupe aucune place.
borderDéfinit épaisseur, style et couleur de bordure en une ligne.border-widthNe fixe que l'épaisseur de la bordure.border-styleNe fixe que le style ; sans lui, la bordure ne s'affiche pas.border-colorNe fixe que la couleur de la bordure.border-topNe définit que la bordure du haut.border-bottomNe définit que la bordure du bas : le séparateur habituel des listes.border-radiusArrondit les coins ; 50 % donne un cercle, une valeur énorme une pilule.outlineUn trait tracé hors de la bordure ; sans encombrement, idéal pour le focus clavier.outline-widthNe fixe que l'épaisseur du contour.outline-styleNe fixe que le style du contour.outline-colorNe fixe que la couleur du contour.outline-offsetÉloigne le contour de l'élément.box-shadowProjette une ombre autour de la boîte ; inset la place à l'intérieur.
Effets7
Des effets appliqués une fois le rendu fait : flou, découpe, remplissage.
filterApplique flou, niveaux de gris, luminosité ; on peut les enchaîner.backdrop-filterFiltre ce qui se trouve derrière l'élément : c'est l'effet verre dépoli.clip-pathDécoupe l'élément selon une forme donnée.mask-imageMasque selon la luminosité d'une image : pratique pour estomper les bords.object-fitDétermine comment une image ou vidéo remplit sa boîte ; cover rogne pour remplir.object-positionChoisit la partie conservée au rognage : ainsi on garde les visages.image-renderingChoisit un lissage doux ou net ; pixelated garde le pixel art net.
Transformations et animations14
Déplacer, tourner, adoucir. La mise en page reste intacte, rien ne saute.
transformDéplace, tourne et redimensionne ; la boîte reste en place, rien ne bouge autour.transform-originLe point d'ancrage des rotations et mises à l'échelle.transitionAdoucit le passage d'une valeur à l'autre : quoi, combien de temps, comment.transition-propertyIndique les propriétés animées ; all est pratique mais peut coûter cher.transition-delayLe délai avant le début de la transition.transition-durationLa durée du changement ; environ 0,2 s paraît naturel.transition-timing-functionFaçonne le rythme ; ease démarre et finit en douceur.animationJoue des images clés ; nom, durée et répétition en une ligne.animation-nameLe nom des images clés à jouer.animation-timing-functionLe rythme du mouvement ; steps le fait avancer par paliers.animation-durationLa durée d'un cycle.animation-iteration-countLe nombre de répétitions ; infinite ne s'arrête jamais.will-changePrévient le navigateur de ce qui va changer ; en abuser nuit à la performance.perspectiveDéfinit la profondeur des transformations 3D ; plus la valeur est petite, plus l'effet est marqué.
Positionnement7
Sortir un élément du flux et le placer ; z-index décide qui passe devant.
positionChoisit le mode de positionnement ; sticky fixe l'élément au défilement.topLa distance depuis le bord supérieur.rightLa distance depuis le bord droit.bottomLa distance depuis le bord inférieur.leftLa distance depuis le bord gauche.insetRègle les quatre décalages d'un coup ; 0 étire l'élément sur tout son parent.z-indexDétermine ce qui passe au-dessus ; la comparaison se fait dans un même contexte d'empilement.
Tableaux4
Les propriétés des bordures de tableau et des largeurs de colonnes.
border-collapseFusionne les bordures voisines ; collapse évite les traits doublés.border-spacingL'espace entre cellules ; utile seulement sans collapse.table-layoutChoisit des colonnes selon le contenu ou fixes ; fixed est bien plus rapide.caption-sidePlace la légende du tableau au-dessus ou en dessous.
Listes4
La forme et la place des marqueurs de liste.
Interaction9
Comment l'élément répond à la souris, au doigt et au défilement.
cursorDéfinit la forme du curseur ; pointer signale un élément cliquable.pointer-eventsDétermine si l'élément reçoit les événements de pointeur ; none les laisse passer.user-selectDétermine si le texte peut être sélectionné à la souris.touch-actionContrôle les gestes gérés par le navigateur ; manipulation supprime le zoom par double tap.scroll-behaviorRend le défilement instantané ou fluide.scroll-snap-typeCale le défilement sur des positions fixes : courant dans les carrousels.overscroll-behaviorDétermine si arriver au bout entraîne le parent ; contain stoppe à l'intérieur.resizePermet à l'utilisateur de redimensionner ; surtout sur textarea.caret-colorColore le curseur clignotant du champ de saisie.
Impression et divers7
Le reste : impression, contenu généré et numérotation automatique.
page-break-afterForce ou évite un saut de page après, à l'impression.break-insideEmpêche un élément d'être coupé entre pages ou colonnes.contentLe contenu généré par ::before ou ::after ; souvent de simples guillemets vides.counter-resetDémarre ou réinitialise un compteur de numérotation.counter-incrementIncrémente un compteur ; avec content, il numérote les titres.quotesChoisit les guillemets employés par q selon la langue.allRéinitialise toutes les propriétés d'un coup : utile pour effacer des styles hérités.
Comment lire
- Une propriété héritée ne s'écrit qu'une fois sur le parent : tous les enfants la reprennent. C'est le cas de presque toutes les propriétés de texte.
- Un raccourci réinitialise ce que vous omettez. Écrire background: red efface aussi l'image de fond posée avant.
- Quand deux règles s'opposent, le sélecteur le plus spécifique l'emporte ; à spécificité égale seulement, l'ordre tranche.
- Animez transform et opacity pour la fluidité. Changer width ou top oblige à recalculer la mise en page.
Questions fréquentes
Q. Combien y a-t-il de propriétés CSS ?
La norme en compte plus de 500, mais seule une part revient au quotidien. On trouve ici les 154 que l'on finit par écrire sans cesse, classées par usage.
Q. Que veut dire « héritée » ?
Que la valeur descend : posée sur le parent, les enfants l'utilisent sans la répéter. La plupart des propriétés de texte s'héritent ; les marges et bordures non.
Q. Qu'est-ce qui change avec un raccourci ?
On règle plusieurs valeurs en une ligne, mais tout ce qui est omis revient à sa valeur initiale. C'est pourquoi un simple background: red efface aussi l'image de fond posée avant.
Q. Si la même propriété est déclarée deux fois, laquelle gagne ?
La spécificité d'abord : un id bat une classe, une classe bat une balise. À spécificité égale seulement, la règle la plus tardive l'emporte. !important renverse tout, raison de plus pour l'éviter.
Q. Faut-il utiliser px ou rem ?
Un rem est un multiple de la taille racine : il grandit quand le lecteur agrandit le texte dans son navigateur. Rem pour la typographie et les espacements ; px là où la valeur ne doit jamais bouger, comme un filet d'un pixel.