chapitre 2 : Syntaxe de base CSS

Un ensemble de règles est appelé une « règle » et est composé d’un sélecteur et d’un bloc de déclaration. entre parenthèses {}.Une déclaration contient trois parties : premièrement, un nom de propriété ; puis un côlon ; et enfin une valeur.

Les déclarations faisant référence au même sélecteur sont séparées par des points-virgules. (;).

Propriétés et valeurs

Les styles affichent leurs propriétés par le biais de valeurs. Des mots fonctionnels tels que « taille » et « largeur » sont utilisés pour étiqueter les propriétés. En utilisant l’abréviation f.s. (taille de la police) fournit un moyen compact d’exprimer des informations.

Les sélecteurs

Les sélecteurs fournissent un style pour les éléments qui correspondent à leur modèle de reconnaissance.

Le sélécteur « * »: le sélecteur universel * agit sur tous les éléments HTML.

*{ color: #ff0000; } /* pour définir une couleur rouge par défaut */

le séléctionne tous les instance d’un élément élément html : exemple le sélécteur « p » séléctionne tous les élément « p » dans le document html

/* pour définir une couleur bleue pour tous les textes des paragraphes */
p { color: #0000ff; }

Les sélecteurs de regroupement : combinent de nombreux éléments simultanément.

/* pour définir une couleur marron pour tous les titres de niveau 3, 4, 5 et 6 */
h3,h4,h5,h6 { color: brown; }

Des sélecteurs de classe apparaissent dans certains éléments.

/* pour définir une couleur verte pour les textes de certains paragraphes (ceux de la classe
.vert) */
p.vert { color: #008000; }

Tant qu’il s’agit d’une instance unique, utilisez des sélecteurs d’ID

/* pour définir une couleur grise pour le texte d’un paragraphe précis */
p#gris { color: #7F7F7F; }
/* ou */
#gris p { color: #7F7F7F; }

div est la limite d’un ensemble d’éléments qui se succèdent

/* pour définir une couleur verte pour une classe */
.vert { color: #008000; }
/*
qui s’appliquera aussi bien à :
<div class="vert">
<h1>...</h1>
<p>...</p>
<p>...</p>
</div>
ou définis par :
<h1 class="vert">...</h1>
<p class="vert">...</p>
<p class="vert">...</p>
*/

Les paragraphes ont besoin d’un élément span pour ajouter des informations supplémentaires.

/* pour définir une couleur verte pour une classe */
span.vert { color: #008000; }
/*
qui s’appliquera à :
<p>
<span class="vert">
ceci sera en vert
</span>
... ceci sera donc en bleu ...
</p>
*/

Les sélecteurs descendants font référence aux éléments contenus dans un autre élément.

/* pour définir une couleur rose d’un élément em contenu dans un élément h2 */
h2 em { color: pink; }
/*
qui s’appliquera aussi bien à :
<h2>
<em>en rose</em>
...
</h2>
qu’à :
<h2>
<code><em>en rose</em></code>
...
</h2>
*/

Lorsqu’un sélecteur enfant est appliqué à un élément qui le contient directement, une relation enfant est formée.

/* pour définir une couleur jaune d’un élément em descendant de l’élément p */
p>em { color: yellow; }
/*
qui s’appliquera seulement à :
<p><em>en jaune</em>
...
</p>
mais pas à :
<p><q><em>...</em></q>
...
</p>
*/

Suivre un autre élément entraîne des sélecteurs enfants adjacents.

/* pour définir une couleur kaki d’un élément p suivant directement un élément img */
img + p { color: khaki; }
/*
qui s’appliquera à :
<img>...</img>
<p>en kaki</p>
mais pas à :
<h3>...</h3>
<p>...</p>
*/

Le tableau suivant montre la syntaxe du sélecteur CSS telle qu’elle a été écrite.

Motif	Signification	Décrit au chapitre…
*	Correspond à tout élément.	Sélecteur universel
E	Correspond à tout élément E (c.à.d., un élément de type E).	Sélecteurs de type
E F	Correspond à tout élément F qui est un descendant de l’élément E.	Sélecteurs descendants
E > F	Correspond à tout élément F aussi un enfant de l’élément E.	Sélecteurs d’enfant
E:first-child	Correspond à un élément E aussi le premier enfant de son élément parent.	La pseudo-classe :first-child
E:link E:visited	Correspond à un élément E qui est une ancre dans la source dont le lien n’a pas été visité (:link) ou bien l’a déjà été (:visited).	Les pseudo-classes de lien
E:active E:hover E:focus	Correspond à l’élément E au cours de certaines actions de l’utilisateur.	Les pseudo-classes dynamiques
E:lang(c)	Correspond à l’élément de type E qui emploie une langue c (la détermination de cette langue est spécifique au langage du document).	La pseudo-classe :lang()
E + F	Correspond à tout élément F immédiatement précédé par un élément E.	Les sélecteurs adjacents
E[foo]	Correspond à tout élément E avec l’attribut « foo » (quelles qu’en soient les valeurs).	Sélecteurs d’attribut
E[foo= »warning »]	Correspond à tout élément E dont l’attribut « foo » a exactement la valeur « warning ».	Sélecteurs d’attribut
E[foo~= »warning »]	Correspond à tout élément E dont l’attribut « foo » a pour valeur une liste de valeurs séparées par des caractères blancs et dont une de celles-ci est « warning ».	Sélecteurs d’attribut
E[lang\|= »en »]	Correspond à tout élément E dont l’attribut « lang » a pour valeur une liste de valeurs séparées par des tirets, cette liste commençant (à gauche) par « en ».	Sélecteurs d’attribut
DIV.warning	Seulement en HTML. Identique à DIV[class~= »warning »].	Sélecteurs de classe
E#myid	Correspond à tout élément E dont l’ID est « myid ».	Sélecteurs d’ID

Source du tableau : www.yoyodesign.org/doc/w3c/css2/selector.html

Voici des exemples sur les sélécteur css

<HTML>
<HEAD>
	<TITLE>CSS - Appliquer un style (1)</TITLE>
	<STYLE type="text/css">
		* { color: #ff0000; }
		p { color: #0000ff; }
		p.vert { color: #008000; }
		p#gris { color: #7F7F7F; }
		h2 em { color: pink; }
		p>em { color: yellow; }
		img + p { color: khaki; }
		h3,h4,h5,h6 { color: brown; }
	</STYLE>
</HEAD>
<BODY>
	<A href="">Un lien en rouge (sélecteur universel *)</A>
	<P>Un paragraphe en bleu (sélecteur de type p)</P>
	<P class="vert">Un paragraphe en vert (sélecteur de classe)</P>
	<P id="gris">Un paragraphe en gris (sélecteur d’id)</P>
	<H2>Un titre de niveau 2 en rouge (sélecteur universel *) <EM>et en rose (sélecteur descendant)
	</EM></H2>
	<P>Ceci sera en bleu (sélecteur de type p) ...
		<EM>et ceci en jaune (sélecteur d’enfant)</EM>
	</P>
	<IMG SRC="">
	<P>Un paragraphe en kaki (sélecteur d’enfant adjacent)</P>
	<H3>Un titre de niveau 3 en marron (regroupement)</H3>
	<H4>Un titre de niveau 4 en marron (regroupement)</H4>
	<H5>Un titre de niveau 5 en marron (regroupement)</H5>
	<H6>Un titre de niveau 6 en marron (regroupement)</H6>
</BODY>
</HTML>