QCM : Pseudo-classes et mises en page CSS (11 questions)

Question 1

1. Pour que le style de survol puisse l’emporter sur les styles précédents d’un lien à spécificité égale, dans quel ordre faut-il écrire les pseudo-classes ?

:hover, :active, :link, :visited

:link, :hover, :visited, :active

:visited, :link, :active, :hover

:link, :visited, :hover, :active

Explication

L’ordre recommandé est :link, :visited, :hover, puis :active, car à spécificité égale la dernière règle l’emporte. Placer :visited après :hover peut empêcher la règle de survol de prévaloir.

Answer

:link, :visited, :hover, :active

Question 2

2. Quel état CSS correspond à un élément qui reçoit le focus, par exemple lorsqu’on y accède au clavier ?

L’état ciblé par :focus

L’état ciblé par :active

L’état ciblé par :hover

L’état ciblé par :visited

Explication

La pseudo-classe :focus correspond à un élément qui reçoit le focus. :hover désigne un élément survolé par la souris, et non un élément focalisé.

Answer

L’état ciblé par :focus

Question 3

3. Quelle déclaration est nécessaire pour que ::after génère son contenu, même si aucun caractère visible n’est ajouté ?

after: content;

content: "";

text: "";

display: "";

Explication

::after nécessite la propriété content, à laquelle on peut attribuer une chaîne vide pour générer le pseudo-élément sans texte visible. La propriété display ne remplace pas content pour cette fonction.

Answer

content: "";

Question 4

4. Quelle syntaxe permet de créer une partie décorative avant le contenu d’un élément avec un pseudo-élément ?

::before, avec deux deux-points

:before, avec deux deux-points

:before, avec un deux-points

before::, avec deux deux-points après le nom

Explication

Le pseudo-élément s’écrit ::before, avec deux deux-points, et permet de créer ou cibler une partie de l’élément. La forme :before n’emploie qu’un deux-points et ne respecte pas la syntaxe demandée ici.

Answer

::before, avec deux deux-points

Question 5

5. Que désigne l’axe secondaire dans un conteneur Flexbox ?

L’axe qui suit la ligne ou la colonne choisie comme direction principale

L’axe perpendiculaire à l’axe principal, dont l’orientation dépend de flex-direction

L’axe qui détermine l’ordre visuel des éléments avec row-reverse ou column-reverse

L’axe défini par l’espace entre les éléments grâce à la propriété gap

Explication

L’axe secondaire est perpendiculaire à l’axe principal, et leur orientation s’inverse lorsque flex-direction passe de row à column. La direction row ou column décrit l’axe principal, pas l’axe secondaire.

Answer

L’axe perpendiculaire à l’axe principal, dont l’orientation dépend de flex-direction

Question 6

6. Dans une rangée flex, que se passe-t-il lorsque le conteneur utilise `flex-wrap: wrap` et que les éléments ne tiennent plus sur la ligne ?

Les éléments qui débordent passent sur une nouvelle ligne.

Les éléments restent sur la ligne en se tassant davantage.

Les éléments qui débordent sont réduits à une largeur nulle.

Les éléments qui débordent sont alignés sur l’axe secondaire.

Explication

Avec `flex-wrap: wrap`, les éléments qui ne tiennent plus sur la ligne passent à la suivante. Avec la valeur par défaut `nowrap`, ils restent sur une seule ligne et se tassent.

Answer

Les éléments qui débordent passent sur une nouvelle ligne.

Question 7

7. Quel est le rôle de l’unité $\text{fr}$ dans le dimensionnement des pistes d’une grille CSS ?

Elle adapte une piste à la hauteur du contenu qu’elle contient.

Elle représente une part de l’espace restant dans la grille.

Elle fixe une dimension en pixels pour une piste de la grille.

Elle définit l’espace entre les lignes et les colonnes de la grille.

Explication

L’unité $\text{fr}$ répartit l’espace restant entre les pistes de la grille. À la différence de $\text{px}$ , elle ne fixe pas une dimension absolue.

Answer

Elle représente une part de l’espace restant dans la grille.

Question 8

8. Quelle différence caractérise le placement des éléments avec Flexbox par rapport à Grid ?

Flexbox laisse le contenu guider le placement sur une ligne ou une colonne, tandis que Grid s’appuie sur une grille de lignes et de colonnes.

Flexbox et Grid laissent tous deux la grille décider du placement, mais Flexbox organise les éléments sur un seul axe.

Flexbox place les éléments dans des lignes et des colonnes définies, tandis que Grid les répartit selon le contenu sur un axe.

Flexbox et Grid laissent tous deux le contenu décider du placement, mais Grid ajoute des espaces entre les éléments.

Explication

Flexbox organise les éléments sur une ligne ou une colonne en laissant le contenu guider leur placement, alors que Grid les agence selon des lignes et des colonnes définies par la grille. L’idée que Flexbox organise lui aussi les éléments dans des lignes et des colonnes confond sa mise en page sur un axe avec la structure bidimensionnelle de Grid.

Answer

Flexbox laisse le contenu guider le placement sur une ligne ou une colonne, tandis que Grid s’appuie sur une grille de lignes et de colonnes.

Question 9

9. Une règle CSS `display: flex` est ajoutée aux cartes elles-mêmes plutôt qu’à leur conteneur parent. Quelle conséquence explique le fait que les cartes ne s’alignent pas comme éléments flex ?

Les cartes s’alignent, mais leur ordre est inversé puisque `display: flex` agit sur chaque élément.

Les cartes ne deviennent pas des éléments flex, car seuls les enfants directs du conteneur portant `display: flex` le sont.

Les cartes passent à la ligne, car `display: flex` active automatiquement `flex-wrap: wrap`.

Les cartes se centrent, mais `justify-content` est désactivé sur le conteneur parent.

Explication

Le mode flex doit être appliqué au conteneur parent pour que ses enfants directs deviennent des éléments flex. Appliquer cette propriété aux cartes ne les transforme pas en éléments flex du parent, contrairement à l’idée que cela inverse leur ordre.

Answer

Les cartes ne deviennent pas des éléments flex, car seuls les enfants directs du conteneur portant `display: flex` le sont.

Question 10

10. Pour que les utilisateurs au clavier repèrent aussi clairement l’élément actif que les utilisateurs à la souris repèrent l’élément survolé, quelle approche CSS faut-il appliquer ?

Appliquer un style à :nth-child(odd) et à :first-child.

Donner le même style aux états :active et :visited.

Donner le même style aux états :hover et :focus.

Remplacer le contour de :focus par outline: none sans autre indicateur.

Explication

Un style cohérent pour :hover et :focus rend la navigation clavier aussi visible que celle à la souris. Le style :active correspond à un élément en cours de clic et ne remplace pas l’indication de focus.

Answer

Donner le même style aux états :hover et :focus.

Question 11

11. Quelle propriété doit recevoir une chaîne vide pour qu’un pseudo-élément décoratif comme ::after soit généré sans afficher de texte ?

La propriété visibility, avec la valeur visible

La propriété display, avec la valeur block

La propriété position, avec la valeur relative

La propriété content, avec une valeur telle que ""

Explication

La propriété content est nécessaire à la génération de ::before et ::after, et une chaîne vide permet de créer un élément sans caractère visible. La propriété display peut régler son mode d’affichage, mais ne remplace pas la déclaration content requise.

Answer

La propriété content, avec une valeur telle que ""

QCM : Pseudo-classes et mises en page CSS (11 questions)

Questions et réponses du QCM

1. Pour que le style de survol puisse l’emporter sur les styles précédents d’un lien à spécificité égale, dans quel ordre faut-il écrire les pseudo-classes ?

2. Quel état CSS correspond à un élément qui reçoit le focus, par exemple lorsqu’on y accède au clavier ?

3. Quelle déclaration est nécessaire pour que ::after génère son contenu, même si aucun caractère visible n’est ajouté ?

4. Quelle syntaxe permet de créer une partie décorative avant le contenu d’un élément avec un pseudo-élément ?

5. Que désigne l’axe secondaire dans un conteneur Flexbox ?

6. Dans une rangée flex, que se passe-t-il lorsque le conteneur utilise `flex-wrap: wrap` et que les éléments ne tiennent plus sur la ligne ?

7. Quel est le rôle de l’unité $\text{fr}$ dans le dimensionnement des pistes d’une grille CSS ?

8. Quelle différence caractérise le placement des éléments avec Flexbox par rapport à Grid ?

9. Une règle CSS `display: flex` est ajoutée aux cartes elles-mêmes plutôt qu’à leur conteneur parent. Quelle conséquence explique le fait que les cartes ne s’alignent pas comme éléments flex ?

10. Pour que les utilisateurs au clavier repèrent aussi clairement l’élément actif que les utilisateurs à la souris repèrent l’élément survolé, quelle approche CSS faut-il appliquer ?

11. Quelle propriété doit recevoir une chaîne vide pour qu’un pseudo-élément décoratif comme ::after soit généré sans afficher de texte ?

Révisez avec les flashcards

Approfondir avec la fiche

Cours similaires

Composants matériels des PC

Création de pages web en HTML

Histoire et fonctionnement de Duplicati

Géolocalisation et identité numérique

Fondements des réseaux locaux

Fondements des réseaux Internet

Crée tes propres QCM

QCM : Pseudo-classes et mises en page CSS (11 questions)

Questions et réponses du QCM

1. Pour que le style de survol puisse l’emporter sur les styles précédents d’un lien à spécificité égale, dans quel ordre faut-il écrire les pseudo-classes ?

2. Quel état CSS correspond à un élément qui reçoit le focus, par exemple lorsqu’on y accède au clavier ?

3. Quelle déclaration est nécessaire pour que ::after génère son contenu, même si aucun caractère visible n’est ajouté ?

4. Quelle syntaxe permet de créer une partie décorative avant le contenu d’un élément avec un pseudo-élément ?

5. Que désigne l’axe secondaire dans un conteneur Flexbox ?

6. Dans une rangée flex, que se passe-t-il lorsque le conteneur utilise `flex-wrap: wrap` et que les éléments ne tiennent plus sur la ligne ?

7. Quel est le rôle de l’unité fr\text{fr}fr dans le dimensionnement des pistes d’une grille CSS ?

8. Quelle différence caractérise le placement des éléments avec Flexbox par rapport à Grid ?

9. Une règle CSS `display: flex` est ajoutée aux cartes elles-mêmes plutôt qu’à leur conteneur parent. Quelle conséquence explique le fait que les cartes ne s’alignent pas comme éléments flex ?

10. Pour que les utilisateurs au clavier repèrent aussi clairement l’élément actif que les utilisateurs à la souris repèrent l’élément survolé, quelle approche CSS faut-il appliquer ?

11. Quelle propriété doit recevoir une chaîne vide pour qu’un pseudo-élément décoratif comme ::after soit généré sans afficher de texte ?

Révisez avec les flashcards

Approfondir avec la fiche

Cours similaires

Composants matériels des PC

Création de pages web en HTML

Histoire et fonctionnement de Duplicati

Géolocalisation et identité numérique

Fondements des réseaux locaux

Fondements des réseaux Internet

Crée tes propres QCM

7. Quel est le rôle de l’unité $\text{fr}$ dans le dimensionnement des pistes d’une grille CSS ?