Aide-mémoire - Propriétés CSS
La couleur du texte. Il faut lui passer une valeur de couleur.
La couleur de fond d'un élément. Il faut lui passer une valeur de couleur.
La façon dont les dimensions d'un élément sont calculées. Avec border-box, la largeur et la hauteur incluent le padding et la bordure, ce qui est généralement voulu.
La largeur d'un élément. Il faut lui passer une unité de mesure de taille.
La hauteur d'un élément. Il faut lui passer une unité de mesure de taille.
La largeur maximale d'un élément. Il faut lui passer une unité de mesure de taille.
La hauteur maximale d'un élément. Il faut lui passer une unité de mesure de taille.
La largeur minimale d'un élément. Il faut lui passer une unité de mesure de taille.
La hauteur minimale d'un élément. Il faut lui passer une unité de mesure de taille.
L'espace extérieur autour d'un élément. Il faut lui passer une unité de mesure de taille.
L'espace extérieur autour d'un élément. Si on lui passe deux valeurs, la première est pour le haut et le bas, la seconde pour la gauche et la droite.
L'espace extérieur autour d'un élément. Si on lui passe quatre valeurs, elles sont respectivement pour le haut, la droite, le bas et la gauche.
L'espace extérieur autour d'un élément, mais seulement pour un côté spécifique. Il s'utilise de la même manière que margin, mais affecte seulement le côté spécifié.
L'espace intérieur entre le contenu et la bordure d'un élément. Il faut lui passer une unité de mesure de taille.
L'espace intérieur entre le contenu et la bordure d'un élément. Si on lui passe deux valeurs, la première est pour le haut et le bas, la seconde pour la gauche et la droite.
L'espace intérieur entre le contenu et la bordure d'un élément. Si on lui passe quatre valeurs, elles sont respectivement pour le haut, la droite, le bas et la gauche.
L'espace intérieur entre le contenu et la bordure d'un élément, mais seulement pour un côté spécifique. Il s'utilise de la même manière que padding, mais affecte seulement le côté spécifié.
La bordure autour d'un élément. Il faut lui passer une valeur de style, d'épaisseur et de couleur de trait une à la suite de l'autre comme ceci: 1px solid #000. Voici les styles de traits acceptés.
La bordure autour d'un élément, mais seulement pour un côté spécifique. Elle s'utilise de la même manière que border, mais affecte seulement le côté spécifié.
L'arrondi des coins d'un élément. Il faut lui passer une unité de mesure de taille.
Le type d'affichage d'un élément. Il faut lui passer une valeur de type d'affichage accepté.
Spécifie que l'élément ne doit pas être affiché du tout dans la page.
Spécifie que l'élément doit être affiché comme un bloc, prenant toute la largeur disponible et commençant sur une nouvelle ligne.
Spécifie que l'élément doit être affiché en ligne, prenant seulement la largeur nécessaire, comme s'il était du texte.
Le type de puce ou de numérotation pour les listes ul ou ol. Il faut lui passer une valeur de type de liste accepté.
L'image à utiliser comme puce pour les listes ul. Il faut lui passer l'URL de l'image à utiliser ou none.
La position des marqueurs dans les listes ul ou ol. On peut l'utiliser pour s'aider dans l'alignement des listes. Elle accepte les valeurs inside ou outside.
Une propriété raccourcie pour définir le type de liste, l'image utilisé pour les puces et la position des marqueurs en une seule déclaration. Elle accepte les valeurs list-style-type, list-style-image et list-style-position l'une à la suite de l'autre comme ceci: disc none outside.
La façon dont les bordures des cellules d'un tableau table sont affichées. Elle accepte les valeurs collapse ou separate.
L'espace entre les bordures des cellules d'un tableau table lorsque border-collapse est à separate. Il faut lui passer une unité de mesure de taille.
L'espace entre les bordures des cellules d'un tableau table lorsque border-collapse est à separate. Si on lui passe deux valeurs, la première est pour l'horizontal et la seconde pour le vertical.
La position de la légende d'un table. Elle permet de déplacer le caption au-dessus ou au-dessous du tableau. Elle accepte donc uniquement les valeurs top ou bottom.
L'alignement du texte à l'intérieur d'un élément. Il faut lui passer une valeur parmi left, right, center ou justify.
La taille de la police de caractères utilisée pour le texte. Il faut lui passer une unité de mesure de taille. On utilisera typiquement le rem ou le em.
Le poids de la police de caractères utilisée pour le texte. Il faut lui passer une valeur parmi normal, bold, bolder ou lighter, ou un nombre entre 100 et 900.
Le style de la police de caractères utilisée pour le texte. On l'utilise pour mettre le texte en italique. Il faut lui passer une valeur parmi normal, italic ou oblique.
Les traits décoratifs appliqués au texte. On l'utilise pour souligner, surligner ou barrer le texte. On peut lui passer la position, le style, l'épaisseur et la couleur de la ligne. Les valeurs possible de style de ligne et de position de ligne peuvent être trouvé aux liens correspondants.
La transformation du texte pour le forcer en majuscules, minuscules ou pour seulement mettre la première lettre en majuscule. Il faut lui passer une valeur parmi uppercase, lowercase ou capitalize.
La variante de la police de caractères utilisée pour le texte. On l'utilise pour mettre le texte en "petites majuscules". Si la police de caractères le permet, on peut lui passer la valeur small-caps.
La famille de la police de caractères utilisée pour le texte. Il faut lui passer le nom de la police de caractères, ou une liste de polices de caractères séparées par des virgules qui seront utilisé dans l'ordre si une police ne peut être chargé. On peut aussi utiliser les valeurs serif, sans-serif, monospace, cursive ou fantasy qui pointe sur des polices différentes dépendant des systèmes d'exploitation.
Spécifie que l'élément est un conteneur flex, ce qui permet de disposer les éléments enfants les uns à côté des autres.
La direction dans laquelle les éléments enfants d'un conteneur flex sont disposés. Par défaut, les éléments sont disposés horizontalement de gauche à droite avec la valeur row. On peut toutefois aussi utiliser column pour mettre les éléments un sous l'autre.
Spécifie si les éléments enfants d'un conteneur flex doivent être regroupés sur une seule ligne ou s'ils peuvent être répartis sur plusieurs lignes. Par défaut, les éléments sont regroupés sur une seule ligne avec la valeur nowrap. On peut toutefois aussi utiliser wrap pour permettre aux éléments de se répartir sur plusieurs lignes.
L'espace entre les éléments enfants d'un conteneur flex ou d'une grille. Il faut lui passer une unité de mesure de taille. On peut aussi lui passer deux valeurs, la première pour l'horizontal et la seconde pour le vertical.
L'alignement des éléments sur l'axe du conteneur flex. Il faut lui passer une valeur parmi flex-start, flex-end, center, baseline ou stretch. La disposition flex utilise la valeur stretch par défaut.
La gestion de l'espace sur l'axe du conteneur flex. On l'utilise pour déplacer et diviser l'espace vide autour des éléments enfants. Il faut lui passer une valeur parmi flex-start, flex-end, center, space-between, space-around ou space-evenly. La disposition flex utilise la valeur flex-start par défaut.
Spécifie que l'élément est un conteneur de grille, ce qui permet de disposer les éléments enfants dans une grille en 2 dimensions.
La façon dont un élément est positionné dans la page. Il faut lui passer une valeur parmi static, relative, absolute, fixed ou sticky. La position par défaut est static.
Spécifie que l'élément est positionné relativement à sa position normale dans le flux de la page. On peut utiliser les propriétés top, right, bottom et left pour le déplacer par rapport à sa position normale.
Spécifie que l'élément est positionné par rapport à son conteneur parent le plus proche qui a une position autre que static. On peut utiliser les propriétés top, right, bottom et left pour le déplacer par rapport à ce conteneur.
Spécifie que l'élément est positionné par rapport à la fenêtre du navigateur et ne bouge pas lorsque l'utilisateur fait défiler la page. On peut utiliser les propriétés top, right, bottom et left pour le placer à un endroit spécifique de la fenêtre.
Spécifie que l'élément est positionné de manière relative jusqu'à ce qu'il atteigne une certaine position dans le défilement, après quoi il devient fixe. On peut utiliser les propriétés top, right, bottom et left pour définir cette position.
Ces propriétés sont utilisées pour déplacer un élément positionné par rapport à sa position normale, à son conteneur parent ou à la fenêtre dépendant de sa valeur de position. Il faut leur passer une unité de mesure de taille.
La profondeur d'un élément dans la pile de rendu. On l'utilise pour contrôler quel élément est au-dessus ou en dessous des autres lors de superpositions avec la propriété position. Il faut lui passer un nombre entier, positif ou négatif.
Applique une transformation géométrique à un élément, comme la rotation, la mise à l'échelle ou la translation. On lui passe une fonction de transformation.
Définit le point d'origine pour les transformations appliquées à un élément. On utilise souvent les valeurs center, top, bottom, left ou right pour définir l'origine en X et en Y. On peut aussi lui passer une unité de mesure de taille pour définir l'origine précisément.
Permet de créer des transitions animé entre les états d'un élément. On lui passe la propriété que l'on veut animer, la durée de l'animation, le délai avant le début de l'animation et la fonction de timing. Par exemple: color 0.3s ease-in-out. Vous pouvez trouver la documentation de cette propriété au lien correspondant.