Sélecteurs d'éléments
1)
Traduire
-
Caractériser d'une phrase
les éléments concernés par les sélecteurs donnés.
-
Donner un exemple de configuration correspondant à chaque sélecteur
Exemple :
-
sélecteur : div p strong
-
phrase correspondante :
les éléments strong descendant d'un paragraphe descendant eux-mêmes
d'un div.
- configuration : <div><p>c'est <strong> super </strong> </p> </div>
Les sélecteurs à traiter :
-
div * p
-
p *
-
div>p
-
h1+div>p
-
h1+div blockquote>p+p
- h1+* div+*>p
2) Identifier les éléments concernés par les sélecteurs
Le code :
- <div>
- <p> Un paragraphe </p>
- <blockquote>
- <div>
- <p>Un paragraphe</p>
- </div>
- <p> un paragraphe
- <strong> dans un div </strong> </p>
- </blockquote>
- <p> un autre paragraphe </p>
- </div>
- <p> un petit dernier pour la route</p>
Les sélecteurs
:
-
body *
- div *
-
div div
-
div>div *
- div+*
- div+*>*
-
*+*+*
- blockquote *+*
-
blockquote>p
- blockquote * *
2) Pratique de la cascade
Soit le code suivant
-
<h1>
Un peu de rélexion </h1>
-
<p> Un paragraphe </p>
-
<blockquote>
-
<h1>Un titre dans une citation</h1>
-
<p> un paragraphe dans une
-
<strong> citation </strong> </p>
- </blockquote>
-
<p> un autre
-
<strong>
paragraphe </strong></p>
- <p> un petit dernier pour en finir </p>
Soit l'ensemble de règles CSS suivantes :
- body{color : black; font-size: 12px;}
- p {color : blue;}
- blockquote {color : green; font-size: 10px;}
- blockquote strong {color : blue;}
- blockquote>strong {color : black;}
- strong {color : red;}
- blockquote+p strong {font-size : 9px;}
- h1 {font-size : 18px;}
- p+*>h1 {font-size : 16px;}
- blockquote h1+* * {color : yellow; font-size : 11px;}
- Pour chaque élément dans le code, identifié par le numéro de ligne de sa balise ouvrante, déterminer les règles CSS applicables.
- Pour chaque élément ordonner les règles applicables selon leur spécificité.
- En déduire la valeur des propriétés "color" et "font-size" pour chaque élément sachant que ces deux propriétés peuvent être héritées si nécessaire.
- Soumettre le résulat trouvé à la réalité d'un navigateur.
