Wikilivres

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

Navigation interactive dans l’historique
← Modification précédenteModification suivante →
Contenu supprimé Contenu ajouté
VisuelWikicode
m corrections orthographiques
Remplacements Html -> HTML
Ligne 54 :
}
 
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 HtmlHTML des navigateurs, l'interprétation des CSS par les navigateurs ne corrige habituellement pas d'erreur de syntaxe.
 
=== Modularisation des styles ===
Ligne 73 :
== Utiliser les styles CSS dans une page web ==
 
=== Dans une page HtmlHTML ===
 
NB: l'annexe [[../Interface HTML]] offre une vue synthétique des exemples exposés ci-après.
Ligne 79 :
==== 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 HtmlHTML à l'aide d'une balise ''style''. Le code CSS est alors simplement écrit entre la balise ouvrante et la balise fermante :
 
 
Ligne 94 :
<body>
<p>
Exemple de page HtmlHTML avec CSS intégrés
</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 HtmlHTML à l'aide d'une balise ''link''. Ce fichier CSS peut alors être inclus dans toute page web de cette manière :
 
 
Ligne 108 :
<body>
<p>
Exemple de page HtmlHTML avec CSS externes
</p>
</body>
Ligne 148 :
<body>
<p>
Exemple de page HtmlHTML avec CSS externes
</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 HtmlHTML.
 
==== Adapter les styles au périphérique de sortie ====
Ligne 161 :
* 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 HtmlHTML]]. 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 {
Ligne 177 :
<body>
<p>
Exemple de page HtmlHTML avec CSS intégrés
</p>
</body>
Ligne 191 :
<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 HtmlHTML à partir du Xml, est que tous les éléments Xml ont la même apparence par défaut. Il faut ainsi redéfinir le style de quasiment chaque élément. Au contraire une transformation en HtmlHTML permet d'utiliser les éléments standards du HtmlHTML comme les paragraphes, les titres, les listes, etc.
 
== Ordre d'interprétation des styles et cascade ==
Ligne 219 :
 
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 HtmlHTML
* 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).
 
Ligne 235 :
}
 
Le code HtmlHTML correspondant serait :
 
Ligne 250 :
</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 HtmlHTML par un « <tt>h1 {color: black}</tt> » ? Rien !
 
==== Ordre des spécificités des règles ====
Ligne 256 :
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 HtmlHTML, 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 HtmlHTML, par exemple « <tt><nowiki><h1 style="color: black">...</h1></nowiki></tt> » (vaut 1000 points de priorité)
 
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 :
Récupérée de « https://fr.wikibooks.org/wiki/Le_langage_CSS/Structure_et_syntaxe »