« Le langage CSS/Structure et syntaxe » : différence entre les versions
Contenu supprimé Contenu ajouté
→Déclaration de styles : + précision sur filtrage via @import (à illustrer) |
→Adapter les styles au périphérique de sortie : -allusion aux lecteurs d''écran (?), hors sujet et + exemple plus pertinent des mobiles. Correction exemple pour différencierscreen et print. |
||
Ligne 136 :
==== 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
* 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 148 ⟶ 150 :
<nowiki><html>
<head>
</nowiki>'''<link rel="stylesheet" type="text/css" href="styles.css" media="
'''<link rel="stylesheet" type="text/css" href="print.css" media="print" />'''<nowiki>
</head>
Ligne 158 ⟶ 160 :
</html></nowiki>
Dans cet exemple, la feuille ''styles.css'' contient le style
=== Dans un document Xml ===
| |||