8
modifications
« Le langage CSS/Structure et syntaxe » : différence entre les versions
Aller à la navigation
Aller à la recherche
Remplacements Html -> HTML
m (corrections orthographiques) |
(Remplacements Html -> HTML) |
||
|
}
Remarque : la dernière règle du groupe ne comporte pas obligatoirement de point-virgule terminal. Toutefois le mettre systématiquement évite de l'oublier. Il faut savoir que les erreurs de syntaxes CSS ont pour effet d'interrompre dans le navigateur web l'interprétation des styles et donc la mise en forme. Contrairement au moteur d'interprétation du code
=== Modularisation des styles ===
== Utiliser les styles CSS dans une page web ==
=== Dans une page
NB: l'annexe [[../Interface HTML]] offre une vue synthétique des exemples exposés ci-après.
==== Déclaration de styles ====
Une première méthode pour utiliser des styles CSS consiste à intégrer les styles dans l'entête du fichier
<body>
<p>
Exemple de page
</p>
</body>
</html></source>
Les styles CSS ainsi définis ne sont évidemment valides que pour la page en question, on réservera donc en général cette méthode à l'expérimentation ou à des styles propres à une page unique. Pour plus de souplesse, on peut donc transférer le code CSS dans un fichier texte, par exemple ''styles.css'', et appeler ces styles dans l'entête
<body>
<p>
Exemple de page
</p>
</body>
<body>
<p>
Exemple de page
</p>
</body>
</html></source>
Cette règle permet, via ses variantes syntaxiques, de filtrer les navigateurs de génération 4.x et 5.0, par exemple Netscape 4 et Internet Explorer 5.0 Mac et/ou Windows. Il faut donc l'utiliser en toute connaissance de cause. Son avantage est que l'on peut facilement déclarer plusieurs feuilles de styles à importer sans multiplier les balises
==== Adapter les styles au périphérique de sortie ====
* la disposition en colonne : est-elle appropriée à un écran réduit tel que celui d'un mobile ? Dans ce cas, il convient d'opter pour une présentation linéaire.
Ceci est possible dans les feuilles de styles grâce à la mention du ''media'' de sortie. On trouvera la liste des média possibles à la page [[Programmation CSS/Interface HTML#D.C3.A9finir une feuille de style pour diff.C3.A9rents m.C3.A9dias|Interface
@media screen {
<body>
<p>
Exemple de page
</p>
</body>
<source lang="html4strict"><?xml-stylesheet type="text/css" href="styles.css"?></source>
L'inconvénient par rapport à l'utilisation d'une feuille de transformation XSL permettant de générer du
== Ordre d'interprétation des styles et cascade ==
Remarques :
* toutes les méthodes de déclaration des CSS interviennent dans la cascade lorsqu'elles sont mélangées dans la même page
* la cascade ne s'applique que lorsque c'est exactement le même sélecteur qui est employé ou, bien sûr, un sélecteur de priorité supérieure (lire la suite).
}
Le code
</div></source>
Nous supposons ici que les éléments du menu sont tous contenus dans un unique bloc parent, un élément ''div'' d'identifiant ''menu''. Que se passerait-il si une feuille de styles importée par la suite modifiait à nouveau la couleur des éléments de titre
==== Ordre des spécificités des règles ====
Il est évident dans l'exemple précédent que les titres du menu ne doivent pas être traités comme les autres titres. Aussi, plus le sélecteur d'élément est en quelque sorte ''précis'' dans sa cible, plus sa priorité est importante. La précision du sélecteur est appelé ''spécificité'' dans le jargon CSS. L'ordre des spécificités est le suivant, de la moins prioritaire à la plus prioritaire :
# élément
# imbrication d'éléments, par exemple « <tt>div h1 {color: black}</tt> » (vaut 2 points de priorité, un par élément présent dans le sélecteur)
# utilisation d'une classe, par exemple « <tt>h1.noir {color: black}</tt> » (vaut 11 points de priorité : 1 pour l'élément, 10 pour la classe)
# utilisation d'un identifiant, par exemple « <tt>h1#nom-du-site {color: black}</tt> » (vaut 101 points de priorité : 1 pour l'élément, 100 pour l'identifiant)
# style dans la balise
Un style de moindre priorité ne peut jamais modifier un style de priorité plus élevée. Il existe cependant un moyen de déroger à cette règle : la mention <tt>!important</tt>. Cette mention s'insère juste derrière une valeur de propriété CSS et indique au navigateur qu'il ne faut pas tenir compte de styles contradictoires par la suite. Elle s'utilise de cette manière :
| |||