- Soit le code html suivant :
<section>
<div id=d1>
<h1 id=titre1>My very beau site</h1>
<h3>Introduction</h3>
<p class=para>Qu'il est beau mon beau site...</p>
<p class=para >Pour être beau, il est beau...</p>
<p>Pour être beau, il est beau...</p>
</div>
<div id=d2>
<h1>My very beau site</h1>
<h3>Introduction</h3>
<p class=para >Qu'il est beau mon beau site...</p>
<p class=para >Pour être beau, il est beau...</p>
<p>Pour être beau, il est beau...</p>
</div>
</section>
Ecrire les sélecteirs permettant de cibler :
- Toutes les balises d'id d1 et d2
- Uniquement la première balise <p>
- La division d’id d1
- Le h3 qui se trouve dans la division d2
- Toutes les divisions <div>
- Tous les paragraphes de classe para
- Tous les h1
- Voici une série de sélecteurs et de styles associés.
Peux-tu les exprimer en français et par écrit.
- body {color:#FF0000;}
- * {color:#FF0000;}
- header,section {color:#FF0000;}
- div p {color:#FF0000;}
- div.plouc p {color:#FF0000;}
- div > .bil {color:#FF0000;}
- article.go div p {color:#FF0000;}
- div h2+p {color:#FF0000;}
- .pherb h2+p {color:#FF0000;}
- div.pherb h2+p.perry {color:#FF0000;}
- Réalise le code html le plus simple possible correspondant aux styles de l'exercice 1.
Le code html présentera au minimum les balises: html,
head, link, body, section et article.
-
Démo
<style>
section div p {font-family:Verdana;}
div > em {text-decoration:underline;color:red;}
</style>
</head>
<body>
<section>
<h1>Les Chiricahuas</h1>
<div>
<p>
<strong>Géronimo</strong> est admis au conseil de guerre des
<strong>Apaches <em>Chiricahuas</em></strong> en 1846.
</p>
<div>
<div>
En octobre 1862, il participe avec les chefs <strong>Cochise</strong> et
<em>Mangas Coloradas</em> à la bataille d'Apache Pass.
En janvier 1863, <em>Mangas Coloradas</em> — malgré l'opposition de
<strong> Géronimo — se rend au <em>Fort McLane</em></strong>,
dans la petite ville d'Apache Tejo, pour y signer un traité de paix.
</div>
</section>
A partir du code de l'exercice:
- peux-tu écrire les mots ou les phrases qui seront soulignés et de couleur rouge?
- pourquoi la police Vedana s'arrête subitement?
- pourquoi le groupe de mots "Fort McLane" n'est-il pas souligné et en rouge?
- puis-je remplacer p {font-family:Verdana;} par div p {font-family:Verdana;}?
- puis-je remplacer p {font-family:Verdana;} par section > p {font-family:Verdana;}?
- puis-je remplacer p {font-family:Verdana;} par section p {font-family:Verdana;}?
- puis-je remplacer p {font-family:Verdana;} par section div p {font-family:Verdana;}?
- Soit le code:
Démo
<section>
<h1>Les Mérovingiens</h1>
<p>Première dynastie française</p>
<h2>Clodion</h2>
<div>
<p>Roi des <strong>Francs saliens</strong> v.430-v.450 </p>
<div>
<p class="pres">
<strong>Clodion dit <i>le Chevelu</i></strong> est un chef
des <strong>Francs saliens</strong>, un des
peuples germaniques qui constituent la ligue des <strong>Francs</strong>.
</p>
<p class="pres">
Il est essentiellement connu pour être le plus ancien roi de la dynastie
des <strong>Mérovingiens</strong> dont l’existence soit certaine.
</p>
</div>
</div>
</section>
Quels sélecteurs peux-tu utiliser pour:
- cibler tous les éléments du document
- cibler tous la balise <section>
- cibler tous les éléments <h2>
- cibler toutes les <p>
- cibler les <p> qui ont pour ascendant immédiat une balise <div>
- cibler les <p> de classe "pres"
- cibler les <strong> qui sont dans les balises <p> de classe pres
- cibler les balises <strong> qui sont dans un paragraphe <p>
- cibler les balises <p> qui portent la classe pres
- Voici une série de sélecteurs et de styles associés.
Peux-tu les exprimer en français et par écrit.
- *
- #monDiv
- p.first
- p[title]
- p[title="Bonjour"]
- p[title|="Bon"]
- p[title^="H"]
- p[title$="H"]
- p[title*="H"]
- ul, ol, dl
- div .desc
- div > .enfant
- label + input
- #debut ~ div
