FORMATEUR - WEBMESTRE - Tél : 06 25 27 61 68
7 rue André Bernard - 93110 Rosny sous Bois
Syntaxes de regroupements
Certaines règles permettent de faciliter et d'alléger considérablement la production de code CSS ; observer ces principes simples fournira des feuilles de styles aérées bien plus compréhensible.
1) Regroupement des sélecteurs
La première construction syntaxique utile permet de regrouper des sélecteurs.
Au lieu de répéter la même règle pour plusieurs éléments, on pourra
factoriser leurs sélecteurs en les séparant par des virgules. .texte { sera équivalente à la règle unique : .texte, p, h1, h2 { Cette dernière déclaration annulera la marge gauche de tous les éléments de classe .texte, de tous les paragraphes et de tous les titres de premier et de deuxième niveau. 2) Regroupement des propriétés
Certaines propriétés génériques prévoient une version raccourcie, permettant l'application de plusieurs valeurs en une seule déclaration. C'est ainsi que l'on pourra réduire la règle : p { de la manière suivante : p { D'autres propriétés raccourcies pourrons s'avérer bien utiles :
Ces exemples sont donnés à titre indicatif et pour illustrer le principe de regroupement. Toutes ces propriétés seront détaillées ultérieurement. 3) Les sélecteurs et l'arborescence
Certaines des constructions syntaxiques spécifiques facilitent la sélection des éléments en CSS. Selon la structure du document et principalement son arborescence (c'est-à-dire la hiérarchie des blocs, chacun étant placé « sous » l'éventuel bloc qui le contient), il est possible de pointer directement certains éléments en fonction de leur situation dans le document. L'arborescence du document permet, donc, de sélectionner plus facilement les divers éléments que le souhaite modifier. a.toto {background-color: yellow;} ne désignera que les liens <a> de classe toto. Conséquences :
L'imbrication dans les sélecteurs permet aux règles CSS de ne concerner que les éléments descendant d'autres éléments précis. On peut ainsi ne cibler que les paragraphes contenus dans le bloc <div> sans influencer les autres paragraphes du document. Pour cela, on écrira le sélecteur sous la forme « ancêtre descendant » en séparant ces deux éléments d'un blanc. Ainsi la règle a img {border-width : 0 ;} ne supprimera que les bordures des images contenues dans un lien. Il est impératif que la balise <img> descende de la balise <a> pour que la règle s'applique. Il n'est toutefois pas nécessaire que ces deux balises descendent directement l'une de l'autre : un ancêtre plus lointain conviendra. 4) Simplifier grâce à la hiérarchie
Dans un site web bien architecturé, cette méthode permet d'éviter le recours aux classes dans la plupart des cas. Vous vous épargnerez ainsi bien du code inutile et travaillerez plus rapidement et plus efficacement. En effet, on peut très facilement simplifier des structures comme celle-ci : <ul id="menu"> sous une forme ne faisant pas appel aux classes sur les liens : <ul id="menu"> Tous les liens <a> descendant de la balise <ul> (via l'élément intermédiaire <li>), il est très facile de les désigner par leur position hiérarchique : #menu a {propriétés} On peut évidemment préciser cette déclaration en ajoutant des éléments de l'arborescence. #menu li a {propriétés} Autres sélecteurs hiérarchiquesLes normes CSS 2 et CSS 3 prévoient d'autres formes de sélection hiérarchique. Documentation en ligne.Haut de page
Introduction HtmlLe fond et la formeIntroduction CssLes sélecteursSyntaxesMise en situationOuvrages de références
Auto-entrepreneur.
|
| Dernière mise à jour le 12.08.2011 |