QCM HTML / CSS – Partie 40

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. Si tu veux qu’un élément <div> occupe 50% de la largeur de son conteneur parent, quelle propriété CSS utiliseras-tu ?

A width: 50%;

B height: 50%;

C max-width: 50%;

D size: 50%;

A
La propriété width permet de définir la largeur d’un élément. En spécifiant 50%, tu fais en sorte que l’élément occupe la moitié de la largeur de son parent.

 

 

2. Que fait la propriété CSS float: right; ?

A Déplace un élément vers la droite et le fait flotter au-dessus des autres éléments

B Déplace un élément vers la gauche et le fait flotter

C Déplace un élément vers la droite sans le faire flotter

D Déplace un élément vers la droite et empêche les autres éléments de le toucher

A
La propriété float permet de déplacer un élément à gauche ou à droite. Lorsqu’on utilise float: right;, l’élément flotte à droite et les autres éléments peuvent s’adapter autour de lui.

 

 

3. Quelle propriété CSS permet de créer une bordure autour d’un élément avec des coins arrondis ?

A rounded-border

B border-style

C corner-radius

D border-radius

D
La propriété border-radius permet d’ajouter des coins arrondis à un élément. Par exemple: border-radius: 10px;.

 

 
 

4. Que fait le code suivant en CSS ?
#box {
  margin: auto;
  width: 50%;
}

A Centre l’élément horizontalement

B Centrage vertical de l’élément

C Applique une largeur de 50% sans changer la position

D Centre l’élément verticalement et horizontalement

A
Le margin: auto; centre un élément horizontalement dans son conteneur si sa largeur est définie, comme ici à 50%. La position verticale n’est pas affectée par cette règle.

 

 

5. Quel est l’effet de la règle CSS suivante ?
#box {
  position: absolute;
  top: 20px;
  left: 50px;
}

A Positionne l’élément relativement à son parent immédiat

B Positionne l’élément de manière fixe à partir du coin supérieur gauche de la fenêtre

C Positionne l’élément à 20px du haut et 50px de la gauche de la page

D Crée un effet de flottement en haut à gauche

C
position: absolute; positionne un élément par rapport à son conteneur le plus proche qui a une position définie, sinon par rapport à la page. Les propriétés top et left spécifient la position.

 

 

6. Que fait le code suivant ?
#button:hover {
  background-color: green;
  color: white;
  cursor: pointer;
  transform: scale(1.2);
}

A Change la couleur du texte au survol

B Modifie la taille du bouton au survol

C Change la couleur du fond et du texte tout en augmentant la taille au survol

D Modifie la couleur du bouton en vert sans effet de survol

C
La règle :hover applique des changements de style au survol de l’élément. Ici, la couleur de fond devient verte, la couleur du texte devient blanche, et l’élément prend 1,2 fois sa taille initiale grâce à transform: scale(1.2).

 

 
 

7. Quelle propriété CSS permet d’ajouter un effet de flou à l’arrière-plan d’un élément ?

A background-blur

B filter: blur;

C backdrop-filter: blur;

D blur-effect: true;

C
La propriété backdrop-filter permet d’appliquer des effets graphiques, comme le flou, à l’arrière-plan d’un élément, tout en préservant son contenu. Par exemple: backdrop-filter: blur(10px);.

 

 

8. Si tu veux faire en sorte qu’une image prenne la totalité de la largeur de l’écran tout en conservant son rapport d’aspect, quelle règle CSS utiliserais-tu ?

A width: 100%; height: auto;

B width: auto; height: 100%;

C max-width: 100%;

D height: 100%; width: auto;

A
width: 100% garantit que l’image occupe toute la largeur disponible, tandis que height: auto; permet à l’image de conserver son rapport d’aspect.

 

 

9. Quelle est la différence principale entre position: relative; et position: absolute; ?

A relative place l’élément en bas de son conteneur, absolute le place par rapport à la fenêtre

B relative place l’élément par rapport à sa position d’origine, absolute le place par rapport à son premier parent positionné

C Les deux font la même chose mais absolute est plus rapide

D relative positionne un élément au-dessus des autres, absolute le cache derrière

B
position: relative; déplace un élément par rapport à sa position d’origine. position: absolute; place un élément par rapport au parent le plus proche qui a une position autre que static.

 

 
 

10. Que fait la propriété CSS clamp() ?

A Elle définit une taille qui varie en fonction de la taille de l’écran, mais avec une valeur minimale et maximale.

B Elle applique un flou à un élément selon un intervalle de taille.

C Elle permet de définir un effet de transformation dynamique sur un élément.

D Elle clipe le contenu de l’élément pour l’adapter à la taille du parent.

A
clamp() est une fonction CSS qui permet de définir une valeur qui se situe entre un minimum et un maximum. Par exemple, clamp(200px, 10vw, 400px); permet de définir une taille qui sera de 200px à 400px, en fonction de la largeur de la fenêtre.

 

 

Laisser un commentaire

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