Quiz du cours « Initiation au CSS3 »

11 questions à choix unique pour vérifier que le parcours est acquis. Une seule tentative de réponse par question, correction immédiate.

80 % de bonnes réponses sont nécessaires pour valider le cours. Vous pouvez repasser le quiz autant de fois que nécessaire : seul votre meilleur score est conservé.

Quelle règle CSS sélectionne les éléments de classe carte qui se trouvent à l’intérieur d’un élément main ?

.main carte main, .carte main .carte main#carte

Un élément correspond à deux règles CSS qui définissent color. La première utilise un sélecteur de type et la seconde un sélecteur de classe, sans différence d’origine ni de priorité. Quelle couleur s’applique ?

Celle de la règle avec le sélecteur de classe Celle de la règle écrite en premier Les deux couleurs se mélangent Celle de la règle avec le sélecteur de type

Quelle syntaxe définit une variable CSS dans :root puis l’utilise pour la couleur du texte ?

:root { color-principale: #234; } p { color: variable(color-principale); } :root { --couleur-principale: #234; } p { color: --couleur-principale; } :root { $couleur-principale: #234; } p { color: var($couleur-principale); } :root { --couleur-principale: #234; } p { color: var(--couleur-principale); }

Un élément a une largeur de contenu de 200 px, un remplissage horizontal de 10 px de chaque côté et une bordure de 2 px de chaque côté. Avec box-sizing: content-box, quelle est sa largeur totale, hors marges ?

200 px 224 px 220 px 244 px

Un bloc contient du texte qui dépasse de sa zone. Quelle déclaration masque la partie qui déborde ?

overflow: hidden; display: inline; border-radius: hidden; overflow: visible;

Dans un conteneur Flexbox en disposition par défaut (flex-direction: row), quelle propriété répartit les éléments le long de l’axe principal ?

align-items gap justify-content grid-template-columns

Quelle déclaration crée une grille de trois colonnes de largeur égale ?

display: grid; grid-template-columns: 3; display: grid; grid-template-rows: repeat(3, 1fr); display: flex; grid-template-columns: repeat(3, 1fr); display: grid; grid-template-columns: repeat(3, 1fr);

Une mise en page est conçue pour les petits écrans, et une rangée de cartes doit apparaître à partir de 700 px de largeur. Quelle règle correspond à cette approche mobile-first ?

@media (min-width: 700px) { /* styles de la rangée */ } @media (max-width: 700px) { /* styles de la rangée */ } @media (width: 700px) { /* styles de la rangée */ } @media screen { /* styles appliqués seulement à partir de 700 px */ }

Quel état CSS s’applique à un lien lorsqu’il est activé, par exemple pendant l’appui de la souris ?

:focus :active :hover :visited

Dans les outils de développement du navigateur, quelle action aide à comprendre pourquoi une couleur inattendue est appliquée à un élément ?

Consulter uniquement le code source HTML de la page Désactiver JavaScript jusqu’à ce que la couleur change Inspecter l’élément et examiner les règles CSS calculées Renommer la classe de l’élément sans vérifier les règles

Une petite taille de texte gris sur un fond gris rend une page difficile à lire. Quelle correction répond directement au problème de contraste et de lisibilité ?

Remplacer la police par une autre sans modifier les couleurs Augmenter le contraste entre le texte et l’arrière-plan et choisir une taille de texte lisible Supprimer les espaces entre les lignes pour réduire la hauteur de la page Retirer les indicateurs de focus pour simplifier la présentation

Toutes les questions doivent être répondues.