Propriétés CSS

Propriétés globales

all:
La propriété all permet de réinitialiser toutes les propriétés, à l’exception de unicode-bidi et direction, avec leurs valeurs initiales ou héritées.
```
all: initial | inherit | unset | revert
(CSS3)
Réinitialise toutes les propriétés
```

content:
La propriété content est utilisée avec les pseudo-éléments ::before et ::after afin de générer le contenu d’un élément.

content: <string> | <url> | counter() | attr()
(CSS2)
Définit le contenu du pseudo-élément ::before ou ::after

nav li:not(:first-child)::before {
  content: " / ";
  color: grey;
}

Valeurs globales

Il existe 4 valeurs globales, qui peuvent être données à toutes les propriété CSS: initial, inherit, unset, revert.

initial

initial (CSS2) applique la valeur initiale d’une propriété à un élément.
La valeur initiale d’une propriété CSS est définie par les spécifications W3C.

.exemple {
  color: red;
}
.exemple em {
  color: initial; /* couleur initiale de em (black) */
}

inherit

inherit (CSS2) applique la valeur calculée de la propriété de l’élément parent.

p {
  color: #333;
}
a {
  color: red;
}
p a {
  color: inherit; /* #333 */
}

unset

unset (CSS3) réinitialise la propriété afin que sa valeur soit la valeur héritée depuis l’élément parent (comme inherit) ou sa valeur initiale s’il n’y a pas d’héritage (comme initial).

p {
  color: red;
}
#sidebar p {
  color: unset; /* couleur de #sidebar ou couleur par défaut de p si non définie */
}

revert

revert (CSS4) réinitialise la propriété avec la valeur par défaut du navigateur.
Ne pas confondre revert avec initial: les navigateurs définissent des valeurs par défaut pour les différents éléments HTML, des valeurs qui sont différentes de la valeur initiale définie par les spécifications CSS.

.widget {
  all: revert;
}

Shorthand

Certaines propriétés nécessitent que d’autres soient définies.
Par exemple, pour afficher une bordure, il faut spécifier le style, la couleur et la largeur:
```
border-color: black;
border-width: 1px;
border-style: solid;
```
Quand c’est le cas, il existe généralement une propriété raccourcie (shorthand) qui permet de définir plusieurs propriétés en même temps.
```
border: 1px solid black;
```
```
border: solid black 1px;
```

Si les types des valeurs sont différents, alors l’ordre n’a pas d’importance.
Pour les autres (comme par exemple le border-style, margin ou padding peuvent prendre entre 1 et 4 valeurs numériques), leur ordre importe:

Nombre de valeurs	Exemple	Désigne…
1 valeur	padding: 5px	Tous les côtés
2 valeurs	padding: 15px 10px	Les côtés haut/bas en premier et les côtés gauche/droite en deuxième
3 valeurs	padding: 5px 10px 15px	Le côté haut en premier, les côtés gauche/droite en deuxième et le côté bas en troisième
4 valeurs	padding: 5px 0 15px 10px	Les côtés dans le sens des aiguiles d’une montre: haut, droite, bas, gauche

This site is open source. Improve this page.