Nom : Prénom :
Evaluation Web Statique
18 / 11 / 2022
1h45 maximum
- Aucun document autorisé
- Répondre uniquement sur cette feuille d’évaluation
- Ne pas oublier de noter votre nom et prénom sur toutes les feuilles
Exercice 1 (20 points) :
Barème du QCM : Réponse correcte +1
Réponse erronée -0,25
Pas de réponse 0
Cochez la bonne réponse pour chaque question.
Question 1 : Quelle propriété gère les colonnes d’une grille ?
grid-template-columns
grid-explicit-columns
grid-column-areas
Question 2 : Quelle propriété permet de créer une grille ?
position
display
transform
Question 3 : Comment figer un bloc pour qu'il ne bouge pas même lors d'un défilement ?
position : fixed ;
position : noscroll ;
position : absolute ;
Question 4 : Où se placera un élément positionné en absolu (position: absolute) avec
left:100px ?
À 100px du bord gauche de la fenêtre du navigateur
À 100px du bord gauche de l'élément body;
À 100px du bord gauche de son élément parent;
À 100px du bord gauche de son plus proche ancêtre positionné
Question 5 : Le positionnement relatif (position: relative) ?
permet de positionner un élément par rapport à un autre élément, pris comme repère;
1
Nom : Prénom :
permet de positionner un élément par rapport aux limites de son élément parent
permet de décaler un élément A par rapport à sa position « normale », en flux
permet d'appliquer la théorie de la relativité générale ET la théorie de la relativité
restreinte à une mise en page
Question 6 : Si z-index vaut 1 pour le bloc A et 4 pour le bloc B, A et B sont superposés, alors
A apparait intégralement
B apparait intégralement
Question 7 : Après une image flottante à droite (float: right;), on place un titre h2. Comment
être sûr qu'il se placera en dessous de l'image flottante ?
img {clear: left;}
img {clear: right;}
h2 {clear: left;}
h2 {clear: right;}
Question 8 : Si j'écris a:active {color: red;} dans ma feuille de style, quels liens seront de
couleur rouge ?
les liens pointant vers la page en cours (par exemple dans un menu de navigation)
n'importe quel lien de la page, mais uniquement au moment où on clique sur ce lien
n'importe quel lien de la page, mais uniquement au moment où on survole ce lien avec
le pointeur de la souris
Question 9 : A quoi sert le sélecteur CSS3 "h1 ~ p"?
à cibler tous les paragraphes qui suivent un titre h1
à cibler les éléments h1 s'ils contiennent un paragraphe
à cibler tous les titres et paragraphes de la page
Question 10 : Flexbox est une méthode de mise en page bidimensionnelle :
Vrai
Faux
Question 11 : Combien de lignes et colonnes ont été définit avec ce code ?
grid-template-columns: 100px 1fr 1fr 250px;
grid-template-rows: 50px repeat(2,1fr);
2 ligne et 4 colonnes
2 lignes et 3 colonnes
3 lignes et 2 colonnes
3 lignes et 4 colonnes
Question 12 : À quoi sert l'unité de mesure fr ?
Elle prend le plus de place disponible possible
Elle fait contracter la grille
Elle élargit les lignes des cellules
2
Nom : Prénom :
Question 13 : comment appliquer un style pour les tailles de fenêtre de navigateur plus
grandes que 600px
@media only screen and(max-width:600px)
@media only screen and(min-width:600px)
@media only screen and(width:600px)
Question 14 : Quelle est l'orientation par défaut au sein d'un flex container ?
Horizontale
Verticale
Diagonale
Question 15 : Quelle propriété ajoute des gouttières ?
space
gap
distance
Question 16 : Comment modifier l'ordre d'affichage des éléments ?
nth
flex-nth
order
grid-order
Question 17 : Comment charger une feuille de style uniquement pour une fenêtre au format
paysage ?
<link rel="stylesheet" size="landscape" href="styles.css">
<link rel="stylesheet" media="landscape" href="styles.css">
<link rel="stylesheet" media="(orientation : landscape)" href="styles.css">
Question 18 : Où va se positionner un élément doté d'une déclaration transform:
translate(0,100px) ?
Poussé vers le bas de 100px
Poussé vers la droite de 100px
Poussé tantôt à droite tantôt vers le bas selon son positionnement
Question 19 : À quoi correspond une hauteur de 50vh ?
à la moitié de la hauteur du parent
à la moitié de la hauteur de la fenêtre
à la moitié de la hauteur de ses enfants
Question 20 : Quelle valeur de display n’existe pas ?
inline
inline-flex
grid
inline-float
block
3
Nom : Prénom :
Exercice 2 (7 points) :
Compléter le code CSS ci-dessous afin de reproduire le résultat suivant (ignorer le style des
couleurs). Positionner les blocs avec un positionnement absolu.
Remarque : Sur l’image la boite verte est au-dessus de la boite bleue
Code HTML Résultat
4
Nom : Prénom :
Exercice 3 (7 points)
On souhaite faire une animation d’une durée de 10 secondes, permettant de changer la
couleur d’une boite progressivement en trois étapes
• Etat initial : Boite en rouge
• Etat intermédiaire (après l’écoulement de la moitié de la durée) : boite en vert
• Etat final : Boite en bleu
La boite doit conserver l’état final, après la fin de l’animation
Utiliser le sélecteur : .boite{ … }
Utiliser les mots-clés de la liste suivante selon le besoin (Certains peuvent être inutiles)
transition-property linear forwards translate
backgroud-color animation-name display animation-duration
animation-fill-mode animation-delay backwards transition-duration
5
Nom : Prénom :
Exercice 4 (7 points) :
Considérer le code HTML et CSS suivant, dessiner la grille et l’emplacement des différents
blocs dans cette grille.
Code HTML Code CSS
6
Nom : Prénom :
Exercice 5 (6 points)
Donner le code CSS afin d’obtenir le résultat ci-dessous (ignorer le style des bordures et des
couleurs).
Utiliser les propriétés : grid-template-areas et grid-area
Utiliser les sélecteurs de classe : .conteneur / . entete / . menu / . contenu / .aside / .pied
7
Nom : Prénom :
Exercice 6 (6 points)
Donner le code CSS afin d’obtenir le résultat ci-dessous (ignorer le style des bordures et des
couleurs).
Extrait du code HTML Code CSS
Résultat souhaité
Utiliser les mots-clés de la liste suivante selon le besoin (Certains peuvent être inutiles)
nowrap flex row Justify-content
column center display wrap
align-self flex-wrap row-reverse flex-direction
8
Nom : Prénom :
