« Le langage CSS/Structure et syntaxe » : différence entre les versions
Contenu supprimé Contenu ajouté
m →Règles syntaxiques de base : retouches |
m Ortho. |
||
Ligne 58 :
=== Modularisation des styles ===
Il est possible d'importer les styles contenus dans des fichiers de styles différents afin de les organiser de façon modulaire. Parmi les pratiques possibles, on rencontre notamment :
* la scission des styles relatifs à la mise en page, c'est-à-dire le placement des éléments de la page, et des styles relatifs à la typographie (couleurs, bordures, polices, etc.).
* la cascade d'une feuille globale pour un groupe de pages et d'une feuille spécifique à la page concernée (voire une cascade plus complexe prenant en compte les styles par rubriques de pages)
Ligne 157 :
==== Adapter les styles au périphérique de sortie ====
Le périphérique de sortie de la page web n'est pas forcément l'écran de l'ordinateur. Il peut être également l'imprimante pour faire un tirage papier, un projecteur pour une présentation grand format, ou un navigateur mobile. Les styles définis pour l'écran ne conviennent généralement pas pour d'autres médias. Pour prendre deux exemples fréquents :
* le menu latéral de gauche : est-il vraiment utile à l'impression ? Généralement non, il faudrait donc le faire disparaître dans ce cas.
* 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 Html]]. Il existe à nouveau deux techniques : la mention directement dans la feuille ou la mention à l'importation d'une feuille externe. Dans le premier cas, les styles CSS contiennent un passage de ce type :
Ligne 258 :
# élément Html, par exemple « <tt>h1 {color: black}</tt> » (vaut 1 point de priorité).
# 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 Html, par exemple « <tt><nowiki><h1 style="color: black">...</h1></nowiki></tt> » (vaut 1000 points de priorité)
| |||