wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

DD12_Html_CSS_Bootstrap_1

Total questions: 100

Worksheet time: 51mins

Name
Class
Date
1.

Quelle balise permet d'indiquer le titre de la page web?

(a)  

2.

transform: translate(50px,100px);

faire :

a)

la rotation

b)

la translation

c)

la direction

3.

body {​

background-color: pink;​

}​

​

@media screen and (min-width: 480px) {​

body {​

background-color: lightgreen;​

}​

}​

la couleur par défaut de background:

a)

pink

b)

lightgreen

4.

Pour parler d'une case de la grille, on emploie le terme ....

a)

cellule

b)

zone

c)

espace

5.

Pour parler d'une case de la grille, on emploie le terme ....

a)

cellule

b)

zone

c)

espace

6.

Les bordures de la grille sont appelées lignes

a)

Vrai

b)

Faux

7.

Pour parler d'une case de la grille, on emploie le terme ....

a)

cellule

b)

zone

c)

espace

8.

Les bordures de la grille sont appelées lignes

a)

Vrai

b)

Faux

9.

À quoi sert l'attribut action d'un formulaire?

a)

Donne le nom du script qui sera utilisé pour traiter l'information

b)

Donne le nom de la page retournée en cas de succès

c)

Donne le nom de la page retournée en cas d'échec

d)

L'attribut ne sert à rien

10.

À quoi sert la balise <fieldset>?

a)

Grouper des contrôles de façon logique, entourés d'un cadre

b)

Grouper les éléments d'une liste

c)

Désactiver un élément

d)

Ajouter un titre

11.

j'ecris ce code : <img src="../image/image2.jpg" title="Arbre2"> sur ma page Index.html

a)

l'image 2 est dans un sous répertoire qui est dans le même dossier que ma page Index

b)

l'image 2 est dans le même dossier que ma page Index

c)

l'image 2 est dans un autre dossier que le dossier de la page Index

12.

Quel pseudo format utilise-t-on pour appliquer un style au survole de la souris?

a)

a:active

b)

a:hover

c)

a:visited

d)

a:focus

13.

Un élément qui possède une min-width de 200px et une width de 50% pourra avoir une taille...

a)

De 200px à l'infini

b)

De 100px à 200px

c)

De 0px à 200px

d)

De 200px à 400px

14.
Que veux dire le sélecteur suivant :  
p.info.selection{
          color : red;
}
a)
L’élément p qui a une classe info ou une classe selection sera rouge.
b)
L’élément p qui a une classe info et une classe selection sera rouge.
c)
L’élément p qui est dans un élément avec une classe info et selection sera rouge.
d)
L’élément p qui a une classe info sera rouge.
15.

Parmi les affirmations suivantes, cochez celles qui sont vraies concernant le code suivant : p::first-line

a)

permet de cibler la première ligne de chaque paragraphe.

b)

permet de cibler uniquement les paragraphes composés d'une ligne.

c)

est un pseudo-élément.

d)

est une pseudo classe.

16.

Le combinateur '+' permet de sélectionner ...

a)

... les nœuds contenant des valeurs numériques.

b)

...les nœuds qui suivent immédiatement un élément donné.

c)

... les nœuds qui précèdent directement un élément donné.

d)

... ses amis.

17.

#X

a)

sélecteur id

b)

sélecteur classe

c)

sélecteur simple

18.

.X{}

a)

sélecteur id

b)

sélecteur adjacent

c)

sélecteur classe

19.

X Y{}

a)

sélecteur double

b)

sélecteur descendant

c)

sélecteur frère

20.

X{} est un sélecteur :

a)

simple

b)

basic

c)

fils

d)

parent

21.

X:link {}

est utilisé pour sélectionné tous les balises :

a)

cliquables

b)

ne sont pas encore cliquées

c)

sont cliquées

22.

X + Y est un sélecteur

a)

adjacent

b)

amis

c)

fils

23.

X > Y sélectionnera que des enfants directs :

a)

vrai

b)

faux

24.

ul ~ p {

color: red;

}

Il sélectionne n'importe quel élément p

a)

vrai

b)

faux

25.

X[title] est un sélecteur :

a)

d'attribut

b)

name

c)

id

d)

classe

26.

X[href="htpp://google.com"] sélectionne

a)

les liens contient le mot google

b)

les liens contient Url de google

c)

direction vers google

27.

X[href*="nettuts"] :

l'étoile indique que la valeur qui suit doit apparaître quelque part dans la valeur de l'attribut.

a)

vrai

b)

faux

28.
Identifier le style CSS qui utilise un sélecteur descendant.
a)
article p { color : #ff0000; }
b)
.info { color : #ff0000; }
c)
article > p { color : #ff000;
 }
d)
#info { color : #ff0000; }
29.
Identifier le style CSS qui utilise un sélecteur de frère adjacent.
a)
article p { color : #ff0000; }
b)
article > p { color : #ff000; }
c)
article + p { color : #ff0000; }
d)
p .info{ color : #ff0000; }
30.
Identifier le style CSS qui utilise un sélecteur d’enfant.
a)
article p { color : #ff0000; }
b)
article > p { color : #ff000; }
c)
article + p { color : #ff0000; }
d)
#info { color : #ff0000; }
31.
Que veux dire le sélecteur suivant :  
p.info.selection{
          color : red;
}
a)
L’élément p qui a une classe info ou une classe selection sera rouge.
b)
L’élément p qui a une classe info et une classe selection sera rouge.
c)
L’élément p qui est dans un élément avec une classe info et selection sera rouge.
d)
L’élément p qui a une classe info sera rouge.
32.

Quel(s) sélecteur(s) utiliser pour ajouter une règle CSS sur les list items Menu 1 et Menu 2 ?

a)

#menu-item { ... }

b)

.menu-item { ... }

c)

menu-item { ... }

d)

nav ul li { ... }

33.

Quelle propriété nous permet de créer des bordures arrondies ?

a)

Border-style

b)

Radius

c)

Raduis-border

d)

Border-radius

34.

Que représente le padding d'un élément ?

a)

Le contenu de l'élément

b)

La marge extérieure

c)

La marge intérieure

d)

La feuille de style

35.

Quelle déclaration permet de définir une marge extérieure uniquement en haut et en bas de 10px d'un élément ?

a)

padding: 10px;

b)

padding: 10px 0;

c)

margin: 10px;

d)

margin: 10px 0;

36.

Quel sélecteur ci-après permet de cibler les paragraphes enfant de l'élément id="titi" ?

a)

p#titi {}

b)

#titi p {}

c)

p.titi {}

d)

titi p {}

37.

Lequel des sélecteurs suivants permet de cibler les éléments <p>, <li> et <span> ?

a)

p.li.span { }

b)

p + li + span { }

c)

p, li, span { }

d)

p li span { }

38.

à quoi sert le pseudo-classe hover

a)

permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.

b)

permet la redirection vers un nouvel onglet de l'utilisateur que celui-ci clic sur l'élément

c)

change la couleur du paragraphe si l'utilisateur le survole avec le pointeur

39.

Quelle balise est le parent de toutes les autres balises de contenu d'une page web ?

a)

<p> ... </p>

b)

<body> ... </body>

c)

<head> ... </head>

d)

<parent> ... </parent>

40.

Le CSS fait-il une différence entre la classe para et la classe PARA ?


.para {

text-align:center;

}


.PARA {

text-align:center;

}

a)

oui

b)

faux

41.

Faut-il écrire le nom de la propriété CSS 'color' en majuscule ou en minuscule ?

h1 {

COLOR: yellow;

}


h1 {

color: yellow;

}

a)

en majuscules

b)

en minuscules

c)

les deux correctes

42.

Ces deux sélecteurs vont-il sélectionner le même élément ?

#para {

......

}


#PARA {

......

}

a)

oui

b)

non

43.

Peut-on choisir '_1test-val' comme nom d'identificateur ?

.1test_val {

font-size: 1em;

}

a)

oui

b)

non

44.

#X

a)

sélecteur id

b)

sélecteur classe

c)

sélecteur simple

45.

.X{}

a)

sélecteur id

b)

sélecteur adjacent

c)

sélecteur classe

46.

X Y{}

a)

sélecteur double

b)

sélecteur descendant

c)

sélecteur frère

47.

X{} est un sélecteur :

a)

simple

b)

basic

c)

fils

d)

parent

48.

X:link {}

est utilisé pour sélectionné tous les balises :

a)

cliquables

b)

ne sont pas encore cliquées

c)

sont cliquées

49.

X + Y est un sélecteur

a)

adjacent

b)

amis

c)

fils

50.

X > Y sélectionnera que des enfants directs :

a)

vrai

b)

faux

51.

ul ~ p {

color: red;

}

Il sélectionne n'importe quel élément p

a)

vrai

b)

faux

52.

X[title] est un sélecteur :

a)

d'attribut

b)

name

c)

id

d)

classe

53.

X[href="htpp://google.com"] sélectionne

a)

les liens contient le mot google

b)

les liens contient Url de google

c)

direction vers google

54.

X[title] est un sélecteur :

a)

d'attribut

b)

name

c)

id

d)

classe

55.

X[href*="nettuts"] :

l'étoile indique que la valeur qui suit doit apparaître quelque part dans la valeur de l'attribut.

a)

vrai

b)

faux

56.
Identifier le style CSS qui utilise un sélecteur descendant.
a)
article p { color : #ff0000; }
b)
.info { color : #ff0000; }
c)
article > p { color : #ff000;
 }
d)
#info { color : #ff0000; }
57.
Identifier le style CSS qui utilise un sélecteur descendant.
a)
article p { color : #ff0000; }
b)
.info { color : #ff0000; }
c)
article > p { color : #ff000;
 }
d)
#info { color : #ff0000; }
58.
Identifier le style CSS qui utilise un sélecteur de frère adjacent.
a)
article p { color : #ff0000; }
b)
article > p { color : #ff000; }
c)
article + p { color : #ff0000; }
d)
p .info{ color : #ff0000; }
59.
Identifier le style CSS qui utilise un sélecteur d’enfant.
a)
article p { color : #ff0000; }
b)
article > p { color : #ff000; }
c)
article + p { color : #ff0000; }
d)
#info { color : #ff0000; }
60.
Que veux dire le sélecteur suivant :  
p.info.selection{
          color : red;
}
a)
L’élément p qui a une classe info ou une classe selection sera rouge.
b)
L’élément p qui a une classe info et une classe selection sera rouge.
c)
L’élément p qui est dans un élément avec une classe info et selection sera rouge.
d)
L’élément p qui a une classe info sera rouge.
61.

Quel sélecteur ci-après permet de cibler les paragraphes enfant de l'élément id="titi" ?

a)

p#titi {}

b)

#titi p {}

c)

p.titi {}

d)

titi p {}

62.

Lequel des sélecteurs suivants permet de cibler les éléments <p>, <li> et <span> ?

a)

p.li.span { }

b)

p + li + span { }

c)

p, li, span { }

d)

p li span { }

63.

Pour la règle de style : p { position: relative ; left: 5px ; right: 20 px ;} le décalage sera

a)

de 5 pixels à gauche et de 20 pixels à droite, soit un étirement

b)

de 5 pixels par rapport à la gauche

c)

de 20 pixels par rapport à la droite

d)

de 15 pixels par rapport à la droite

64.

z-index est utilisé

a)

comme indice de tri pour un tableau

b)

pour la création d'un indexe de recherche sur une page

c)

pour la superposition de blocs

d)

pour l'ordre des tabulations entre les champs

65.

A quoi sert la propriété de style "border-radius" ?

a)

à arrondir les coins des encadrés

b)

à appliquer une rotation à un encadré

c)

à définir des angles précis pour les encadré

d)

à définir un effet de perspective selon un angle pour un encadré

66.

La pseudo-classe first-of-type vous permet de sélectionner les premiers frères d'un type donné.

a)

vrai

b)

faux

67.

qui cible le dernier élément du parent dans fichier html :

a)

first-child,

b)

last-child

c)

only-child

68.

nth-last-of-type permet de commencer à la fin de la liste des sélecteurs pour compter :

a)

oui

b)

non

c)

parfois

69.

je veux sélectionner tous les éléments de la page sauf les balises de paragraphes j'utilise :

a)

*:not(p){}

b)

*:not(div){}

c)

p:not(p){}

70.

Pourquoi doit-on préciser plusieurs valeurs pour la propriété font-family ?

a)

Pour laisser la possibilité à l'utilisateur de choisir celle qu'il préfère

b)

Car certaines polices peuvent ne pas être lues par un navigateur

c)

Il n'est pas nécessaire de préciser plusieurs valeurs

71.

A quoi sert la propriété font-weight ?

a)

A modifier le poids d'une police

b)

A modifier l'inclinaison d'une police

c)

A modifier la taille d'une police

72.

Par défaut, une image de fond se répète...

a)

Horizontalement

b)

Pas du tout

c)

Horizontalement et verticalement

73.

Lorsqu'on définit "width:75%" pour un élément en CSS, cela signifie...

a)

Que l'élément va occuper une 75% de la largeur totale de la page

b)

Que l'élément va occuper une 75% de sa largeur par défaut

c)

Que l'élément va occuper une 75% de la largeur de son élément parent

74.

Quel va être l'aspect d'une bordure si on la crée en utilisant la valeur dashed ?

a)

Bordure en pointillés

b)

Bordure sous forme de tirets

c)

Bordure avec un effet 3D

75.

Que représente le padding d'un élément ?

a)

La marge intérieure

b)

La marge extérieure

c)

Le contenu de l'élément

76.

Si on ne donne que deux valeurs à la propriété Border, la première valeur représente...

a)

La marge intérieure haute

b)

Les marges intérieures droite et gauche

c)

Les marges intérieures haute et basse

77.

Que se passe t-il si j'applique "display:none" à un élément ?

a)

L'élément est effacé du code de ma page HTML

b)

Le type de display de l'élément n'est pas modifié

c)

L'élément ne sera pas affiché dans le navigateur

78.

Dans quel ordre écrit-on les éléments suivants généralement en HTML ?

a)

thead, tfoot puis tbody

b)

thead, tbody puis tfoot

c)

tbody, thead puis tfoot

79.

Le séléecteur CSS étoile (*) sert à...

a)

Appliquer des bordures aux éléments

b)

Sélectionner tous les éléments d'une page HTML

c)

Sélectionner un élément possédant un attribut en particulier

80.

L'élément form doit obligatoirement être accompagné...

a)

D'un attribut method

b)

D'un attribut action

c)

De deux attributs method et action

81.

Quelle est la syntaxe pour déclarer l'encodage des caractères du document en UTF-8 ?

a)

<meta encoding="text/html; charset=utf-8">

b)

<meta charset="utf-8">

c)

<meta charset="text/html; UTF-8">

d)

<meta charset="utf-16">

82.

Quel est le doctype d'un document HTML5 ?

a)

<!DOCTYPE html5>

b)

<!DOCTYPE>

c)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML5.0 Strict//EN">

d)

<!DOCTYPE html>

83.

Quelle déclaration permet de définir une marge extérieure uniquement en haut et en bas de 10px d'un élément ?

a)

padding: 10px;

b)

padding: 10px 0;

c)

margin: 10px;

d)

margin: 10px 0;

84.

Quelle propriété permet de modifier la police d'un élément HTML ?

a)

police:

b)

font:

c)

font-family:

d)

text-family:

85.

Lequel des sélecteurs suivants permet de cibler les éléments <p>, <li> et <span> ?

a)

p.li.span { }

b)

p + li + span { }

c)

p, li, span { }

d)

p li span { }

86.

Lequel des sélecteurs suivants permet de cibler les éléments <p>, <li> et <span> ?

a)

p.li.span { }

b)

p + li + span { }

c)

p, li, span { }

d)

p li span { }

87.

Quel est le doctype d'un document HTML5 ?

a)

<!DOCTYPE html5>

b)

<!DOCTYPE html>

c)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML5.0 Strict//EN">

88.

Quelle est la syntaxe pour déclarer l'encodage des caractères du document en UTF-8 ?

a)

<meta encoding="text/html; charset=utf-8">

b)

<meta charset="text/html; UTF-8">

c)

<meta charset="utf-8">

89.

Quel attribut permet d'indiquer où se trouve l'image à insérer ?

a)

title

b)

src

c)

alt

90.

Quel attribut permet d'insérer un lien ?

a)

href

b)

id

c)

title

91.

Le CSS sert à

a)

faire du style

b)

faire des site internet

c)

dessiner

d)

programmer des jeux en ligne

92.

Les commentaires en CSS sont obtenus par

a)

<!-- commentaires -->

b)

/* commentaires */

c)

% commentaires %

d)

# commentaires #

93.

Pour indiquer qu'un contenu est très important, on utilise l'élément...

a)

Em

b)

Strong

c)

i

d)

Mark

94.

Quels éléments sont nécessaires pour créer une liste non-ordonnée ?

a)

ol et li

b)

ul et ol

c)

tr et td

d)

ul et li

95.

Lorsqu'on définit "width:75%" pour un élément en CSS, cela signifie...

a)

Que l'élément va occuper une 75% de la largeur totale de la page

b)

Que l'élément va occuper une 75% de sa largeur par défaut

c)

Que l'élément va occuper une 75% de la largeur de son élément parent

96.

Quel va être l'aspect d'une bordure si on la crée en utilisant la valeur dashed ?

a)

Bordure en pointillés

b)

Bordure sous forme de tirets

c)

Bordure avec un effet 3D

97.
Comment changer la couleur d'un lien en rouge quand il est survolé par la souris ?
a)
a:link {color: red}
b)
a:visited {color: red}
c)
a:active {color: red}
d)
a:hover {color: red}
98.
Comment ajouter une marge aux images qui côtoient une liste ul ?
a)
ul[img] {margin: 15px; }
b)
ul$img {margin: 15px; }
c)
ul~img {margin: 15px; }
d)
ul| img {margin: 15px; }
99.
En CSS, rgb(255,255,255) est la couleur
a)
transparente
b)
blanche
c)
noire
d)
grise
100.
Comment définir une case à cocher ?
a)
type="checkbox"
b)
type="radio"
c)
type="inputbox"
d)
type="selector"

Similar Resources on Wayground

жұмбақ

101 questions

жұмбақ

quiz

Worksheet

•

1st - 6th Grade

MLB

101 questions

MLB

quiz

Worksheet

•

KG - University

Tik Kelas 3 Word

105 questions

Tik Kelas 3 Word

quiz

Worksheet

•

3rd Grade

Word Within The Word Lists 1-4

100 questions

Word Within The Word Lists 1-4

quiz

Worksheet

•

3rd Grade - University

COMP-MICROSOFT WORD

100 questions

COMP-MICROSOFT WORD

quiz

Worksheet

•

2nd Grade

ENGLISH WEEK TEST

100 questions

ENGLISH WEEK TEST

quiz

Worksheet

•

1st - 5th Grade

Chemistry exams

100 questions

Chemistry exams

quiz

Worksheet

•

3rd Grade

PROGRAMACION SEGUNDO FINAL

100 questions

PROGRAMACION SEGUNDO FINAL

quiz

Worksheet

•

2nd Grade