$course$/QCM de NSI/Première/CSS : mise en forme Feuilles de style en cascade (CSS), syntaxe d'une règle,
sélecteurs (élément, classe, identifiant), propriétés
courantes (couleur, taille, marges), modèle de boîte,
cascade et héritage, intégration au HTML.

]]> CSS : mise en forme — Q01 : Que signifie CSS ? Que signifie l'acronyme CSS ?

]]> CSS sépare la structure (HTML) de la
présentation (CSS). Bonne pratique pour la
maintenabilité.

]]> 1.0 0.0 0 true true abc Computer Style Sheet

]]> Le sigle officiel est
Cascading Style Sheets.
La notion de « cascade »
est essentielle, car elle
décrit comment les règles
se combinent ou se
surchargent.

]]> Cascading Style Sheets

]]> Bonne réponse : feuilles de style en
cascade. La cascade décrit comment les
règles s'appliquent et se combinent quand
plusieurs s'opposent.

]]> Color and Style System

]]> Cette appellation n'a
pas d'existence officielle.
Le standard porte le nom
Cascading Style Sheets,
mis au point par le W3C.

]]> Centralized Style Standard

]]> Cette dénomination est
inventée. Le sigle CSS
renvoie aux Cascading
Style Sheets, défini par
le W3C dès 1996.

]]> CSS : mise en forme — Q02 : Syntaxe d'une règle Quelle est la structure d'une règle CSS ?

]]> Exemple : p { color: red; font-size: 16px; }.
Le ; final est facultatif sur la dernière
déclaration mais recommandé.

]]> 1.0 0.0 0 true true abc `

css

sélecteur (propriété = valeur)

]]> Erreur : pas de parenthèses ni de signe
égal.

]]> `

css

<sélecteur propriété="valeur">

]]> Erreur : c'est plutôt une syntaxe HTML.

]]> `

css

sélecteur { propriété: valeur; ... }

]]> Bonne réponse : sélecteur (qui ?), accolades,
paires propriété : valeur séparées par des
points-virgules.

]]> `

css

sélecteur -> propriété -> valeur

]]> Erreur : syntaxe inventée.

]]> CSS : mise en forme — Q03 : Sélecteur d'élément Comment écrire une règle qui s'applique à
tous les paragraphes <p> ?

]]> Sélecteur d'élément : nom seul (h1, p,
div...). Il sélectionne tous les éléments
de ce type dans la page.

]]> 1.0 0.0 0 true true abc p { ... }

]]> Bonne réponse : on désigne le type d'élément par son nom (sans <>).

]]> .p { ... }

]]> Erreur : . désigne une classe.

]]> <p> { ... }

]]> Erreur : pas de chevrons en CSS.

]]> #p { ... }

]]> Erreur : # désigne un id, pas un
élément.

]]> CSS : mise en forme — Q04 : Sélecteur de classe Comment cibler les éléments ayant
class="bouton" ?

]]> Mnémonique : . = class (commencent
tous deux par 'c' à l'oreille). Une classe peut
être appliquée à plusieurs éléments.

]]> 1.0 0.0 0 true true abc bouton { ... }

]]> Erreur : sans préfixe, ce serait un
sélecteur d'élément (qui n'existerait pas).

]]> @bouton { ... }

]]> Erreur : @ introduit des règles
spéciales (@media, @import...).

]]> .bouton { ... }

]]> Bonne réponse : le point désigne une
classe. Très utilisé pour réutiliser un
style sur plusieurs éléments.

]]> #bouton { ... }

]]> Erreur : # désigne un id (élément
unique).

]]> CSS : mise en forme — Q05 : Sélecteur d'id Comment cibler l'élément ayant id="navigation" ?

]]> Trois sélecteurs de base : élément (sans
préfixe), classe (.), id (#). On peut les
combiner : p.important (paragraphes ayant
la classe « important »).

]]> 1.0 0.0 0 true true abc #navigation { ... }

]]> Bonne réponse : le dièse (#) désigne
un id. Comme un id doit être unique, ce
sélecteur cible un seul élément.

]]> .navigation { ... }

]]> Erreur : . désigne une classe.

]]> *navigation { ... }

]]> Erreur : * est le sélecteur universel
(tous les éléments).

]]> navigation { ... }

]]> Erreur : sans préfixe, ce serait un
sélecteur d'élément.

]]> CSS : mise en forme — Q06 : Couleur du texte Quelle propriété change la couleur du texte ?

]]> Distinguer color (texte) et
background-color (fond). Plusieurs syntaxes
pour les couleurs : nommée (red),
hexadécimale (#ff0000), rgb, rgba, hsl.

]]> 1.0 0.0 0 true true abc font-color

]]> Erreur : propriété inexistante.

]]> background

]]> Erreur : background (ou
background-color) change la couleur de fond, pas du texte.

]]> color

]]> Bonne réponse : color: red;,
color: #ff0000;, color: rgb(255, 0, 0);.

]]> text-color

]]> Erreur : propriété inexistante.

]]> CSS : mise en forme — Q07 : Intégrer du CSS Quelle est la meilleure pratique pour
intégrer du CSS dans un projet HTML ?

]]> Trois façons d'intégrer CSS : externe
(<link>), interne (<style>), inline
(style="..."). L'externe est la meilleure
pratique.

]]> 1.0 0.0 0 true true abc Mettre tout le CSS dans une balise <style> à la fin du <body>

]]> Acceptable pour un prototype, mais le
fichier séparé est meilleur pour les
projets.

]]> Mettre du CSS dans chaque attribut style="..."

]]> Pratique courante mais à éviter :
répétitions, difficile à maintenir, ne
permet pas la réutilisation.

]]> Écrire le CSS dans le code JavaScript

]]> Erreur : c'est possible, mais cela mélange le
style et le comportement de la page. Dans un
projet, le CSS reste dans sa propre feuille.

]]> Un fichier .css séparé, lié via <link>

]]> Bonne réponse : séparation des
préoccupations, mise en cache par le
navigateur, partage entre pages, code
maintenable.

]]> CSS : mise en forme — Q08 : Taille de texte Quelle propriété change la taille du texte ?

]]> Une taille en px est fixe ; une taille en
em ou en % dépend de la taille du texte
de l'élément parent.

]]> 1.0 0.0 0 true true abc size

]]> Erreur : propriété inexistante en CSS.

]]> large

]]> Erreur : large est une valeur, pas
une propriété (font-size: large;).

]]> font-size

]]> Bonne réponse : font-size: 16px;,
font-size: 1.2em;. Unités courantes :
px (pixel), em (relatif au parent), %.

]]> text-size

]]> Erreur : propriété inexistante.

]]> CSS : mise en forme — Q09 : Commentaires CSS Comment écrire un commentaire en CSS ?

]]> Bonne pratique : commenter les sections
principales et les valeurs non triviales
(couleurs spécifiques, hacks de
compatibilité).

]]> 1.0 0.0 0 true true abc / commentaire /

]]> Bonne réponse : seule syntaxe valide en
CSS, peut s'étendre sur plusieurs lignes.

]]> -- commentaire

]]> Erreur : c'est la syntaxe SQL.

]]> # commentaire

]]> Erreur : c'est la syntaxe Python.

]]> // commentaire

]]> Erreur : c'est la syntaxe JavaScript, C++,
Java. CSS ne reconnaît pas //.

]]> CSS : mise en forme — Q10 : Lien vers fichier CSS Comment lier un fichier style.css à une page
HTML ?

]]> Convention : nommer la feuille style.css ou
main.css. Pour des styles spécifiques à
certaines pages, plusieurs feuilles peuvent
coexister.

]]> 1.0 0.0 0 true true abc `

html

<import rel="stylesheet" href="style.css">

]]> Erreur : balise inexistante en HTML. CSS a
@import mais c'est en CSS, pas en HTML.

]]> `

html

<css rel="stylesheet" href="style.css" />

]]> Erreur : la balise <css> n'existe pas.

]]> `

html

<link rel="stylesheet" href="style.css">

]]> Bonne réponse : balise <link> avec
rel="stylesheet" (relation = feuille de
style) et href (chemin). À placer dans
<head>.

]]> `

html

<style src="style.css" type="text/css">

]]> Erreur : <style> n'a pas d'attribut
src. Il sert à inclure du CSS interne.

]]> CSS : mise en forme — Q11 : Modèle de boîte Dans le modèle de boîte CSS, quels sont les
quatre composants concentriques d'un élément
(de l'intérieur vers l'extérieur) ?

]]> Comme une carte postale dans une enveloppe :
contenu (la carte), padding (le matelas
autour), border (l'enveloppe), margin
(l'espace entre l'enveloppe et la suivante).

]]> 1.0 0.0 0 true true abc padding, contenu, marge, bordure

]]> Erreur : ordre incorrect.

]]> contenu, padding, bordure, marge

]]> Bonne réponse : content (contenu),
padding (rembourrage interne),
border (bordure), margin (marge
externe).

]]> bordure, marge, padding, contenu

]]> Erreur : ordre incorrect.

]]> marge, contenu, bordure, padding

]]> Erreur : ordre incorrect.

]]> CSS : mise en forme — Q12 : Cascade et priorité Si deux règles s'appliquent au même élément,
laquelle l'emporte ?

]]> Un sélecteur d'id est plus spécifique qu'un
sélecteur de classe, lui-même plus spécifique
qu'un sélecteur d'élément. À spécificité égale,
la règle écrite en dernier l'emporte.

]]> 1.0 0.0 0 true true abc La toute première écrite dans le fichier

]]> Erreur : c'est l'inverse pour la même
spécificité (la dernière écrite l'emporte).

]]> Celle dont le sélecteur est le plus court, donc le plus général

]]> Erreur : c'est l'opposé, le sélecteur le
plus spécifique l'emporte.

]]> Au hasard, selon le choix interne du navigateur

]]> Erreur : la cascade est déterministe,
rien n'est laissé au choix du navigateur.

]]> La plus spécifique, sinon la dernière écrite

]]> Bonne réponse : la cascade hiérarchise par
spécificité, puis par ordre de
déclaration.

]]> CSS : mise en forme — Q13 : Héritage Que signifie qu'une propriété CSS est
héritée ?

]]> Toutes les propriétés ne sont pas héritées :
color, font-family oui ; border,
padding, margin non. Forcer
l'héritage : inherit.

]]> 1.0 0.0 0 true true abc Transmise du parent aux enfants

]]> Bonne réponse : par exemple, color est
héritée : body { color: blue; } rend
tout le texte de la page bleu, sauf si
un descendant la redéfinit.

]]> Elle ne fonctionne que sur le premier élément

]]> L'héritage en CSS n'est
pas restreint au premier
élément ; il se propage
dans toute la sous-arborescence,
du parent vers ses
descendants.

]]> Elle est interdite par CSS3

]]> Erreur : très utilisée.

]]> Elle s'applique à tous les éléments de la page

]]> Erreur : pas global, mais hiérarchique.

]]> CSS : mise en forme — Q14 : Unités CSS Quelle unité exprime une taille de texte
relative à la taille de police de
l'élément parent ?

]]> Une unité relative comme em s'adapte au
parent : 1.2em dans un parent de 20px
donne 24px. Les unités px, pt et cm,
elles, fixent une taille indépendante du
parent.

]]> 1.0 0.0 0 true true abc em

]]> Bonne réponse : 1.2em vaut 120 % de la
taille de police du parent. Adaptatif et
accessible.

]]> px (pixel)

]]> Erreur : taille fixe, indépendante du
parent.

]]> cm

]]> Erreur : unité physique absolue, peu
adaptée à l'écran.

]]> pt

]]> Erreur : le point (pt) est une unité absolue,
héritée de l'imprimerie : sa taille ne dépend
pas du parent.

]]> CSS : mise en forme — Q15 : Sélecteurs combinés Que cible le sélecteur nav a (avec un
espace) ?

]]> Deux écritures à ne pas confondre : nav a
(avec un espace) cible les <a> placés dans
un <nav> ; nav, a (avec une virgule)
applique la même règle à tous les <nav> et
à tous les <a>.

]]> 1.0 0.0 0 true true abc Tous les <a> descendants d'un <nav>

]]> Bonne réponse : l'espace entre deux
sélecteurs signifie « à l'intérieur de ».
Tous les liens contenus dans un <nav> sont
ciblés, même imbriqués dans d'autres balises.

]]> Les éléments qui sont à la fois <nav> et <a>

]]> Erreur : c'est nav,a (virgule) qui ciblerait
les deux. Et un élément ne peut être à
la fois nav et a.

]]> Le premier <a> après un <nav>

]]> Erreur : l'espace ne désigne pas « le
suivant ». nav a cible les liens situés à
l'intérieur d'un <nav>, à n'importe quelle
profondeur.

]]> Aucun élément

]]> Le sélecteur nav a
est parfaitement valide
et cible bien des éléments :
tous les liens situés à
l'intérieur d'une zone
de navigation.

]]> CSS : mise en forme — Q17 : Couleurs en CSS Lesquels de ces formats désignent la même couleur (rouge pur) ?

]]> Quatre formats principaux : nommés (148
noms), hex (#rrggbb), rgb/rgba (transparence
via le 4ᵉ canal), hsl/hsla (teinte/saturation/
luminosité, plus intuitif).

]]> 1.0 0.0 0 true true abc red, #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)

]]> Bonne réponse : tous ces formats
représentent le rouge pur. Choisir selon
ce qui est plus lisible/calculable.

]]> Seulement red et #ff0000, pas les deux autres

]]> Erreur : les quatre sont équivalents.

]]> Aucun, chacun donne une nuance de rouge différente

]]> Au moins l'un de ces
formats représente bien
du rouge ; en réalité,
tous les quatre désignent
exactement la même couleur.

]]> Seulement la notation rgb(255, 0, 0), la plus précise

]]> La notation rgb(255, 0, 0)
n'est pas la seule à
désigner du rouge pur.
Le mot-clé red, le code
hexadécimal #ff0000 et
la notation HSL produisent
le même résultat.

]]> CSS : mise en forme — Q18 : Deux règles de même spécificité `

css

p { color: blue; }

p { color: red; }

html

<p>Texte</p>

`
Quelle est la couleur du texte ?

]]> La cascade compare d'abord la spécificité ;
en cas d'égalité (ici deux sélecteurs
d'élément), c'est l'ordre d'apparition qui
décide : la dernière règle écrite l'emporte.

]]> 1.0 0.0 0 true true abc Rouge, car la dernière règle écrite l'emporte

]]> Bonne réponse : les deux sélecteurs p
ont exactement la même spécificité
(0,0,1). À égalité, c'est l'ordre
d'écriture qui départage, à savoir la
dernière règle déclarée.

]]> Bleu, car la première règle rencontrée est prioritaire

]]> Erreur classique : croire que la première
déclaration « verrouille » la propriété.
C'est l'inverse, à spécificité égale la
dernière règle écrite écrase la
précédente.

]]> Noir, car les deux règles s'annulent mutuellement

]]> Erreur : un conflit CSS n'annule jamais
les règles en jeu. La cascade est faite
précisément pour trancher, ici en faveur
de la dernière règle écrite.

]]> Cela dépend du navigateur qui affiche la page

]]> Erreur : la résolution de la cascade est
normalisée et identique dans tous les
navigateurs. À spécificité égale, la
dernière règle écrite l'emporte partout.

]]> CSS : mise en forme — Q20 : Plusieurs classes Un élément peut-il avoir plusieurs classes ?

]]> Plusieurs classes sur un même élément
permettent de composer la mise en forme :
chaque classe apporte ses propriétés, par
exemple class="bouton important".

]]> 1.0 0.0 0 true true abc Oui, séparées par des virgules simples

]]> Erreur : l'attribut class est découpé
sur les espaces, la virgule n'est pas un
séparateur. class="bouton,primaire"
définirait une seule classe nommée
« bouton,primaire ».

]]> Non, il faut utiliser un id

]]> Erreur : id et class sont indépendants.

]]> Non, une seule par élément

]]> Erreur : on peut en mettre plusieurs.

]]> Oui, séparées par des espaces

]]> Bonne réponse : pratique pour combiner
des styles modulaires. Chaque classe est
appliquée indépendamment.

]]> CSS : mise en forme — Q21 : Style ne s'applique pas Mon CSS ne semble pas s'appliquer à un élément.
Quelles sont les causes les plus probables ?

]]> Réflexe : ouvrir l'inspecteur (F12),
sélectionner l'élément, regarder l'onglet
« Styles » pour voir quelles règles
s'appliquent et lesquelles sont surchargées.

]]> 1.0 0.0 0 true true abc HTML5 ne supporte tout simplement pas du tout CSS

]]> Erreur : c'est l'inverse.

]]> Il faut redémarrer le serveur web après chaque modification

]]> Possiblement (cache navigateur), mais
rarement la cause profonde.

]]> Faute de frappe, surcharge, ou fichier non chargé

]]> Bonne réponse : trois pistes classiques.
Outils de débogage : inspecteur du
navigateur (F12), onglet « Computed »
montre les styles appliqués réellement et
d'où ils viennent.

]]> Le CSS est trop lent et n'a pas fini de s'appliquer

]]> Le moteur de rendu CSS
applique les règles
quasi instantanément.
Si un style ne s'affiche
pas, la cause est presque
toujours un sélecteur
erroné, une règle plus
spécifique ou un fichier
mal chargé.

]]> CSS : mise en forme — Q25 : Synthèse Parmi les affirmations suivantes sur CSS,
laquelle est fausse ?

]]> Mnémonique : .classe = catégorie (peut
regrouper N éléments) ; #id = identifiant
(un seul). À ne pas confondre.

]]> 1.0 0.0 0 true true abc CSS sépare la présentation de la structure (HTML)

]]> Vrai : principe fondamental.

]]> Un sélecteur de classe cible un seul élément à la fois

]]> Faux (donc bonne réponse) : une classe
(sélecteur préfixé par .) peut être
appliquée à plusieurs éléments. C'est le
id qui est unique par convention.

]]> Le modèle de boîte CSS comprend contenu, padding, bordure, marge

]]> Vrai : modèle fondamental.

]]> La spécificité hiérarchise les sélecteurs : id > classe > élément

]]> Vrai : règle de la cascade.

]]> CSS : mise en forme — Q26 : Largeur totale d'une boîte On applique le style suivant à un paragraphe :

`css p { width: 200px; padding: 10px; border: 2px solid black; margin: 15px; }`

Quelle largeur totale ce paragraphe occupe-t-il
horizontalement, marges comprises ?

]]> La propriété width fixe la largeur du contenu.
Padding, bordure et marge s'ajoutent de chaque
côté : la boîte occupe
200 + 2 × 10 + 2 × 2 + 2 × 15 = 254 px.

]]> 1.0 0.0 0 true true abc 227 px

]]> Erreur : ce calcul (200 + 10 + 2 + 15) ne
compte chaque épaisseur qu'une fois. Padding,
bordure et marge s'appliquent des deux
côtés de la boîte, il faut donc les
compter deux fois chacun.

]]> 224 px

]]> Erreur : ce calcul (200 + 2 × 10 + 2 × 2)
oublie la marge. Même extérieure à la
bordure, elle fait partie de la place occupée
par l'élément dans la page.

]]> 200 px

]]> Erreur : width ne désigne que la largeur du
contenu. Padding, bordure et marge
s'ajoutent autour.

]]> 254 px

]]> Bonne réponse : de part et d'autre du contenu,
chaque couche compte deux fois, soit
200 + 2 × 10 + 2 × 2 + 2 × 15 = 254 px.

]]> CSS : mise en forme — Q22 : Quelle règle l'emporte Considérez le code HTML suivant :

<p class="alerte" id="principal">Texte</p>

Trois règles CSS sont définies dans la même feuille de style :

- p { color: blue; }
- .alerte { color: orange; }
- #principal { color: red; }

De quelle couleur le mot « Texte » s'affichera-t-il ?

]]> La spécificité d'un sélecteur se calcule à partir
du nombre d'identifiants, de classes et d'éléments
qu'il contient. Un identifiant pèse plus qu'une
classe, qui pèse plus qu'un sélecteur d'élément.
Le style en ligne (style="...") est encore
au-dessus, et !important permet d'outrepasser
la cascade naturelle (à utiliser avec parcimonie).

]]> 1.0 0.0 0 true true abc Orange, car la règle de la classe est la deuxième dans la feuille

]]> Erreur : l'ordre des règles n'intervient qu'en cas
d'égalité de spécificité. Ici, l'identifiant est
plus spécifique que la classe, donc l'ordre n'a
pas d'effet.

]]> Bleu, car le sélecteur d'élément p est le plus général donc le plus prioritaire

]]> Erreur : c'est exactement l'inverse. En CSS, plus
un sélecteur est précis, plus il est prioritaire.
Le sélecteur d'élément est le moins spécifique.

]]> Rouge, car le sélecteur d'identifiant a la spécificité la plus élevée

]]> Bonne réponse : lorsqu'aucune règle n'est marquée
!important et qu'il n'y a pas de style en ligne,
c'est la spécificité qui départage. L'identifiant
(#principal) l'emporte sur la classe (.alerte),
qui l'emporte elle-même sur le sélecteur d'élément
(p).

]]> La couleur est indéterminée car trois règles différentes s'appliquent en même temps

]]> Erreur : la cascade CSS définit précisément un
ordre de priorité (spécificité, puis ordre
d'apparition) qui rend la résolution toujours
déterministe.

]]> CSS : mise en forme — Q23 : La zone couverte par la couleur de fond Un paragraphe reçoit le style suivant :

`css p { background-color: lightblue; padding: 20px; border: 2px solid black; margin: 30px; }`

Quelle partie de la boîte apparaît en bleu clair à l'écran ?

]]> La couleur de fond couvre le contenu et le padding,
jusqu'à la bordure ; la marge, extérieure, reste
transparente. Pour écarter le texte du bord d'un fond
coloré, on utilise donc padding, et pour écarter deux
boîtes, margin.

]]> 1.0 0.0 0 true true abc Le contenu seul, derrière le texte

]]> Erreur : le padding fait partie de la boîte et
prend la couleur de fond. C'est justement lui qui
écarte le texte de la bordure sur un fond coloré.

]]> Le contenu et le padding, à l'intérieur de la bordure

]]> Bonne réponse : la couleur de fond remplit la
boîte jusqu'à sa bordure, padding compris. La
marge, à l'extérieur de la bordure, reste
transparente.

]]> Toute la largeur de la page, sur la hauteur du paragraphe

]]> Erreur : la couleur de fond s'arrête à la bordure
de la boîte ; la marge de 30 px qui l'entoure
reste transparente.

]]> Le contenu, le padding et la marge

]]> Erreur : la marge est un espace extérieur à la
bordure ; elle reste transparente et laisse voir
le fond de l'élément parent.

]]> CSS : mise en forme — Q27 : La couleur de fond d'un élément Quelle propriété CSS donne un fond jaune à un paragraphe ?

]]> color pour le texte, background-color pour le fond : deux
propriétés distinctes.

]]> 1.0 0.0 0 true true abc color: yellow;

]]> Erreur : color change la couleur des caractères, pas du fond.

]]> background: text yellow;

]]> Erreur : cette valeur n'existe pas.

]]> fond: jaune;

]]> Erreur : les propriétés et les noms de couleurs CSS sont en
anglais.

]]> background-color: yellow;

]]> Bonne réponse : background-color colore l'arrière-plan de la
boîte, par opposition à color, qui colore le texte.

]]> CSS : mise en forme — Q28 : Centrer un titre Quelle règle centre horizontalement le texte de tous les titres de
niveau 1 ?

]]> text-align accepte left, right, center et justify.

]]> 1.0 0.0 0 true true abc center { h1 }

]]> Erreur : la syntaxe est inversée ; le sélecteur précède les
accolades, qui contiennent des déclarations.

]]> h1 { position: center; }

]]> Erreur : position gère le mode de placement d'une boîte, et
center n'en est pas une valeur.

]]> h1 { text-align: center; }

]]> Bonne réponse : text-align règle l'alignement horizontal du
texte à l'intérieur de sa boîte.

]]> h1 { align: center; }

]]> Erreur : align n'est pas une propriété CSS.

]]> CSS : mise en forme — Q29 : Marge intérieure ou marge extérieure Quelle différence entre padding et margin ?

]]> Le modèle de boîte distingue quatre zones : contenu, padding,
bordure, margin.

]]> 1.0 0.0 0 true true abc padding est à l'intérieur de la bordure, margin à l'extérieur

]]> Bonne réponse : de l'intérieur vers l'extérieur, une boîte
empile le contenu, le padding, la bordure puis la margin,
qui écarte les boîtes voisines.

]]> padding concerne le texte, margin les images et les tableaux

]]> Erreur : les deux propriétés s'appliquent à toute boîte, quel
que soit son contenu.

]]> Aucune, les deux propriétés étant synonymes et interchangeables

]]> Erreur : l'une est à l'intérieur de la bordure, l'autre à
l'extérieur ; le fond coloré couvre le padding, pas la
margin.

]]> padding se mesure en pixels, margin en pourcentages seulement

]]> Erreur : les deux acceptent les mêmes unités.

]]> CSS : mise en forme — Q30 : Une police avec solution de repli Que signifie la déclaration font-family: Garamond, serif; ?

]]> Terminer font-family par une famille générique, serif,
sans-serif ou monospace, garantit un rendu acceptable partout.

]]> 1.0 0.0 0 true true abc Une police unique nommée « Garamond, serif »

]]> Erreur : la virgule sépare des choix successifs.

]]> Garamond si elle est installée, sinon une police à empattements

]]> Bonne réponse : la liste est lue de gauche à droite ; serif
est une famille générique que tout navigateur sait fournir.

]]> Mélanger les deux polices dans le texte, un mot sur deux

]]> Erreur : une seule police est utilisée, la première disponible.

]]> Garamond pour les titres et une police serif pour le reste

]]> Erreur : la déclaration ne distingue pas les éléments ; elle
donne un ordre de préférence.

]]> CSS : mise en forme — Q31 : Faire disparaître un élément Quel effet a la déclaration display: none; sur un élément ?

]]> display décide comment une boîte participe à la page : block,
inline, ou none pour la retirer.

]]> 1.0 0.0 0 true true abc L'élément est supprimé du code HTML de la page

]]> Erreur : le HTML n'est pas modifié ; seul l'affichage change,
et une autre règle peut le faire réapparaître.

]]> L'élément est affiché sans bordure ni fond

]]> Erreur : display: none n'est pas une mise en forme allégée,
c'est une disparition complète.

]]> L'élément disparaît et n'occupe plus de place

]]> Bonne réponse : l'élément est retiré du flux, comme s'il
n'existait pas ; les éléments suivants remontent.

]]> L'élément devient transparent mais garde sa place

]]> Erreur : garder la place est le comportement de
visibility: hidden, pas de display: none.

]]> CSS : mise en forme — Q32 : Une règle pour plusieurs balises Comment appliquer la même couleur aux titres h1 et h2 avec une
seule règle ?

]]> La virgule évite de répéter une règle ; l'espace, lui, exprime une
relation de descendance.

]]> 1.0 0.0 0 true true abc h1 & h2 { color: navy; }

]]> Erreur : & n'est pas un séparateur de sélecteurs.

]]> h1 + h2 { color: navy; }

]]> Erreur : + vise un h2 placé juste après un h1, pas les
deux.

]]> h1 h2 { color: navy; }

]]> Erreur : sans virgule, ce sélecteur vise les h2 situés à
l'intérieur d'un h1, ce qui n'existe pas.

]]> h1, h2 { color: navy; }

]]> Bonne réponse : la virgule regroupe plusieurs sélecteurs qui
partagent les mêmes déclarations.

]]> CSS : mise en forme — Q33 : Un identifiant unique Pourquoi un même id ne doit-il apparaître qu'une fois dans une
page ?

]]> Pour un style partagé par plusieurs éléments, on emploie une
classe ; l'id est réservé à l'élément unique.

]]> 1.0 0.0 0 true true abc Parce que les id sont réservés aux champs de formulaire

]]> Erreur : les id servent partout, dans les formulaires comme
ailleurs.

]]> Parce que le navigateur refuse d'afficher la page sinon

]]> Erreur : le navigateur affiche quand même la page, mais son
comportement devient imprévisible.

]]> Parce qu'un id désigne un seul élément, en CSS comme en JavaScript

]]> Bonne réponse : document.getElementById ne renvoie qu'un
élément, et un lien #id cible un seul endroit. Deux éléments
de même id rendent la page invalide.

]]> Parce qu'un id ne peut porter que sur un titre de la page

]]> Erreur : n'importe quel élément peut recevoir un id.

]]> CSS : mise en forme — Q34 : Deux sélecteurs qui se ressemblent Quelle différence entre les sélecteurs .rouge p et p.rouge ?

]]> A B vise les B à l'intérieur d'un A ; A.b vise les A qui
portent la classe b. Deux relations différentes.

]]> 1.0 0.0 0 true true abc Aucune, l'ordre des termes et les espaces n'ayant pas d'importance

]]> Erreur : l'espace change tout ; les deux sélecteurs visent des
éléments différents.

]]> p.rouge vise les paragraphes dont le texte est affiché en rouge

]]> Erreur : un sélecteur ne lit pas les couleurs ; il lit les
classes de l'élément.

]]> .rouge p est une erreur de syntaxe, un espace étant interdit

]]> Erreur : c'est un sélecteur descendant tout à fait valide.

]]> Le premier vise les p dans un .rouge, le second les p de classe rouge

]]> Bonne réponse : l'espace exprime la descendance, l'absence
d'espace cumule les conditions sur un même élément.

]]> CSS : mise en forme — Q35 : Une propriété qui s'hérite, une autre non Une règle div { color: green; border: 1px solid black; } est
appliquée à un div contenant un paragraphe. Qu'observe-t-on sur
ce paragraphe ?

]]> Les propriétés liées au texte s'héritent, celles liées à la boîte,
bordures, marges, fond, ne s'héritent pas.

]]> 1.0 0.0 0 true true abc Il est encadré mais son texte reste noir

]]> Erreur : c'est l'inverse, la couleur s'hérite et la bordure non.

]]> Son texte est vert, mais il n'a pas de bordure propre

]]> Bonne réponse : color est héritée par les descendants, alors
que border ne s'applique qu'à l'élément visé. Seul le div est
encadré.

]]> Il n'est pas concerné, la règle ne visant que le div

]]> Erreur : les propriétés de texte comme color se transmettent
aux descendants.

]]> Son texte est vert et il est entouré d'une bordure

]]> Erreur : la bordure ne s'hérite pas ; le paragraphe n'en reçoit
aucune.

]]> CSS : mise en forme — Q36 : Une classe sur des balises différentes Peut-on donner la classe important à la fois à un paragraphe et à
un titre h2 ?

]]> Une classe regroupe des éléments par rôle, pas par balise : c'est
ce qui la rend réutilisable.

]]> 1.0 0.0 0 true true abc Non, il faut deux classes de noms différents

]]> Erreur : partager une classe est précisément le moyen d'éviter
de dupliquer une règle.

]]> Non, une classe est liée à une seule balise

]]> Erreur : rien ne lie une classe à une balise particulière.

]]> Oui, mais seul le premier élément sera stylé

]]> Erreur : tous les éléments portant la classe reçoivent le style.

]]> Oui, une classe s'applique à n'importe quelle balise

]]> Bonne réponse : la classe est indépendante du type d'élément ;
.important { color: red; } touchera les deux.

]]> CSS : mise en forme — Q37 : Séparer deux déclarations Dans p { color: red; font-size: 18px; }, à quoi servent les
points-virgules ?

]]> Une règle CSS : un sélecteur, des accolades, des déclarations
propriété: valeur;.

]]> 1.0 0.0 0 true true abc À séparer la propriété de sa valeur

]]> Erreur : c'est le rôle des deux-points.

]]> À séparer les déclarations d'une règle

]]> Bonne réponse : chaque déclaration, propriété et valeur, se
termine par un point-virgule, ce qui permet d'en enchaîner
plusieurs.

]]> À terminer la règle, comme l'accolade

]]> Erreur : la règle se termine par l'accolade fermante.

]]> Ils sont facultatifs partout dans la feuille

]]> Erreur : entre deux déclarations, le point-virgule est
obligatoire ; seul le dernier peut être omis.

]]> CSS : mise en forme — Q38 : Une propriété mal orthographiée Nora écrit p { colour: red; } et constate que ses paragraphes
restent noirs. Pourquoi ?

]]> L'inspecteur du navigateur signale les propriétés non reconnues :
c'est le premier outil pour retrouver une faute de frappe.

]]> 1.0 0.0 0 true true abc Le navigateur affiche un message d'erreur et s'arrête

]]> Erreur : aucun message n'apparaît, ce qui rend ce type de faute
difficile à repérer.

]]> Toute la feuille de style est désactivée par précaution

]]> Erreur : seule la déclaration fautive est ignorée.

]]> La couleur est appliquée en anglais britannique seulement

]]> Erreur : les propriétés CSS ont une seule orthographe, color.

]]> La déclaration est ignorée, colour n'étant pas une propriété

]]> Bonne réponse : le CSS ne signale pas les erreurs ; une propriété
inconnue est simplement ignorée, et le reste de la feuille
continue de s'appliquer.

]]> CSS : mise en forme — Q39 : Changer une couleur sur cinquante pages Le site du lycée compte cinquante pages. La couleur des titres doit
changer partout. Quelle organisation du CSS rend ce changement
immédiat ?

]]> Séparer le contenu du style, et centraliser le style dans un fichier
partagé, c'est ce qui rend un site maintenable.

]]> 1.0 0.0 0 true true abc Un attribut style sur chaque titre de chaque page

]]> Erreur : il faudrait retrouver et modifier chaque titre, avec le
risque d'en oublier.

]]> Une balise style dans l'en-tête de chacune des cinquante pages

]]> Erreur : cinquante copies de la même règle, donc cinquante
modifications.

]]> Un script JavaScript qui change la couleur au chargement

]]> Erreur : le résultat serait obtenu, mais au prix d'un détour
inutile ; le CSS externe fait cela directement.

]]> Une feuille de style externe partagée par toutes les pages

]]> Bonne réponse : modifier une ligne du fichier CSS commun change
les cinquante pages. C'est la raison d'être des feuilles
externes.

]]>