CSS — relier sélecteurs (classe, id, élément, :hover) et rendu, règles appliquées à un élément, écrire des règles depuis une liste

Sur la page web stations.html du site VéloCité, chaque station est affichée dans une boîte : <div class="station">Gare : 18 places</div>. On veut écrire la règle .station { … } du fichier CSS lié à cette page HTML.

1. Pour chaque mise en forme, choisir la déclaration correcte (mettre une croix) :
   1. un espace de 12 pixels entre le texte et la bordure de la boîte : ☐ margin : 12px ☐ padding : 12px ☐ border : 12px
   2. un espace de 20 pixels entre la bordure d’une boîte et les boîtes voisines : ☐ margin : 20px ☐ padding : 20px ☐ width : 20px
   3. une marge extérieure droite de 15 pixels, les autres marges extérieures étant nulles : ☐ margin : 0px 0px 0px 15px ☐ margin : 15px 0px 0px 0px ☐ margin : 0px 15px 0px 0px
   4. une marge intérieure haute de 5 pixels, les autres étant nulles : ☐ padding : 5px 0px 0px 0px ☐ padding : 0px 0px 5px 0px ☐ margin-top : 5px
2. Décrire l’effet de chacune des déclarations suivantes : margin : 5px 0px 5px 0px ; et margin : 10px 20px ;.
3. Écrire la règle .station qui donne : une marge intérieure de 8 pixels sur les quatre côtés et une marge extérieure basse de 6 pixels seulement.

La page HTML formules.html du site VéloCité affiche trois cartes : <div class="f1">Journalier</div>, <div class="f2">Mensuel</div> et <div class="f3">Annuel</div>. On veut, respectivement :

• pour la classe f1, une bordure pleine verte de 2 pixels ;
• pour la classe f2, une bordure orange de 2 pixels en tirets (hachée) ;
• pour la classe f3, une bordure bleue de 3 pixels en pointillés ;
• pour le bouton <input type="submit" id="choisir" value="Choisir">, une bordure noire double de 4 pixels.

1. Écrire les quatre règles CSS correspondantes.
2. Répondre par V ou F : a. border : orange dashed 2px ; est équivalente à border : 2px dashed orange ; ; b. border-style : dashed ; seule fixe aussi l’épaisseur et la couleur ; c. border : 2px hachée orange ; est une déclaration correcte.
3. Quelle déclaration donne une bordure uniquement en bas de chaque carte, pleine, noire, de 4 pixels ?

Le code HTML suivant fait partie d’une page web du site VéloCité ; la feuille de style qui lui est liée est donnée ensuite, avec les numéros de ses règles.

1 <p class="info">Station Bab Bhar : 15 places</p>
2 <p id="info">Station Gare : 18 places</p>
3 <p class="alerte" id="gare2">Station Taparura : complète</p>
4 <div class="info">Mise à jour : 8 h</div>

1 .info           { color : green ; }
2 #info           { font-weight : bold ; }
3 p               { font-size : 14px ; }
4 .alerte, #gare2 { color : red ; }

1. Pour chacune des lignes HTML 1 à 4, donner les numéros des règles qui s’appliquent et décrire le rendu du texte.
2. Un élève veut que la ligne 4 soit aussi en gras ; il écrit id="info" sur la balise <div>. Pourquoi est-ce incorrect ? Proposer une solution.
3. Répondre par V ou F : a. la règle info { color : green ; } s’applique aux éléments de classe info ; b. une même classe peut être portée par des balises différentes ; c. dans la règle 4, la virgule signifie « et » : seul un élément ayant à la fois la classe alerte et l’id gare2 est concerné.

La page carte.html du site VéloCité affiche une carte de Sfax (<div class="carte">), les stations sous forme de points (<div class="point" id="s1"></div>, …), un menu (<a class="menu" href="…">) et un paragraphe d’aide <p id="aide"> qui doit rester invisible au chargement. Voici un extrait incomplet de la feuille de style :

1 .point       { width : 20px ; height : 20px ; ……①…… ; }
2 #aide        { ……②…… ; }
3 .menu        { display : ……③…… ; margin : 0px 10px 0px 0px ; }
4 .carte       { ……④…… : url(sfax.png) ; }
5 .point:hover { ……⑤…… : scale(1.5) ; }

1. Pour chaque étiquette, entourer la proposition correcte :
   1. ① afficher chaque point sous forme de disque : ☐ border-radius : 50% ☐ border-width : 50% ☐ border-style : round
   2. ② ne pas afficher le paragraphe d’aide : ☐ display : block ☐ display : none ☐ visibility : visible
   3. ③ afficher les liens du menu côte à côte : ☐ inline ☐ none ☐ block
   4. ④ afficher sfax.png en image de fond de la carte : ☐ img ☐ list-style-image ☐ background-image
   5. ⑤ agrandir un point de 1,5 fois quand la souris le survole : ☐ zoom-in ☐ transform ☐ scale
2. Que devient l’aspect des points si l’on remplace, en ①, 50% par 5px ?
3. Quelle différence y a-t-il entre display : none et visibility : hidden ?