Taux de réponses en cours : 0 % Envoyer le formulaire


Fiche : Quizz CSS


Objet de la fiche


État de la fiche Terminée validée


Avant propos

50 points pour confirmer votre maîtrise dans l'utilisation des feuilles de style.

Le Quizz CSS (feuilles de style)


Pour chaque question sélectionnez une réponse parmi 4 possibles
1. CSS décrit ?

 L'architecture interne,,
 La structure des images,
 Les aspects de présentation d'une page HTML,
 Les relations entre page HTML.

2. CSS est l'acronyme de ?

 Commun style sheet,
 Color sheet style,
 Creative style sheet,
 Cascading style sheet..

3. Quelle propriété est-elle à utiliser pour définir la taille des caractères ?

 text-taille,
 font-size,
 font-weigt,
 font-height.

4. Pour lier une feuille de style externe à un document XHTML on utilise la balise :

 <script>.....</script>,
 <link ......... />,
 <style> .....</style>,
 <méta ........... />.

5. Pour définir la couleur rouge d'un caractère qu'elle syntaxe doit-on utiliser ?

 {couleur:red}
 {color:rouge}
 {color:red}
 {red:color}

6. Pour encadrer  les règles de style interne on utilise la balise :

 <script type="text/javascript"> règles de style </script>,
 <style type="text/javascript"> règles de style </style>,
 <style type="text/css">  règles de style </style>,
 <script type="text/css"> règles de style </script>.

7. Quelles unités relatives utilise t'on  pour définir la taille d'un élément ?

 mm(millimètre), cm (centimètres),
 pouces, inches,
 em, pixels, %,
 le point, le pica.

8. La syntaxe style=".........."  permet d'introduire :

 Des règles de style avec la règle @import,
 Uniquement des règles de style liées aux textes,
 Une règle liée à la classe ou à l'identificateur d'un élément,
 Des règles de style en ligne.

9. L'identificateur 'id' et sa valeur (id="xxx") affecté à un élément (balise)  ...

 S'applique uniquement sur certains types d'éléments,
 Peut s'appliquer à plusieurs balises,
 Peut s'appliquer sur n'importe quel élément mais doit être unique pour un élément dans une page HTML,
 Sert à créer un style en ligne.

10. Dans la directive <link rel="stylesheet" type="text/css" href="zz.css" média="xxx"> quelle valeur doit avoir média pour que la directive s'applique à tous les media posssibles ?

 média="print",
 média="screen",
 média="aural",
 média="all".

11. Des pseudo-classes dynamiques peuvent permettent ?

 D'affecter un même style à un ensemble de balises,
 D'appliquer un style à une partie du texte,
 De modifier le style d'une balise en fonction d'un événement (exp survol de souris),
 D'indexer automatiquement des paragraphes.

12. Qu'elle est la bonne syntaxe pour définir l'épaisseur de bordure d'un élément ?

 {border-width:1px},
 {border-style:dotted},
 {border-color:blue red yellow},
 {border-left-style:double}.

13. Comment affecter des styles différents à des sélecteurs (balises) de même nom ?

 Par le concept de classe (class=".."),
 Par le concept de style (style=".."),
 Par l'identificateur id (id=".."),
 Tous ci dessus.

14. Quelle valeur d'attribut est-elle possible pour la propriété 'border-style' ?

 clear,
 dotted,
 gras,
 little.

15. Quel attribut et à associer à border-collapse pour que chaque cellule d'un tableau possède sa propre bordure ?

 {border-collapse:collapse},
 {border-collapse:separate},
 {border-collapse:both},
 {border-collapse:unique}.

16. :hover, :focus, :active sont des pseudo classes dites ..?

 Pseudo classe de lien,
 Pseudo classe dynamique,
 Pseudo classes de texte,
 Pseudo classe aléatoire.

17. link, visited sont des pseudo classes dites ..?

 Pseudo classe de lien,
 Pseudo classe dynamique,
 Pseudo classes de texte,
 Pseudo classe aléatoire.

18. Quelle directive est à utiliser pour importer une feuille de style externe dans une autre feuille de style externe définie par <link ......... />

 <style type="text/css"> ........ </style>,
 <link rel="stylesheet" type="text/css" href="zzzz.css" média="screen">,
 <script type="text/javascript"> ........ </script>,
 @import url(xxx.css) all;.

19. Quels sont les types de propriétés applicables aux marges internes et externes que l'on peut définir pour un élément HTML ?

 margin et padding,
 hight et weight,
 right et left,
 Tous ci dessus.

20. Comment spécifier uniquement la marge interne basse d'un l'élément.

 padding-top:0.3em,
 padding-left:0.3em,
 padding-bottom:0.3em,
 padding-right:0.3em,

21. La syntaxe suivante {margin:0.3em 5px} définie pour un élément ..

 Une marge interne haute et basse de 0.3em et une marge interne de 5px à droite et à gauche,
 Une marge externe haute et basse de 0.3em et une marge externe de 5px à droite et à gauche,
 Une marge externe haute et basse de 5px et une marge interne de 0.3em à droite et à gauche,
 Une marge interne haute et basse de 5px et une marge interne de 0.3em à droite et à gauche.

22. Quelles propriétés sont-elles à notre disposition pour afficher un élément à gauche ou à droite à l'intérieur de son parent ?

 {float:right},
 {clear:both},
 {float:left},
 Tous ci dessus.

23. Quelle déclaration de style permet-elle un arrière plan gris associé à une image fixe (bouquet2.png) positionnée sur la gauche et à 2/3 de la hauteur sur l'ensemble d'une page HTML ?

 body{background: gray url('Bouquet2.png') fixed no-repeat 0% 75%};,
 body{background: gray url('Bouquet2.png') scroll no-repeat 0% 75%};,
 body{background: gray url('Bouquet2.png') fixed no-repeat 75% 0%};,
 body{background: gray Bouquet2.png fixed no-repeat 0% 75%};

24. Quelle valeur doit-on affecter à la propriété d'arrière plan  background-repeat pour obtenir une répétition horizontale du motif défini par exemple par background-image:url('Bouquet2.png') ?

 {background-repeat:no-repeat},
 {background-repeat:x},
 {background-repeat:y},
 {background-repeat:repeat}.

25. Quelle propriété utilise-t-on pour indiquer quel élément se positionnera au dessus des autres lorsque l'on positionne plusieurs éléments susceptibles de se chevaucher ?

 {float:left},
 {position:absolute},
 {position:fixed},
 {z-index:1}.

26. Comment centrer un texte horizontalement ?

 {text-align:center},
 {vertical-align:center},
 {horizontal-align:center},
 {align:center}.

27. Le résultat de la directive de style suivante h1:after{content:"toto";color:red;font-weight:bold} sera que :

 Le contenu de toute balise <h1>.....</h1> sera suivi du texte toto en gras et de couleur rouge,
 Le contenu de toute balise <h1>.....</h1> sera précédé du texte toto en gras et de couleur rouge,
 Le contenu de toute balise <h2>.....</h2> sera précédé du texte toto en gras et de couleur rouge,
 Le contenu de toute balise <h1>.....</h1> est le texte toto en gras et de couleur rouge.

28. Le résultat de la directive de style suivante h1:before{countent:counter(section,upper-roman)} sera que :

 Le contenu de toute balise <h1>.....</h1> sera précédé d'une indexation en chiffres arabes (1, 2, 3),
 Le contenu de toute balise <h1>.....</h1> sera précédé d'une indexation en lettres en capitales (A, B, C),
 Le contenu de toute balise <h1>.....</h1> sera précédé d'une indexation en chiffres romains (I, II, III, IV),
 Le contenu de toute balise <h1>.....</h1> sera précédé d'une indexation en chiffre arabes (01, 02, 03).

29. Quelles polices de caractères conviennent-elles le mieux pour obtenir la meilleure lisibilité à l'écran des petits caractères ?

 Les polices avec empattements (serif) comme Times New Roman, Garamond, Georgia, New York, Times,
 Les polices à « chasse fixe » comme Courrier ou New/Courrier,
 Les caractères fantaisie (Symbol, Webdings),
 Les polices sans empattements (sans serif) comme Arial/Helvetica, Verdana, Trebuchet.

30. Quel style détermine l'épaisseur du texte (graisse) ?

 {font-style:normal},
 {font-weight:bold},
 {font-variant:small-caps},
 {font-strech:normal}.

31. Quel style permet le soulignement d'un texte ?

 {text-decoration:overline},
 {text-decoration:line-through},
 {text-decoration:underline},
 {text-decoration:blink}.

32. Comment empêcher dans un texte un retour à ligne automatique ?

 {white-space:nowrap},
 {white-space:pre},
 {text-transform:capitalize},
 {word-spacing:normal}.

33. {vertical-align:sub} défini ...

 Que l'élément s'aligne sur les parties les plus hautes de son parent,
 Que l'élément s'aligne sur les parties les plus basses de son parent,
 Que l'élément hérite de la propriété de son parent,
 Que l'élément s'aligne un peu plus bas que la ligne de base de son parent.

34. Par l'intermédiaire de quelle balise peut-on grouper des lignes consécutives dans un tableau et leur appliquer différents styles ?

 <tbody> .........</tbody>,
 <caption>.......</caption>,
 <thead>.......</thead>,
 <legend>......</legend>.

35. Dans la déclaration de style suivante #MonElement {color:blue} , MonElement représente ....

 Le nom de l'élément,
 La classe de l'élément,
 La couleur du texte de l'élément,
 L'identificateur (id) de l'élément.

36. Lorsque l'on applique les propriétés {visibility:hidden} à un élément ou {visibility:collapse} à une ligne de tableau ...

 L'élément devient invisible , mais influence toujours la mise en forme en occupant toujours son espace,
 L'élément devient invisible , et n'influence pas la mise en forme en n'occupant plus son espace,
 L'élément devient invisible , mais affiche toujours sa bordure,
 L'élément n'existe plus.

37. La déclaration de style suivante {display:block} ...

 Impose l'affichage en texte - l'élément est affiché dans le cours du texte,
 Impose une présentation de type liste à l'élément sur lequel cette propriété est appliquée,
 Impose un bloc - l'élément crée un nouvelle ligne,
 Permet d’appliquer des styles de type “block” à un élément ayant un comportement de type “inline”.

38. Qu'elle directive de style est-elle prioritaire ?

 @import,
 en ligne,
 externe,
 interne.

39. Donnez l'élément qui de base occupe 100% de la page

 <div>,
 <span>,
 <a>,
 <img>.

40. Une couleur de texte rouge peut se définir en mode rgb de la façon suivante : {color:rgb(255,0,0)}. Comment est-elle définie en mode héxadécimal

 {color:rgb(FF,0,0)},
 {color:rgb ff,0,0},
 {color:#255,0,0},
 {color:#ff0000}.

41. Comment déterminer l'espacement entre les lignes d'un texte ...

 par la directive {line-height:0.5em},
 par la directive {letter-spacing:0.5em},
 par la directive {text-decoration:overline},
 par la directive {text-indent:0.5em}.

42. Comment rendre un élément fixe au niveau de son emplacement dans une page, et en même temps bouger avec elle.

 position:absolute; top:6em; left:23em;},
 position:fixed; top:6em; left:23em;},
 position:relative; top:6em; left:23em;},
 toutes les directives précédentes permettent cet effet.

43. L'aire d'affichage d'un contenu est définie par les valeurs données aux attributs height et width, mais comment afficher les barres de défilement lorsque le texte à afficher ne rentre pas dans l'aire d'affichage

 affecter à l'aire d'affichage la propriété {overflow:none},
 affecter à l'aire d'affichage la propriété {text-overflow:clip},
 affecter à l'aire d'affichage la propriété {overflow:hidden},
 affecter à l'aire d'affichage la propriété {overflow:scroll}.

44. La directive de style suivante {filter:progid:DXImageTransform.Microsoft.alpha(opacity=50)} s'applique ...

 uniquement avec Internet Explorer pour définir une opacité de 50% sur les images uniquement,
 sur tout navigateur pour définir une opacité de 50% sur un élément html,
 uniquement avec Internet Explorer pour définir une opacité de 50% sur un élément html quelconque,
 sur tout navigateur pour définir une opacité de 50% sur les images uniquement.

45. Quelles propriétés ne sont-elles pas autorisées en association avec les pseudo éléments after et before..

 la propriétés 'position',
 la propriétés 'float',
 les propriétés listes (ul,ol), tables, formulaires,
 toutes les propriétés proposées ci-dessus ne sont pas autorisées.

46. La fonction attr(x) permet ...

 d'introduire une citation,
 de récupérer la valeur d'un des attributs d'un élément,
 de récupérer la valeur d'un compteur pour indexation de paragraphe,
 d'affecter un texte à tous les éléments de même nature.

47. Lors d'une impression, comment insérer un saut de page avant l'élément actuel ?

 {page-break-before:avoid},
 {page-break-after:always},
 {page-break-before:right},
 {page-break-before:always}.

48. Dans la déclaration de style externe suivante <link rel="stylesheet" media="xxxx" href="impression.css"> quelle valeur doit prendre media pour que cette feuille s'applique uniquement à l'impression ?


 screen,
 all,
 print,
 tty.

49. Quelle directive est-elle utilisée pour obtenir une impression paysage en 21/29,7 ?

 page { size:landscape; size:21.0cm 29.7cm;},
 @page { size:landscape; size:21.0cm 29.7cm;},
 @page { size:portrait; size:21.0cm 29.7cm;},
 @page { size:auto; size:21.0cm 29.7cm;}.

50. Le terme rollover est relatif ...

 au positionnement d'un attribut HTML,
 aux transformations d'apparence d'un attribut HTML lors de son survol par le curseur,
 aux diverses formes que peut prendre le curseur,
 aux caractéristiques des arrières plans.


Respectons la propriété intellectuelle