Héritage et parenté des styles
En CSS, la notion d’héritage fait que chaque élément hérite des styles de son parent. Ainsi, un style appliqué à la balise <table> par exemple (taille de police par exemple) sera répercuté sur chaque <tr> et chaque <td> du tableau. Cela évite d’avoir à dupliquer des styles sur de multiples éléments.
Toutes les propriétés ne sont cependant pas héritées. C’est le cas des propriétés des blocs (margin, padding, display, etc.). Les marges intérieures et extérieures par exemple, restent propre à l’élément sur lequel on les spécifie.
L’héritage peut également s’appliquer en définissant des styles sur des éléments contenus dans des class ou id que l’on aura défini dans le HTML. On peut ainsi par exemple appliquer un style en particulier à toutes les balises <li> contenues dans un menu, ce qui évite d’avoir à définir une class et à l’appliquer sur chaque <li> de notre menu.
menu li {
font-size : 14px;
}La gestion de l’héritage est particulière pour la taille des polices. Il est conseillé d’utiliser des tailles relatives (en em). Avec cette unité, si l’on indique que le <body> a une taille de 2em et qu’on donne aussi la taille de 2em à des éléments contenus dans le <body>, un <p> par exemple, alors ces éléments auront une taille de 2em par rapport à la taille du parent ce qui fera 4em au final.
Les sélecteurs
Sélecteurs sur balises HTML
Pour appliquer un style à des éléments HTML, on peut cibler ces derniers via leur balise. On peut ainsi appliquer un style à une balise, ou même à plusieurs balises.
/* Style appliqué à une balise */
p {
color : black;
}
/* Style appliqué à plusieurs balises */
h1, h2, h3 {
text-decoration : underline;
}On peut également appliquer un style sur une balise en ciblant le nom qu’on affecte dans les attributs class ou id.
/* Style appliqué à une class */
.lien_menu {
font-size : 14px;
}
/* Style appliqué à un id */
#menu {
background-color : silver;
}Sélecteurs avancés
/* Le sélecteur universel, il s'applique à toutes les balises */
* {
}
/* Appliquer un style à un élément située dans un autre, exemple : tous les span situés dans un h3 */
h3 span {
}
/* Appliquer un style au 1er élément suivant un autre, exemple : le 1er p après h3 */
h3 + p {
}
/* Appliquer un style à tous les éléments suivants d'un élément (ex : tous les p après un h3) */
h3 ~ p {
}
li:hover ~ li {
opacity: 0.4;
}
/* Appliquer un style aux enfants direct d'un élément */
ul.menu > li {
}Sélecteurs d’attributs
/* Appliquer un style à toutes les balises possédant un attribut en particulier */
a[title] {
}
/* Appliquer un style à toutes les balises ayant un attribut ayant lui-même une valeur en particulier */
a[title="Cliquez ici"] {
}
/* Appliquer un style à toutes les balises ayant un attribut dont la valeur contient un mot */
a[title*="ici"] {
}
/* Appliquer un style à toutes les balises ayant un attribut dont la valeur terminer par un mot */
a[href$=".org"] {
}Les pseudo-classes
/* Appliquer un style au premier élément */
ul:first-child {
}
/* Appliquer un style au dernier élément */
ul:last-child {
}
/* Appliquer un style aux lignes impaires d'un tableau */
tr:nth-child(odd) {
}
/* Appliquer un style aux lignes paires d'un tableau */
tr:nth-child(even) {
}
/* Paragraphe n'ayant pas la classe description */
p:not(.description) {
}
/* État normal, par défaut, d'un lien */
a:link {
}
/* Lien verzs une page déjà visitée (présente dans l'historique du navigateur) */
a:visited {
}
/* Lien sur lequel on clic */
a:active {
}
/* État Lien survolé par le curseur */
a:hover {
}
/* Lien ayant le focus, lorsqu'on navigue avec le clavier */
a:focus {
}
input:focus {
}
input:checked {
}
input:indeterminate {
}
input:required {
}
input:in-range {
}
input:out-of-range {
}
select:disabled {
}
select:enabled {
}Les pseudo-éléments
/* Ajoute une flèche verte après les liens */
a:after {
content: "→";
color: green;
}
/* Ajoute une flèche verte avant les liens */
a:after {
content: "→";
color: green;
}
/* Grossi la 1ère lettre du paragraphe */
p::first-letter {
font-size: 130%;
}
/* Grossi la 1ère ligne du paragraphe */
p::first-line {
font-size: 130%;
}