\documentclass[a4paper,11pt]{article}

\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[francais,bloc,completemulti]{automultiplechoice}
\usepackage[french]{babel}
\usepackage{amsmath, amssymb}

\title{CSS : mise en forme}
\date{Numérique et sciences informatiques}

\begin{document}

\noindent\textbf{CSS : mise en forme} \hfill \textit{Numérique et sciences informatiques}\\[0.4em]
Nom~: \dotfill\ Prénom~: \dotfill

\bigskip

\element{premierecss}{
  \begin{question}{q01}
    Que signifie l'acronyme \textbf{CSS} ?
    \begin{choices}
    \wrongchoice{Color and Style System}
    \correctchoice{Cascading Style Sheets}
    \wrongchoice{Computer Style Sheet}
    \wrongchoice{Centralized Style Standard}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q02}
    Quelle est la structure d'une règle CSS ?
    \begin{choices}
    \correctchoice{\begin{lstlisting}
sélecteur { propriété: valeur; ... }
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<sélecteur propriété="valeur">
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
sélecteur (propriété = valeur)
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
sélecteur -> propriété -> valeur
\end{lstlisting}
}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q03}
    Comment écrire une règle qui s'applique à
\textbf{tous} les paragraphes \texttt{<p>} ?
    \begin{choices}
    \correctchoice{\texttt{p \{ ... \}}}
    \wrongchoice{\texttt{<p> \{ ... \}}}
    \wrongchoice{\texttt{\#p \{ ... \}}}
    \wrongchoice{\texttt{.p \{ ... \}}}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q04}
    Comment cibler les éléments ayant
\texttt{class="bouton"} ?
    \begin{choices}
    \wrongchoice{\texttt{bouton \{ ... \}}}
    \wrongchoice{\texttt{@bouton \{ ... \}}}
    \wrongchoice{\texttt{\#bouton \{ ... \}}}
    \correctchoice{\texttt{.bouton \{ ... \}}}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q05}
    Comment cibler l'élément ayant \texttt{id="navigation"} ?
    \begin{choices}
    \wrongchoice{\texttt{navigation \{ ... \}}}
    \wrongchoice{\texttt{.navigation \{ ... \}}}
    \wrongchoice{\texttt{*navigation \{ ... \}}}
    \correctchoice{\texttt{\#navigation \{ ... \}}}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q06}
    Quelle propriété change la \textbf{couleur du texte} ?
    \begin{choices}
    \wrongchoice{\texttt{background}}
    \correctchoice{\texttt{color}}
    \wrongchoice{\texttt{font-color}}
    \wrongchoice{\texttt{text-color}}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q07}
    Quelle est la \textbf{meilleure pratique} pour
intégrer du CSS dans un projet HTML ?
    \begin{choices}
    \correctchoice{Mettre tout le CSS dans un fichier \texttt{.css} séparé, lié via \texttt{<link>} dans \texttt{<head>}}
    \wrongchoice{Mettre du CSS dans chaque attribut \texttt{style="..."}}
    \wrongchoice{Mettre tout le CSS dans une balise \texttt{<style>} à la fin du \texttt{<body>}}
    \wrongchoice{Écrire le CSS dans le code JavaScript}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q08}
    Quelle propriété change la \textbf{taille du texte} ?
    \begin{choices}
    \correctchoice{\texttt{font-size}}
    \wrongchoice{\texttt{large}}
    \wrongchoice{\texttt{size}}
    \wrongchoice{\texttt{text-size}}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q09}
    Comment écrire un \textbf{commentaire} en CSS ?
    \begin{choices}
    \correctchoice{\texttt{/\textit{ commentaire }/}}
    \wrongchoice{\texttt{// commentaire}}
    \wrongchoice{\texttt{-- commentaire}}
    \wrongchoice{\texttt{\# commentaire}}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q10}
    Comment lier un fichier \texttt{style.css} à une page
HTML ?
    \begin{choices}
    \wrongchoice{\begin{lstlisting}
<import "style.css">
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<style src="style.css">
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<css href="style.css" />
\end{lstlisting}
}
    \correctchoice{\begin{lstlisting}
<link rel="stylesheet" href="style.css">
\end{lstlisting}
}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q11}
    Dans le \textbf{modèle de boîte} CSS, quels sont les
quatre composants concentriques d'un élément
(de l'intérieur vers l'extérieur) ?
    \begin{choices}
    \wrongchoice{bordure, marge, padding, contenu}
    \wrongchoice{padding, contenu, marge, bordure}
    \correctchoice{contenu, padding, bordure, marge}
    \wrongchoice{marge, contenu, bordure, padding}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q12}
    Si deux règles s'appliquent au même élément,
laquelle l'emporte ?
    \begin{choices}
    \wrongchoice{Au hasard}
    \wrongchoice{Celle ayant le plus court sélecteur}
    \correctchoice{Celle ayant la plus grande spécificité (id > classe > élément), ou à spécificité égale, la dernière écrite}
    \wrongchoice{La première écrite dans le fichier}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q13}
    Que signifie qu'une propriété CSS est
\textbf{héritée} ?
    \begin{choices}
    \wrongchoice{Elle ne fonctionne que sur le premier élément}
    \wrongchoice{Elle s'applique à tous les éléments de la page}
    \correctchoice{Elle est transmise du parent à ses enfants dans l'arbre HTML, sauf surcharge}
    \wrongchoice{Elle est interdite par CSS3}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q14}
    Quelle unité est la plus adaptée pour une
taille de texte qui s'\textbf{adapte} à la taille
du parent ?
    \begin{choices}
    \correctchoice{\texttt{em} ou \texttt{rem}}
    \wrongchoice{\texttt{\%}}
    \wrongchoice{\texttt{cm}}
    \wrongchoice{\texttt{px} (pixel)}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q15}
    Que cible le sélecteur \texttt{nav a} (avec un
espace) ?
    \begin{choices}
    \wrongchoice{Le premier \texttt{<a>} après un \texttt{<nav>}}
    \correctchoice{Tous les \texttt{<a>} descendants d'un \texttt{<nav>} (à n'importe quel niveau d'imbrication)}
    \wrongchoice{Aucun élément}
    \wrongchoice{Les éléments qui sont à la fois \texttt{<nav>} et \texttt{<a>}}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q16}
    À quoi sert \texttt{a:hover \{ color: red; \}} ?
    \begin{choices}
    \wrongchoice{À cacher tous les liens}
    \wrongchoice{À sélectionner tous les liens visités}
    \wrongchoice{À empêcher le clic sur les liens}
    \correctchoice{À changer la couleur des liens lorsque la souris passe dessus}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q17}
    Lesquels de ces formats désignent \textbf{la même
couleur} (rouge pur) ?
    \begin{choices}
    \correctchoice{\texttt{red}, \texttt{\#ff0000}, \texttt{rgb(255, 0, 0)}, \texttt{hsl(0, 100\%, 50\%)}}
    \wrongchoice{Seulement \texttt{red} et \texttt{\#ff0000}}
    \wrongchoice{Aucun}
    \wrongchoice{Seulement \texttt{rgb(255, 0, 0)}}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q18}
    \begin{lstlisting}
p { color: blue; }
.important { color: red; }
\end{lstlisting}
\begin{lstlisting}
<p class="important">Texte</p>
\end{lstlisting}
Quelle est la couleur du texte ?
    \begin{choices}
    \wrongchoice{Bleu (la première règle gagne)}
    \correctchoice{Rouge (le sélecteur de classe l'emporte sur le sélecteur d'élément)}
    \wrongchoice{Aucune (conflit, le texte reste noir)}
    \wrongchoice{Violet (mélange)}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q19}
    Qu'est-ce qu'un design \textbf{responsive} ?
    \begin{choices}
    \wrongchoice{Un design qui change de couleur selon l'humeur}
    \wrongchoice{Un site qui répond rapidement}
    \correctchoice{Un design qui s'adapte automatiquement à différentes tailles d'écran (mobile, tablette, ordinateur)}
    \wrongchoice{Un design avec animations}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q20}
    Un élément peut-il avoir \textbf{plusieurs classes} ?
    \begin{choices}
    \wrongchoice{Oui, séparées par des virgules}
    \wrongchoice{Non, une seule par élément}
    \correctchoice{Oui : \texttt{class="bouton primaire grand"} (séparées par des espaces)}
    \wrongchoice{Non, il faut utiliser un id}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q21}
    Mon CSS ne semble pas s'appliquer à un élément.
Quelles sont les \textbf{causes les plus probables} ?
    \begin{choices}
    \wrongchoice{HTML5 ne supporte pas CSS}
    \correctchoice{Faute de frappe dans le sélecteur (ex. \texttt{.bouton} au lieu de \texttt{.button}), ou règle plus spécifique qui surcharge, ou fichier CSS non chargé (vérifier la console).}
    \wrongchoice{Il faut redémarrer le serveur}
    \wrongchoice{Le CSS est lent}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q22}
    À quoi sert \texttt{display: flex;} sur un parent ?
    \begin{choices}
    \wrongchoice{À cacher l'élément}
    \wrongchoice{À forcer une bordure}
    \wrongchoice{À empêcher le clic}
    \correctchoice{À transformer le parent en conteneur flexible, dont les enfants se disposent en ligne (par défaut) et peuvent être alignés/distribués facilement}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q23}
    Que fait \texttt{@media (max-width: 600px) \{ ... \}} ?
    \begin{choices}
    \wrongchoice{Empêche l'affichage sur mobile}
    \wrongchoice{Charge un autre fichier CSS}
    \wrongchoice{S'applique uniquement à l'impression}
    \correctchoice{Applique les règles sur les écrans de 600 pixels de large ou moins (typiquement les téléphones)}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q24}
    Pourquoi faut-il \textbf{éviter} d'utiliser
\texttt{!important} en CSS ?
    \begin{choices}
    \wrongchoice{Parce qu'il rend les sites lents}
    \correctchoice{Parce qu'il outrepasse la cascade normale et rend le code difficile à maintenir et à déboguer (on doit alors mettre \texttt{!important} partout pour gagner)}
    \wrongchoice{Parce que c'est invalide}
    \wrongchoice{Parce qu'il ne fonctionne pas en HTML5}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q25}
    Parmi les affirmations suivantes sur CSS,
laquelle est \textbf{fausse} ?
    \begin{choices}
    \wrongchoice{Le modèle de boîte CSS comprend contenu, padding, bordure, marge}
    \wrongchoice{CSS sépare la présentation de la structure (HTML)}
    \wrongchoice{La spécificité hiérarchise les sélecteurs : id > classe > élément}
    \correctchoice{Un sélecteur de classe (préfixé par \texttt{.}) cible un seul élément à la fois}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q26}
    Dans le modèle de boîte CSS, quel est l'ordre des
espaces autour du contenu, en partant du contenu
vers l'extérieur ?
    \begin{choices}
    \wrongchoice{Bordure, marge, padding}
    \wrongchoice{Marge, padding, bordure}
    \correctchoice{Padding, bordure, marge}
    \wrongchoice{Bordure, padding, marge}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q27}
    Quelle est la différence entre les unités CSS \texttt{em}
et \texttt{rem} ?
    \begin{choices}
    \wrongchoice{\texttt{em} est en pixels, \texttt{rem} est en pourcentage}
    \wrongchoice{\texttt{em} ne fonctionne que sur les polices, \texttt{rem} que sur les marges}
    \wrongchoice{Aucune, ce sont deux noms équivalents}
    \correctchoice{\texttt{em} est relatif à la taille du parent ; \texttt{rem} est relatif à la taille de la racine (élément \texttt{<html>})}
    \end{choices}
  \end{question}
}

\element{premierecss}{
  \begin{question}{q28}
    Parmi les sélecteurs suivants, lequel a la \textbf{plus
grande spécificité} ?
    \begin{choices}
    \correctchoice{\texttt{\#header}}
    \wrongchoice{\texttt{p}}
    \wrongchoice{\texttt{.menu}}
    \wrongchoice{\texttt{p.menu}}
    \end{choices}
  \end{question}
}


\onecopy{1}{
  \shufflegroup{premierecss}
  \insertgroup{premierecss}
}

\end{document}
