« Le langage CSS/Structure et syntaxe » : différence entre les versions

Aller à la navigation Aller à la recherche
Considérons par exemple les scripts CSS ''styles.css'' et ''couleurs.css'' suivants :
 
<syntaxhighlight lang="css">
/* styles.css */
p {
color: black;
}
</syntaxhighlight>
 
<syntaxhighlight lang="css">
/* couleurs.css */
p {
color: gray;
}
</syntaxhighlight>
 
Les textes des paragraphes seront de couleur grise si ces styles sont importés de cette manière :
 
<syntaxhighlight lang="css">
@import "styles.css";
@import "couleursstyles.css";
@import "stylescouleurs.css";
</syntaxhighlight>
 
alors qu'ils seraient noir en inversant l'ordre d'importation des feuilles de styles. Il faut donc veiller à ne pas dupliquer des règles dans des fichiers CSS différents sous risque de casse-tête par la suite. L'intérêt de cette spécificité de cascade est que les styles par défaut du navigateur sont toujours écrasés par les styles de la page web, lesquels peuvent à nouveau être écrasés par les styles de l'utilisateur lorsque le navigateur le permet. Ainsi si l'utilisateur visite régulièrement un site écrit trop petit, il peut définir une règle agrandissant la police pour ce site.

Menu de navigation