Informatique


Exercices sur les sélecteurs


  • 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;}
    • .pherb>h2 p {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.

  • 
    <style>
    	section div p	{font-family:Verdana;}
    	p > 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 "Mangas Coloradas" 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:
    
    <section>
    <h1>Les Mérovingiens</h1>
    	<p>Première dynastie française</p>
    <h2>Clodion</h2>
    <div>
    	<p>Roi des Francs saliens v.430-v.450 </p>
    	<p> 
    		<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>
    		Il est essentiellement connu pour être le plus ancien roi de la dynastie 
    		des <strong>Mérovingiens</strong> dont l’existence soit certaine.
    		</p>
    	</p>
    </div>
    </section>		
    
    Quels sélecteurs peux-tu utiliser pour:
    • cibler tous les éléments du document (2 choix)?
    • cibler tous les éléments <h2>?
    • cibler les <p> qui ont pour ascendant immédiat une balise <div>
    • cibler les balises <strong> qui sont dans un paragraphe <p> (2 choix possibles!)
    • Peux-tu expliquer le choix sémantique des balises <h1>, <h2>, <strong> et <i>

  • 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!="Bonjour"]
    • p[title^="H"]
    • p[title$="H"]
    • p[title*="H"]
    • ul, ol, dl
    • div .desc
    • div > .enfant
    • label + input
    • #debut ~ div