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

A
La règle grid-template-columns: repeat(3, 1fr); crée une grille de trois colonnes de taille égale, où 1fr représente une fraction de l’espace disponible.

 

 

2. Quel est le rôle de l’attribut rel="noopener noreferrer" dans un lien <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

B
L’attribut rel="noopener noreferrer" est utilisé pour sécuriser les liens qui ouvrent une nouvelle fenêtre (target="_blank") en empêchant la page liée d’accéder à la page d’origine via JavaScript.

 

 

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;

A
La propriété text-overflow: ellipsis; permet de couper le texte lorsqu’il déborde d’un conteneur et de remplacer la fin par des points de suspension (…). Cela fonctionne avec overflow: hidden; et white-space: nowrap;. Voir un exemple complet.

 

 

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

A
rem (root em) est relatif à la taille de police de l’élément racine (html), tandis que em est relatif à la taille de police de l’élément parent immédiat.

 

 
 

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%);

C
En utilisant display: flex, justify-content: center centre l’élément horizontalement, et align-items: center le centre verticalement. Cette approche est très populaire dans la mise en page moderne.

 

 

6. Que fait la propriété CSS 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

A
box-sizing: border-box; change la manière dont la largeur et la hauteur des éléments sont calculées, en incluant le padding et la bordure dans les dimensions spécifiées.

 

 

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

A
grid-template-rows: auto 1fr auto; définit trois lignes : la première et la dernière ont une hauteur automatique, tandis que la ligne du milieu occupe tout l’espace restant (1fr).

 

 

8. Quel est l’effet de la propriété 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

B
white-space: nowrap; empêche le texte de se casser en plusieurs lignes, forçant le texte à rester sur une seule ligne, ce qui peut entraîner un débordement si l’espace est insuffisant.

 

 
 

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;

A
La syntaxe correcte pour un dégradé circulaire (radial) est background-image: radial-gradient(circle, red, yellow);. Cela crée un dégradé en forme de cercle avec un début rouge et une fin jaune. Voir un exemple complet.

 

 

10. Que fait la propriété 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

A
clip-path: circle(50%); permet de découper un élément en une forme circulaire en masquant les parties qui dépassent de ce cercle. L’élément devient donc visible uniquement dans cette forme.

 

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *