Exercice sur les éléments adjacents
Voici différentes possibilités de code HTML (code factice) :
| 1- | <a> blabla <b> blabla </b> </a> <c> blabla </c> |
| 2- | <a> blabla <b> blabla </b> <c> blabla </c> </a> |
| 3- | <a> blabla </a> <b>blabla </b> <c> blabla </c> |
| 4- | <a> blabla </a> blabla <b>blabla </b> blabla <c> blabla </c> |
Quelle règle de style correspondrait aux possibilités énumérées ci-dessus ?
| code 1 | code 2 | code 3 | code 4 | Aucun |
| 1) | a + c + b { déclaration } |  |
|
|
|
 |
| 2) | a + b + c { déclaration } | |
|
|
|
|
| 3) | b + c + a { déclaration } | |
|
|
|
|
| 4) | a + c { déclaration } | |
|
|
|
|
| 5) | c + a { déclaration } | |
|
|
|
|
| 6) | b + a { déclaration } | |
|
|
|
|
| 7) | b + c { déclaration } | |
|
|
|
|
Exercice sur les Sélecteurs.
Prenons le code HTML suivant comme exemple :
| 1. <h1 class="ma_classe">Présentation</h1> 2. <div id="mon_id_1" class="ma_classe">Salut</div> 3. <span id="mon_id_2" class="ma_classe">Ca va ?<span> 4. <p> 5. <span>Oui !</span> 6. <div>Et toi ?</div> 7. </p> |
Quelle ligne de l'exemple sera affecté par les sélecteurs suivants?
| ligne 1 | ligne 2 | ligne 3 | ligne 4 | ligne 5 | ligne 6 | ligne 7 | |
| p > div { text-decoration:underline; } | |
|
|
|
|
|
|
| p > span { text-decoration:underline; } | |
|
|
|
|
|
|
| .ma_classe { text-decoration:underline; } | |
|
|
|
|
|
|
| p div { text-decoration:underline; } | |
|
|
|
|
|
|
| div + span { text-decoration:underline; } | |
|
|
|
|
|
|
| h1 { text-decoration:underline; } | |
|
|
|
|
|
|
| span#mon_id_2 { text-decoration:underline; } | |
|
|
|
|
|
|
| h1,div { text-decoration:underline; } | |
|
|
|
|
|
|
| p span { text-decoration:underline; } | |
|
|
|
|
|
|
| span + div { text-decoration:underline; } | |
|
|
|
|
|
|
| span.ma_classe { text-decoration:underline; } | |
|
|
|
|
|
|
Exercice sur les pseudo-classes.
Prenons le code suivant comme exemple :
| 1- <div id="mon_id"> 2- Dans la <strong class="ma_classe">pièce</strong> il y a : 3- <ul lang="fr"> 4- <li><strong>Thomas</strong></li> 5- <li>Martin</li> 6- <li>Justine</li> 7- </ul> 8- <p>et aussi Monique</p> 9- <p>Mais que se passe-t-il <strong><a href="index.html">ici</a></strong>?</p> 10- <span>Thomas dort</span>, <em>Justine dessine</em>. 11- </div> 12- <em>Martin peint</em> et Moni<span title="que pani" id="span2">que</span> |
Comment rétablir la dernière phrase "Monique panique" ?
|
#span2:before { content: attr(title); } |
|
#span2:after { content: attr(title); } |
|
em:before {content: attr(title); } |
|
em + span:before {content: attr(title); } |
Comment signaler que le lien de la ligne 9 n'a pas été visité ?
|
a:link { text-decoration:underline; } |
|
a:link:after { content:"*"; } |
|
strong+a:after { content:"new"; } |
Comment signaler que le lien de la ligne 9 a déjà été visité?
|
a:visited:after { content:" Déjà vu"; } |
|
a:visited:before { content:" Déjà vu :"; } |
|
a:visited { color:#00FF00; } |
