\documentclass[10pt,aspectratio=169]{beamer}

% --- Thème ---
\usetheme[language=french]{Celestia}

% Avec [allowframebreaks] sur les frames de questions, Beamer ajoute
% par défaut « (1) », « (2) », « (3) »... sur chaque sous-slide. On
% supprime entièrement cette annotation : un template vide pour
% « frametitle continuation ». L'enseignant identifie visuellement la
% continuation par le contenu de la slide. (Les variantes [from second]
% et [roman] interagissent mal avec un titre contenant \textemdash{}
% sous Celestia : elles déclenchent une erreur « Missing $ inserted ».)
\setbeamertemplate{frametitle continuation}{}

\subject{Numérique et sciences informatiques}
\title{CSS : mise en forme}
\subtitle{QCM}
\author{Première}
\date{\today}

\begin{document}

\begin{frame}
    \titlepage
\end{frame}

% Q1 - Réponse en B
\begin{frame}[fragile]{Question 1 \textemdash{} Que signifie CSS ?}
    Que signifie l'acronyme \textbf{CSS} ?\medskip
    \begin{itemize}
        \item[A.] Color and Style System
        \item[\alert<2>{B.}] \alert<2>{Cascading Style Sheets}
        \item[C.] Computer Style Sheet
        \item[D.] Centralized Style Standard
    \end{itemize}
\end{frame}

% Q2 - Réponse en A
\begin{frame}[fragile,allowframebreaks]{Question 2 \textemdash{} Syntaxe d'une règle}
    Quelle est la structure d'une règle CSS ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
sélecteur { propriété: valeur; ... }
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<sélecteur propriété="valeur">
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
sélecteur (propriété = valeur)
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
sélecteur -> propriété -> valeur
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q2 - Réponse en A
\begin{frame}[fragile,allowframebreaks]{Question 2 \textemdash{} Syntaxe d'une règle}
    Quelle est la structure d'une règle CSS ?\medskip
    \begin{itemize}
        \item[\alert{A.}]~\\
\begin{lstlisting}
sélecteur { propriété: valeur; ... }
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<sélecteur propriété="valeur">
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
sélecteur (propriété = valeur)
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
sélecteur -> propriété -> valeur
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q3 - Réponse en A
\begin{frame}[fragile]{Question 3 \textemdash{} Sélecteur d'élément}
    Comment écrire une règle qui s'applique à
\textbf{tous} les paragraphes \texttt{<p>} ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{p \{ ... \}}}
        \item[B.] \texttt{<p> \{ ... \}}
        \item[C.] \texttt{\#p \{ ... \}}
        \item[D.] \texttt{.p \{ ... \}}
    \end{itemize}
\end{frame}

% Q4 - Réponse en D
\begin{frame}[fragile]{Question 4 \textemdash{} Sélecteur de classe}
    Comment cibler les éléments ayant
\texttt{class="bouton"} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{bouton \{ ... \}}
        \item[B.] \texttt{@bouton \{ ... \}}
        \item[C.] \texttt{\#bouton \{ ... \}}
        \item[\alert<2>{D.}] \alert<2>{\texttt{.bouton \{ ... \}}}
    \end{itemize}
\end{frame}

% Q5 - Réponse en D
\begin{frame}[fragile]{Question 5 \textemdash{} Sélecteur d'id}
    Comment cibler l'élément ayant \texttt{id="navigation"} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{navigation \{ ... \}}
        \item[B.] \texttt{.navigation \{ ... \}}
        \item[C.] \texttt{*navigation \{ ... \}}
        \item[\alert<2>{D.}] \alert<2>{\texttt{\#navigation \{ ... \}}}
    \end{itemize}
\end{frame}

% Q6 - Réponse en B
\begin{frame}[fragile]{Question 6 \textemdash{} Couleur du texte}
    Quelle propriété change la \textbf{couleur du texte} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{background}
        \item[\alert<2>{B.}] \alert<2>{\texttt{color}}
        \item[C.] \texttt{font-color}
        \item[D.] \texttt{text-color}
    \end{itemize}
\end{frame}

% Q7 - Réponse en A
\begin{frame}[fragile]{Question 7 \textemdash{} Intégrer du CSS}
    Quelle est la \textbf{meilleure pratique} pour
intégrer du CSS dans un projet HTML ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{Mettre tout le CSS dans un fichier \texttt{.css} séparé, lié via \texttt{<link>} dans \texttt{<head>}}
        \item[B.] Mettre du CSS dans chaque attribut \texttt{style="..."}
        \item[C.] Mettre tout le CSS dans une balise \texttt{<style>} à la fin du \texttt{<body>}
        \item[D.] Écrire le CSS dans le code JavaScript
    \end{itemize}
\end{frame}

% Q8 - Réponse en A
\begin{frame}[fragile]{Question 8 \textemdash{} Taille de texte}
    Quelle propriété change la \textbf{taille du texte} ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{font-size}}
        \item[B.] \texttt{large}
        \item[C.] \texttt{size}
        \item[D.] \texttt{text-size}
    \end{itemize}
\end{frame}

% Q9 - Réponse en A
\begin{frame}[fragile]{Question 9 \textemdash{} Commentaires CSS}
    Comment écrire un \textbf{commentaire} en CSS ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{/\textit{ commentaire }/}}
        \item[B.] \texttt{// commentaire}
        \item[C.] \texttt{-- commentaire}
        \item[D.] \texttt{\# commentaire}
    \end{itemize}
\end{frame}

% Q10 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 10 \textemdash{} Lien vers fichier CSS}
    Comment lier un fichier \texttt{style.css} à une page
HTML ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
<import "style.css">
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<style src="style.css">
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
<css href="style.css" />
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
<link rel="stylesheet" href="style.css">
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q10 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 10 \textemdash{} Lien vers fichier CSS}
    Comment lier un fichier \texttt{style.css} à une page
HTML ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
<import "style.css">
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<style src="style.css">
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
<css href="style.css" />
\end{lstlisting}

        \item[\alert{D.}]~\\
\begin{lstlisting}
<link rel="stylesheet" href="style.css">
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q11 - Réponse en C
\begin{frame}[fragile]{Question 11 \textemdash{} Modèle de boîte}
    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) ?\medskip
    \begin{itemize}
        \item[A.] bordure, marge, padding, contenu
        \item[B.] padding, contenu, marge, bordure
        \item[\alert<2>{C.}] \alert<2>{contenu, padding, bordure, marge}
        \item[D.] marge, contenu, bordure, padding
    \end{itemize}
\end{frame}

% Q12 - Réponse en C
\begin{frame}[fragile]{Question 12 \textemdash{} Cascade et priorité}
    Si deux règles s'appliquent au même élément,
laquelle l'emporte ?\medskip
    \begin{itemize}
        \item[A.] Au hasard
        \item[B.] Celle ayant le plus court sélecteur
        \item[\alert<2>{C.}] \alert<2>{Celle ayant la plus grande spécificité (id > classe > élément), ou à spécificité égale, la dernière écrite}
        \item[D.] La première écrite dans le fichier
    \end{itemize}
\end{frame}

% Q13 - Réponse en C
\begin{frame}[fragile]{Question 13 \textemdash{} Héritage}
    Que signifie qu'une propriété CSS est
\textbf{héritée} ?\medskip
    \begin{itemize}
        \item[A.] Elle ne fonctionne que sur le premier élément
        \item[B.] Elle s'applique à tous les éléments de la page
        \item[\alert<2>{C.}] \alert<2>{Elle est transmise du parent à ses enfants dans l'arbre HTML, sauf surcharge}
        \item[D.] Elle est interdite par CSS3
    \end{itemize}
\end{frame}

% Q14 - Réponse en A
\begin{frame}[fragile]{Question 14 \textemdash{} Unités CSS}
    Quelle unité est la plus adaptée pour une
taille de texte qui s'\textbf{adapte} à la taille
du parent ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{em} ou \texttt{rem}}
        \item[B.] \texttt{\%}
        \item[C.] \texttt{cm}
        \item[D.] \texttt{px} (pixel)
    \end{itemize}
\end{frame}

% Q15 - Réponse en B
\begin{frame}[fragile]{Question 15 \textemdash{} Sélecteurs combinés}
    Que cible le sélecteur \texttt{nav a} (avec un
espace) ?\medskip
    \begin{itemize}
        \item[A.] Le premier \texttt{<a>} après un \texttt{<nav>}
        \item[\alert<2>{B.}] \alert<2>{Tous les \texttt{<a>} descendants d'un \texttt{<nav>} (à n'importe quel niveau d'imbrication)}
        \item[C.] Aucun élément
        \item[D.] Les éléments qui sont à la fois \texttt{<nav>} et \texttt{<a>}
    \end{itemize}
\end{frame}

% Q16 - Réponse en D
\begin{frame}[fragile]{Question 16 \textemdash{} Pseudo-classes}
    À quoi sert \texttt{a:hover \{ color: red; \}} ?\medskip
    \begin{itemize}
        \item[A.] À cacher tous les liens
        \item[B.] À sélectionner tous les liens visités
        \item[C.] À empêcher le clic sur les liens
        \item[\alert<2>{D.}] \alert<2>{À changer la couleur des liens lorsque la souris passe dessus}
    \end{itemize}
\end{frame}

% Q17 - Réponse en A
\begin{frame}[fragile]{Question 17 \textemdash{} Couleurs en CSS}
    Lesquels de ces formats désignent \textbf{la même
couleur} (rouge pur) ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{red}, \texttt{\#ff0000}, \texttt{rgb(255, 0, 0)}, \texttt{hsl(0, 100\%, 50\%)}}
        \item[B.] Seulement \texttt{red} et \texttt{\#ff0000}
        \item[C.] Aucun
        \item[D.] Seulement \texttt{rgb(255, 0, 0)}
    \end{itemize}
\end{frame}

% Q18 - Réponse en B
\begin{frame}[fragile,allowframebreaks]{Question 18 \textemdash{} Trace CSS}
    \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 ?\medskip
    \begin{itemize}
        \item[A.] Bleu (la première règle gagne)
        \item[B.] Rouge (le sélecteur de classe l'emporte sur le sélecteur d'élément)
        \item[C.] Aucune (conflit, le texte reste noir)
        \item[D.] Violet (mélange)
    \end{itemize}
\end{frame}

% Q18 - Réponse en B
\begin{frame}[fragile,allowframebreaks]{Question 18 \textemdash{} Trace CSS}
    \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 ?\medskip
    \begin{itemize}
        \item[A.] Bleu (la première règle gagne)
        \item[\alert{B.}] \alert{Rouge (le sélecteur de classe l'emporte sur le sélecteur d'élément)}
        \item[C.] Aucune (conflit, le texte reste noir)
        \item[D.] Violet (mélange)
    \end{itemize}
\end{frame}

% Q19 - Réponse en C
\begin{frame}[fragile]{Question 19 \textemdash{} Design responsive}
    Qu'est-ce qu'un design \textbf{responsive} ?\medskip
    \begin{itemize}
        \item[A.] Un design qui change de couleur selon l'humeur
        \item[B.] Un site qui répond rapidement
        \item[\alert<2>{C.}] \alert<2>{Un design qui s'adapte automatiquement à différentes tailles d'écran (mobile, tablette, ordinateur)}
        \item[D.] Un design avec animations
    \end{itemize}
\end{frame}

% Q20 - Réponse en C
\begin{frame}[fragile]{Question 20 \textemdash{} Plusieurs classes}
    Un élément peut-il avoir \textbf{plusieurs classes} ?\medskip
    \begin{itemize}
        \item[A.] Oui, séparées par des virgules
        \item[B.] Non, une seule par élément
        \item[\alert<2>{C.}] \alert<2>{Oui : \texttt{class="bouton primaire grand"} (séparées par des espaces)}
        \item[D.] Non, il faut utiliser un id
    \end{itemize}
\end{frame}

% Q21 - Réponse en B
\begin{frame}[fragile]{Question 21 \textemdash{} Style ne s'applique pas}
    Mon CSS ne semble pas s'appliquer à un élément.
Quelles sont les \textbf{causes les plus probables} ?\medskip
    \begin{itemize}
        \item[A.] HTML5 ne supporte pas CSS
        \item[\alert<2>{B.}] \alert<2>{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).}
        \item[C.] Il faut redémarrer le serveur
        \item[D.] Le CSS est lent
    \end{itemize}
\end{frame}

% Q22 - Réponse en D
\begin{frame}[fragile]{Question 22 \textemdash{} Flexbox}
    À quoi sert \texttt{display: flex;} sur un parent ?\medskip
    \begin{itemize}
        \item[A.] À cacher l'élément
        \item[B.] À forcer une bordure
        \item[C.] À empêcher le clic
        \item[\alert<2>{D.}] \alert<2>{À 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{itemize}
\end{frame}

% Q23 - Réponse en D
\begin{frame}[fragile]{Question 23 \textemdash{} Media queries}
    Que fait \texttt{@media (max-width: 600px) \{ ... \}} ?\medskip
    \begin{itemize}
        \item[A.] Empêche l'affichage sur mobile
        \item[B.] Charge un autre fichier CSS
        \item[C.] S'applique uniquement à l'impression
        \item[\alert<2>{D.}] \alert<2>{Applique les règles sur les écrans de 600 pixels de large ou moins (typiquement les téléphones)}
    \end{itemize}
\end{frame}

% Q24 - Réponse en B
\begin{frame}[fragile]{Question 24 \textemdash{} Le mot-clé !important}
    Pourquoi faut-il \textbf{éviter} d'utiliser
\texttt{!important} en CSS ?\medskip
    \begin{itemize}
        \item[A.] Parce qu'il rend les sites lents
        \item[\alert<2>{B.}] \alert<2>{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)}
        \item[C.] Parce que c'est invalide
        \item[D.] Parce qu'il ne fonctionne pas en HTML5
    \end{itemize}
\end{frame}

% Q25 - Réponse en D
\begin{frame}[fragile]{Question 25 \textemdash{} Synthèse}
    Parmi les affirmations suivantes sur CSS,
laquelle est \textbf{fausse} ?\medskip
    \begin{itemize}
        \item[A.] Le modèle de boîte CSS comprend contenu, padding, bordure, marge
        \item[B.] CSS sépare la présentation de la structure (HTML)
        \item[C.] La spécificité hiérarchise les sélecteurs : id > classe > élément
        \item[\alert<2>{D.}] \alert<2>{Un sélecteur de classe (préfixé par \texttt{.}) cible un seul élément à la fois}
    \end{itemize}
\end{frame}

% Q26 - Réponse en C
\begin{frame}[fragile]{Question 26 \textemdash{} Modèle de boîte}
    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 ?\medskip
    \begin{itemize}
        \item[A.] Bordure, marge, padding
        \item[B.] Marge, padding, bordure
        \item[\alert<2>{C.}] \alert<2>{Padding, bordure, marge}
        \item[D.] Bordure, padding, marge
    \end{itemize}
\end{frame}

% Q27 - Réponse en D
\begin{frame}[fragile]{Question 27 \textemdash{} Unités relatives em et rem}
    Quelle est la différence entre les unités CSS \texttt{em}
et \texttt{rem} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{em} est en pixels, \texttt{rem} est en pourcentage
        \item[B.] \texttt{em} ne fonctionne que sur les polices, \texttt{rem} que sur les marges
        \item[C.] Aucune, ce sont deux noms équivalents
        \item[\alert<2>{D.}] \alert<2>{\texttt{em} est relatif à la taille du parent ; \texttt{rem} est relatif à la taille de la racine (élément \texttt{<html>})}
    \end{itemize}
\end{frame}

% Q28 - Réponse en A
\begin{frame}[fragile]{Question 28 \textemdash{} Spécificité d'un sélecteur}
    Parmi les sélecteurs suivants, lequel a la \textbf{plus
grande spécificité} ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{\#header}}
        \item[B.] \texttt{p}
        \item[C.] \texttt{.menu}
        \item[D.] \texttt{p.menu}
    \end{itemize}
\end{frame}

\begin{frame}[standout]{}
    Fin de l'évaluation
\end{frame}

\end{document}
