QCM HTML / CSS – Partie 44

mars 1, 2025mars 1, 2025 Thomas Aucun commentaire

Questions pratiques pour testez vos connaissances sur le langage HTML à savoir l’utilisation du code HTML, structurer une page web en HTML, organiser les éléments d’une page Web, etc. Testez votre connaissance et travaillez sur les questions que vous trompez le plus souvent.

1. Quel effet produit la propriété CSS `backdrop-filter: blur(5px);` ?

A Floute l’arrière-plan derrière un élément

B Ajoute une ombre portée floue

C Crée un fond dégradé flou

D Floute le texte d’un élément

backdrop-filter: blur(5px); applique un effet de flou à l’arrière-plan de l’élément, affectant ce qui se trouve derrière lui, tout en conservant l’élément lui-même net.

2. Quelle propriété CSS te permet de faire en sorte que le texte dans un élément s’adapte à sa taille sans déborder ?

A word-wrap: break-word;

B white-space: nowrap;

C text-overflow: ellipsis;

D overflow-wrap: break-word;

overflow-wrap: break-word; permet de forcer le texte à se casser et s’adapter à l’intérieur d’un élément, empêchant ainsi le texte de déborder.

3. Quelle propriété CSS permet de créer un effet de texte en surbrillance (highlight) lors du survol ?

A background-color: yellow; color: black;

B color: yellow; background-color: black;

C text-decoration: underline; background-color: yellow;

D text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); color: #ff6347;

text-decoration: underline et background-color: yellow créent un effet de surbrillance typique où le texte est souligné et le fond devient jaune, parfait pour un effet de survol. Voir un exemple complet.

4. Quel effet donne `@keyframes swing` qui déplace un élément de 0 à 20 degrés et le fait revenir à 0 ?

A Un mouvement de balancier

B Une translation verticale

C Un mouvement circulaire

D Un effet de zoom

L’animation définie par @keyframes swing crée un effet où un élément bascule de gauche à droite, similairement à un balancier, ce qui crée un effet dynamique et animé. Voir un exemple complet.

5. Quelle propriété CSS peut être utilisée pour créer un effet de texte en 3D ?

A text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

B transform: perspective(500px) rotateX(10deg);

C font-weight: bold; text-transform: uppercase;

D box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);

La propriété transform: perspective associée à rotateX() permet de donner un effet tridimensionnel au texte, ce qui le fait apparaître comme s’il avait de la profondeur.

6. Quel effet produit la propriété border-image en CSS ?

A Elle applique une image comme bordure autour d’un élément.

B Elle définit une bordure d’une couleur spécifique.

C Elle ajoute une bordure en dégradé autour d’un élément.

D Elle crée une bordure animée qui change de couleur.

border-image permet d’appliquer une image comme bordure à un élément, en définissant la source de l’image et la manière dont elle est découpée pour s’adapter aux bords de l’élément.

7. Quel modèle de mise en page CSS permet de disposer des éléments dans une grille à deux dimensions ?

A Flexbox

B Grid

C Block

D Inline

CSS Grid Layout est un modèle de mise en page en deux dimensions qui permet de positionner des éléments en lignes et en colonnes. Flexbox, quant à lui, est un modèle à une seule dimension (lignes ou colonnes). Les autres options ne sont pas des modèles de mise en page, mais des comportements d’affichage.

8. Où est-il préférable de placer un fichier JavaScript dans un document HTML pour qu’il n’affecte pas le rendu de la page ?

A Dans la section <head>

B Avant la balise </body>

C Au début de la balise <body>

D Dans la section <footer>

Il est recommandé de placer les scripts JavaScript avant la balise </body> pour que le HTML soit déjà chargé avant l’exécution du script, ce qui améliore les performances de la page. Placer un script dans <head> peut ralentir le rendu de la page.

9. Quelle propriété CSS permet de définir l’épaisseur de la bordure d’un élément ?

A border-width

B border-thickness

C border-style

D border-size

La propriété border-width permet de définir l’épaisseur de la bordure d’un élément. Les autres options ne sont pas valides: border-thickness, border-style et border-size n’existent pas.

10. Quel sélecteur CSS permet de cibler tous les éléments <p> qui suivent un élément <div>, peu importe s’ils sont directement après ou non ?

A div + p

B div ~ p

C div > p

D div p

Le sélecteur div ~ p sélectionne tous les éléments <p> qui sont des frères (au même niveau) d’un élément <div>, peu importe s’ils sont immédiatement après le <div> ou s’il y a d’autres éléments entre les deux. Par contre, div + p ne sélectionne que le premier <p> directement après un <div>, et div > p cible uniquement les enfants directs <p> du <div>.

QCMs qui pourraient vous intéresser :

1. Quel effet produit la propriété CSS backdrop-filter: blur(5px); ?

2. Quelle propriété CSS te permet de faire en sorte que le texte dans un élément s’adapte à sa taille sans déborder ?

3. Quelle propriété CSS permet de créer un effet de texte en surbrillance (highlight) lors du survol ?

4. Quel effet donne @keyframes swing qui déplace un élément de 0 à 20 degrés et le fait revenir à 0 ?

5. Quelle propriété CSS peut être utilisée pour créer un effet de texte en 3D ?

6. Quel effet produit la propriété border-image en CSS ?

7. Quel modèle de mise en page CSS permet de disposer des éléments dans une grille à deux dimensions ?

8. Où est-il préférable de placer un fichier JavaScript dans un document HTML pour qu’il n’affecte pas le rendu de la page ?

9. Quelle propriété CSS permet de définir l’épaisseur de la bordure d’un élément ?

10. Quel sélecteur CSS permet de cibler tous les éléments <p> qui suivent un élément <div>, peu importe s’ils sont directement après ou non ?

Vous pourrez aussi aimer

QCM HTML / CSS – Partie 54

QCM HTML / CSS – Partie 10

QCM HTML / CSS – Partie 17

Laisser un commentaire Annuler la réponse

1. Quel effet produit la propriété CSS `backdrop-filter: blur(5px);` ?

4. Quel effet donne `@keyframes swing` qui déplace un élément de 0 à 20 degrés et le fait revenir à 0 ?