Les styles CSS (3/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 div (largeur de 400px) latéralement dans body, je peux utiliser la déclaration suivante :

margin:0 auto;
margin:auto 0;
padding:10px;

 

2 - Pour éviter l'influence de padding et de border sur les dimensions d'un div, je peux utiliser la déclaration suivante :

border:no-padding;
box-sizing:border-box;
box-sizing:100%;

 

3 - La règle suivante :

img {
   display:block;
   margin:0 auto;
}

permet de centrer les images :

verticalement
horizontalement
verticalement et horizontalement 

 

4 -Grâce à la règle suivante : 

h1+p{
   font-family:tahoma;
   color:gray;
}

tous les paragraphes s'écriront en gris.
chaque paragraphe qui suit directement une balise h1 s'écrira en gris.
tous les titres h1 qui précèdent un p s'écriront en gris.

 

5 - Grâce à la règle suivante :

p+p{
   font-family:calibri;
   color:green;
}

tous les paragraphes s'afficheront en vert.
tous les paragraphes frères d'une liste de paragraphes s'afficheront en vert.
tous les paragraphes, sauf le dernier, s'afficheront en vert.

 

6 - Soit le sélecteur main>nav. Il influencera un élément nav :

quelconque, mais contenu dans main
quelconque
enfant direct de main

 

7 - Pour définir un conteneur en mode Flex, j'utilise l'écriture suivante :

flex:true;
flex-mode:true;
display:flex;

 

8 -  Un div est déclaré en mode Flex. La ligne suivante flex-direction: row; figure dans la règle du div. Que signifie cette ligne ? Afficher le contenu du div :

 verticalement
 sur une ligne horizontale
 dans un coin

 

9 - Soit un div de classe .flex (défini en mode flex). Que signifie la ligne de la règle suivante dans ce contexte ?

.flex > div:nth-child(1){
    background : #009246;
}

Définir la couleur...

 du fond du div de classe .flex
 du fond du premier div contenu dans le div .flex
 des bordures du div de la classe .flex

 

10 - Soit la règle suivante : 

div {
   text-align:center;
   width:600px;
}

Cette règle :

permet de centrer horizontalement un div quelconque dans son conteneur
permet de centrer un div situé uniquement dans body
ne centre pas les div horizontalement 

 

11 - Soit la règle suivante :

img {
   display:block;
   margin:0 auto;
}

L'utilisateur souhaite que l'image soit centrée latéralement dans son conteneur. La ligne display:block; est indispensable, car une image est : 

 du type inline
 flottante par défaut
 du type block

 

12 - Soit la déclaration suivante : 

ul>li:nth-child(3){
   color:red;
}

Une séquence de quatre listes à puces existe dans le code html. La règle CSS permet d'afficher en rouge :

 la troisième puce et le texte associé pour les quatre listes à puces
 les trois premières puces
 la troisième puce et le texte de la première liste à puces

 

13 - Le sélecteur div+p permet d'attribuer un style :

 à un paragraphe quelconque d'un div
 au paragraphe qui suit directement le div
 aux paragraphes situés après le div

 

14 -  Quel sélecteur faut-il utiliser pour attribuer un style à tous les paragraphes enfants directs d'un div ?

 div=p
 div::p
 div>p

 

15 -  Soit la règle suivante :

#global { 
   display: flex;
   justify-content: space-between;
}

Trois div sont stockés dans le div d'id global. Les blocs internes seront disposés de la manière suivante : 

 les trois div seront côte à côte et centrés latéralement dans le div principal
 un div cadré à gauche, un espace E, le second div, un espace E, un div à droite
 les trois div seront côte à côte et à droite du div principal

 

16 -  Soit un div composé de 6 paragraphes. Nous disposons de la règle suivante.

div p:nth-child(2n+1)
   color:red;
}

Quels sont les paragraphes qui s'afficheront en rouge ?

tous  
les paragraphes 1, 3 et 5 
les paragraphes 2, 4 et 6

 

17 - Sur base des informations suivantes, quelle sera la couleur du mot jeudi ?

Style CSS

li:last-child{
   color:red;
}

Code HTML

<ul class="demo">
<li>Lundi</li>
<li>Mardi</li>
<li>Mercredi</li>
<li>Jeudi</li>
</ul>

 impossible à définir
 noir
 rouge

 

18 - La première ligne de la règle suivante :

div {
   max-width:500px;
   height:400px;
   border:1px solid gray;
}

permet d'afficher :

le div complet, même si la taille de la fenêtre est inférieure à 500px.
le div partiellement, même si la taille de la fenêtre est inférieure à 500px.
le div correctement.

 

19 - La déclaration suivante :

p:last-of-type{
   color:red;
   font-family:calibri;
   font-size:17px;
}

permet de cibler :

 tous les paragraphes d'un conteneur quelconque
 le dernier paragraphe de chaque élément parent
 le dernier paragraphe de body, quel que soit le contenu de body

 

20 - Un div utilise la classe un et un autre div utilise la classe deux. Les règles sont les suivantes :

.un, .deux{
   background: gray;
   width: 300px;
   height: 150px;
   padding: 20px;
   border: 5px solid black;
   margin: 20px auto;
}
.deux {
   box-sizing: border-box;
}

Quelle est la largeur effective (réelle) de la boîte de classe un ?

 300px
 340px
 350px

 

21 - Soit un div de classe info. Sur base de la règle suivante, quelle est la largeur effective (réelle) du div ?

 .info{
   background: gray;
   width: 200px;
   height: 150px;
   padding: 20px;
   border: 5px solid black;
   box-sizing: border-box;
}

200px  
240px 
250px 

 

22 - Dans un formulaire, pour modifier le style des intitulés de chaque champ, je dois influencer la balise suivante :

form
label
input

 

23 - Soit la règle suivante :

input[type=submit], input[type=reset] {
   width:100px;
   margin-left:5px;
   box-shadow:1px 1px 1px green;
   cursor:pointer;
}

Elle permet d'afficher le pointeur de la souris sous la forme d'une :

flèche lors du survol d'une case d'option
main avec l'index tendu lors du survol du bouton Envoyer (uniquement)
 main avec l'index tendu lors du survol du bouton Envoyer ou du bouton Annuler

 

24 - Dans un formulaire, pour influencer le style de l'encadrement d'un ensemble de champs, on utilise la balise suivante :

 form
 legend
 fieldset

 

25 - La règle suivante :

input:required {
   border:1px solid red;
}

indique que toutes les zones de texte :

s'afficheront avec des bordures rouges.
, avec l'attribut required, s'afficheront avec des bordures rouges si aucune donnée n'est saisie.
non validées s'afficheront avec des bordures rouges.