Conception de documents et d'interfaces numériques
Modifier le style des éléments composant une page web :
h1 { text-align: center; font-size: 5rem; font-weight: bold;
color: white; }
Sélecteur
Déclaration
Propriété
Valeur
Règle
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ... -->
</body>
</html>
X - Y -Z
Nombre de sélecteurs d'ID
Nombre de sélecteurs de classes, d'attributs et de pseudo-classes
Nombre de sélecteurs de types et de pseudo-éléments
body {
/*
* 1 sélecteur de type => 0 - 0 - 1
*/
}
.abstract {
/*
* 1 sélecteur de classe => 0 - 1 - 0
*/
}
#article {
/*
* 1 sélecteur d'ID => 1 - 0 - 0
*/
}
body .abstract {
/*
* 1 sélecteur de type + 1 sélecteur de classe => 0 - 1 - 1
*/
}
body #article .abstract {
/*
* 1 sélecteur de type + 1 sélecteur d'ID + 1 sélecteur de classe => 1 - 1 - 1
*/
}
En cas de conflit entre deux règles CSS qui appliquent la même propriété avec des valeurs différentes :
Contenu
Marge interne (padding)
Bordure (border)
Marge externe (margin)