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

Contenu supprimé Contenu ajouté
Tavernierbot (discussion | contributions)
m Robot : Retouches cosmétiques
Ligne 5 :
|extramarge=0.5em 0|extramargelat=0.5em 1em}}
'''Si vous êtes pressé''' consultez en priorité :
* [[#R.C3.A8gles_syntaxiques_de_baseA8gles syntaxiques de base|Règles syntaxiques de base]]
* [[#Structure_gStructure g.C3.A9n.C3.A9rale|Structure générale]]
* [[#D.C3.A9claration_de_stylesA9claration de styles|Déclarations de styles]]
{{Fin}}
Ce chapitre a pour but de poser les bases de la structure d'une feuille de styles CSS ainsi que les premiers éléments de syntaxe. Nous aborderons également la liaison entre les documents web et les CSS, la propriété de ''cascade'' des styles et l'adéquation des styles à l'appareil restituant la page web.
Ligne 54 :
=== Dans une page Html ===
 
NB: l'annexe [[../Interface_HTMLInterface HTML]] offre une vue synthétique des exemples exposés ci-après.
 
==== Déclaration de styles ====
Ligne 133 :
Le périphérique de sortie de la page web n'est pas forcément l'écran de l'ordinateur. Il peut être simplement l'imprimante pour faire un tirage papier, mais aussi un équipement mobile ou adapté à des personnes présentant certains handicaps (de vue notamment !). Les styles définis pour l'écran peuvent donc ne pas convenir pour d'autres périphériques. L'exemple classique est 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.
 
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_diffA9finir une feuille de style pour diff.C3.A9rents_mA9rents 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 :
 
@media screen {