QCM HTML / CSS – Partie 41

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. Que fait le code suivant en CSS ?

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

A Crée une grille avec trois colonnes égales

B Crée une grille avec trois colonnes de tailles variables

C Crée une grille avec une seule colonne

D Crée une grille avec deux colonnes

Réponse  

2. Quel est le rôle de l’attribut

rel="noopener noreferrer"

rel="noopener noreferrer" dans un lien

<a>

<a> ?

A Il empêche le lien de s’ouvrir dans une nouvelle fenêtre

B Il améliore la sécurité en évitant que la page liée puisse accéder à la page d’origine

C Il force le lien à ne pas être cliquable

D Il ajoute un style personnalisé au lien

Réponse  

3. Comment peut-on faire en sorte qu’un texte soit coupé et remplacé par des points de suspension lorsque l’espace est insuffisant ?

A

text-overflow: ellipsis;

B

text-clamp: ellipsis;

C

overflow-text: ellipsis;

D

clipping-text: ellipsis;

Réponse  

4. Quelle est la différence entre ‘rem’ et ’em’ en CSS ?

A rem est relatif à la taille de la fenêtre, em est relatif à la taille du texte du parent immédiat

B rem est relatif à la taille du texte du parent immédiat, em est relatif à la taille de la fenêtre

C rem est une unité fixe, em est une unité relative à la taille de police par défaut

D Aucune différence, elles sont identiques

Réponse  
 

5. Quelle méthode CSS est utilisée pour centrer un élément à la fois horizontalement et verticalement dans un conteneur ?

A

center: both;

B

text-align: center; vertical-align: middle;

C

display: flex; justify-content: center; align-items: center;

D

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

Réponse  

6. Que fait la propriété CSS

box-sizing: border-box;

box-sizing: border-box; ?

A Modifie la taille des éléments en incluant la bordure et le padding dans la largeur et la hauteur totales

B Modifie la couleur de la bordure des éléments

C Applique un fond coloré aux éléments

D Redimensionne la boîte de contenu sans affecter le texte

Réponse  

7. Que fait la règle suivante en CSS ?

#header {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

A Crée une grille de trois lignes avec des hauteurs variables, où la première et la dernière sont ajustées automatiquement et la seconde occupe l’espace restant

B Crée une grille avec une seule ligne

C Crée une grille à deux lignes, la deuxième étant plus grande

D Crée un conteneur de grille sans lignes

Réponse  

8. Quel est l’effet de la propriété

white-space: nowrap;

white-space: nowrap; en CSS ?

A Elle force le texte à s’afficher sur plusieurs lignes

B Elle empêche les lignes de texte de se casser, forçant tout le texte à s’afficher sur une seule ligne

C Elle aligne le texte à gauche

D Elle empêche les éléments de se redimensionner

Réponse  
 

9. Quelle propriété CSS permet de créer un effet de dégradé circulaire (radial) sur un élément ?

A

background-image: radial-gradient(circle, red, yellow);

B

background: radial-gradient(circle, red, yellow);

C

background-image: gradient-radial(red, yellow);

D

background-color: radial-gradient;

Réponse  

10. Que fait la propriété

clip-path: circle(50%);

clip-path: circle(50%); ?

A Masque une partie de l’élément avec une forme circulaire

B Découpe l’élément en deux parties égales

C Crée une bordure circulaire autour de l’élément

D Applique une ombre portée circulaire à l’élément

Réponse