ACCUEIL | PAGE PRECEDENTE | PAGE SUIVANTE | FIN DE PAGE | INDEX |
Sélecteurs simples
Un sélecteur simple associe un élément (par son type ou son attribut) à une règle particulière et cela, quelle que soit la position qu'il occupe parmi les autres éléments.
On peut grouper plusieurs sélecteurs simples, à une même règle de présentation, en les séparant par des virgules
H1,H2 {color:navy}
H3, H4, H5 {color:red}
H6,H7 {color:green}
Dans cet exemple, les en-têtes
H1 et H2 sont affichés en bleu,
H3,H4 et H5 sont affichés en rouge,
H6 et H7 sont affichés en vert.
Sélecteurs contextuels
Comme leur nom l'indique, les sélecteurs contextuels associent une règle particulière à un élément, mais en fonction de sa situation.
Par exemple, tous les éléments <STRONG> de classe ex (CLASS="ex") situés dans des paragraphes (P) sont affichés en jaune. Si un élément <STRONG> n'est pas inséré dans un élément P (SPAN, DIV...) ou un élément P de classe différente, la règle ne lui sera pas appliquée. On sépare par des espaces les sélecteurs contextuels que l'on veut grouper.
P STRONG.ex {color:yellow}
<P> |
Voici un élément strong situé dans un élément P de classe ex. |
Chaque sélecteur peut faire référence à une CLASSE, un ID ou un TYPE d'élément.
DIV.rem P STRONG {font-style:italic;color:green;font-size:150%}
<DIV CLASS="rem"> |
Élément strong situé dans un élément DIV (CLASS="rem") |
Ici, sont affichés les éléments <STRONG>, inclus dans un élément P s'il est situé dans un élément DIV de classe rem (CLASS="rem") en caractères italiques, de couleur verte, dans une police agrandie de 50%.
UL EM.info {font-size:30px;color:yellow;background:navy}
Les éléments EM de classe info (CLASS="info") qui sont contenus dans une liste (UL) sont affichés dans une police de 30px, en couleur jaune sur fond bleu si celui-ci est lui-même contenu dans un élément UL.
<UL> |
|
.
|
point
|
H1.rouge { color : red } | pour créer une classe |
{...}
|
accolades
|
DIV { background : #669933 } | les accolades fixent les limites du bloc de déclarations |
:
|
deux points
|
H1 { font-size : 14pt } | pour affecter une valeur à une propriété |
;
|
point-virgule
|
H1 { font-size : 15pt; font-weight : bold; color : red } | pour séparer chaque déclaration ( la paire propriété/valeur) |
,
|
virgule
|
H1, H2, H3 { color : red} | 3 sélecteurs regroupés |
/
|
|
H1 { font : 15pt/17pt "Arial" } | |
#
|
dièse
|
#z098y { letter-spacing : 0.3em }
puis
<H1 id=z098y> Titre en caractère élargi </H1>
|
en déclaration générale, puis dans le corps du document
|
>
|
|
DIV > P: first-child { color ; blue } |
DIV est ici l'élément parent
Le signe > précède le 2ème sélecteur (élément enfant) pour lequel on a
spécifié une pseudo-classe :first-child
Tout premier élément-enfant "paragraphe" d"un élément >DIV> sera ainsi
affiché en bleu dans le document
|
/* ... */
|
|
/* ...commentaires... */ | Commentaires |