Les styles CSS (2/3) <Retour

En répondant à ces 25 questions, vous pourrez apprécier partiellement l'étendue de vos connaissances liées à l'utilisation des styles CSS (Cascading Style Sheets).


Cliquez sur le bouton Vérifier pour contrôler votre réponse à la question courante.

Votre résultat global apparaîtra quand vous aurez répondu à la dernière question.
Pour clôturer le test : cliquez sur le bouton Vérifier de la question 25.

Cliquez sur le bouton ? pour obtenir des informations complémentaires. Pour masquer les informations, cliquez dessus.

Durée du test : 12 minutes - Auteur

 

1 - Pour centrer un paragraphe latéralement dans son conteneur, je peux utiliser la ligne suivante dans la déclaration de p :

margin:top;
margin:center;
margin: 0 auto; 

 

2 - La règle suivante

div {
   float:left;
   width:100px;
   height:100px;
   border:1px solid gray;
}

définit tous les div

en mode absolu, à gauche
comme flottants, à gauche
dans le flux et à gauche 

 

3 - La règle suivante 

div {
   width:200px;
   height:200px;
   border:1px solid gray;
}

signifie (sans tenir compte de margin et de padding) que :

tous les blocs div auront une taille de 200x200 pixels
tous les blocs div auront une taille de 200x0 pixels
le premier div de son conteneur aura une taille de 200x200 pixels

 

4 - Pour la règle suivante 

h1,h2,h3 {
   font-family:tahoma,verdana,sans-serif;
}

 h1 seulement utilisera la police tahoma
 h2 utilisera la police verdana
 h1, h2 et h3 utiliseront la police tahoma

 

5 - Lors d'un positionnement en mode absolu, le point (0,0) se situe dans le coin :

inférieur droit du conteneur
supérieur droit du conteneur
supérieur gauche du conteneur

 

6 - En mode absolu, pour placer un bloc div (de classe contenu) à 100 px  du bord gauche du conteneur, j'utilise la déclaration suivante :

right:100px;
top:100px;
left:100px;

 

7 - Soit la règle suivante  :

p:first-line {
   color:green;
}

signifie : "la couleur..."

 du texte de tous les paragraphes sera le vert
 du premier mot de tous les paragraphes sera le vert
 de la première ligne de tous les paragraphes sera le vert

 

8 -  Si je déclare la taille de la police au niveau de body, on peut affirmer que :

cela ne sert à rien
tous les éléments textuels utiliseront la même taille, sauf si une autre règle change cette taille
tous les éléments textuels utiliseront la même taille

 

9 - Je souhaite placer des paragraphes dimensionnés côte à côte. Je peux utiliser la ligne suivante dans la déclaration de p :

display:inline-block;
display:flex;
display:inline;

 

10 - La règle suivante : 

h1+p {
   font-family:verdana;
   font-size:18px;
}

définit les propriétés pour :

tous les paragraphes qui suivent h1
le premier paragraphe
le premier paragraphe qui suit directement h1

 

11 - L'écriture : 

a:visited {
   color:green;
}


affiche en vert les liens :

 non visités
 survolés
 visités

 

12 - La règle suivante 

div>p {
   color:red;
}

  affiche en rouge :

 le premier paragraphe du conteneur
 le premier paragraphe de div
 tous les paragraphes "enfants directs" de div

 

13 - La règle suivante 

tr:hover {
   background-color:beige;
}


attribue la couleur beige à

 la cellule survolée d'un tableau
 la ligne survolée d'un tableau
 toutes les lignes d'un tableau

 

14 -  La règle suivante :

div.info {
   width: 200px;
   height: 100px;
   background-color:gray;
   -ms-transform: rotate(-2deg); /* IE 9 */
   -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
   transform: rotate(-2deg);
}

permet de déclarer d'appliquer :

 une translation vers la droite
 une rotation dans le sens des aiguilles d'une montre
 une rotation dans le sens inverse des aiguilles d'une montre

 

15 -  La règle suivante :

p:last-child {
   color:red;
}


affiche en rouge :

tous les paragraphes
le dernier paragraphe de la page
le dernier paragraphe du conteneur du paragraphe

 

16 -  Sur base des informations suivantes, quelle sera la taille des caractères du mot petit sachant que la taille initiale vaut 16 px :

Styles CSS
span {
   font-size:0.8em;
}


Code html
  
<p> Un <span>petit</span> exemple </p>

16px 
13px
24px

 

17 - La règle suivante :

td:first-child {
   width:60%; 
}


définit la largeur

de la dernière colonne à 60% de la largeur d'un tableau
de la première colonne d'un tableau à 60% de la taille du tableau
du tableau à 60% de son conteneur 

 

18 - La déclaration suivante :

#menu ul li {
   display:inline;
}

affiche les éléments :

de toutes les listes verticalement  
de toutes les listes horizontalement 
de la liste d'id menu horizontalement

 

19 - La règle suivante :

#logo {
   position:absolute;
   top:10px;
   left:10px;
}

place l'élément:

 de classe logo.
 de classe logo en mode absolu.
 d'identifiant logo en mode absolu.

 

20 - Dans les deux déclarations suivantes, on demande d'identifier les lignes inutiles  :

a {
   font-family:verdana;
   font-size:18px;
   color:red;
}

a:hover {
   font-family:verdana;
   font-size:18px;
   color:green;
}

la déclaration de a
dans a:hover, la déclaration de la police et de sa taille, car a:hover hérite de ces propriétés
dans a:hover, la déclaration de la police et de sa taille

 

21 - La règle suivante :

li a {
   color:green;
   text-decoration:none;
   border-bottom:1px dotted green;
}

définit les propriétés de la balise :

a contenue dans la balise li
li
a

 

22 - La règle suivante :

p { 
   width:200px; 
   height:50px; 
   line-height:50px;
 }

positionne le texte :

en haut du bloc
en bas du bloc
au centre (verticalement) du bloc

 

23 - La règle suivante :

td.remarque {
   padding:5px;

définit des marges intérieures pour :

toutes les cellules de tous les tableaux.
les cellules de la classe remarque de tous les tableaux.
 les cellules du tableau remarque.

 

24 - La règle suivante :

caption {
   caption-side:bottom;
}


définit une :

bordure inférieure.
légende en dessous du tableau et alignée à gauche.
légende en dessous du tableau et centrée sur la largeur du tableau.

 

25 - La règle suivante :

div {
   max-width:450px;
   height:200px;
}


définit un bloc div dont la largeur :

 ne s'adaptera pas en fonction de la taille de l'écran
 s'adaptera en fonction de la taille de l'écran
 sera de 450 px, quelle que soit la taille de l'écran