Résumé du module CSS

Félicitations, voyageur ! Nous avons parcouru ensemble tout le module consacré au CSS - le langage de style qui transforme les hiéroglyphes HTML bruts en magnifiques peintures sur les murs des temples. Il est temps de faire un bref résumé des concepts les plus importants que tu as maîtrisés.

Ce que tu sais déjà faire

Les bases du CSS

• Créer des règles CSS avec un sélecteur, une propriété et une valeur
• Lier le CSS au HTML via <link> et <style>
• Les commentaires CSS : /* commentaire */
• Tu comprends que CSS signifie Cascading Style Sheets - « cascading » (en cascade) signifie que les styles peuvent s'outrepasser les uns les autres

Les sélecteurs - pointer précisément vers les éléments

• Sélecteurs d'élément : h1, p, div - comme pointer vers un type de hiéroglyphe
• Sélecteurs de classe : .class - comme pointer vers un groupe de scribes ayant la même spécialisation
• Sélecteurs d'ID : #identifier - comme pointer vers un pharaon précis par son nom
• Sélecteurs descendant : div p, .container h2 - éléments à l'intérieur d'autres éléments
• Regrouper des sélecteurs : h1, h2, h3 { ... } - une règle pour plusieurs éléments
• Sélecteurs avancés : +, >, ~, sélecteurs d'attribut - contrôle précis

Couleurs et polices

• Couleurs : noms (red), hex (#ff0000), rgb (rgb(255, 0, 0)), hsl
• Polices : font-family, font-size, font-weight
• Mise en forme du texte : text-align, text-transform

Modèle de boîte - anatomie d'un élément

Le modèle de boîte CSS est le fondement de la mise en page, tout comme les blocs de pierre sont le fondement d'une pyramide :

• padding - espacement interne (comme la distance entre le mur et le sarcophage)
• margin - espacement externe (comme l'espace entre les pyramides)
• border - bordure (comme les murs défensifs d'un temple)
• box-sizing: border-box - dimensions prévisibles (standard moderne)

Display et positionnement

• display: block, inline, inline-block, none
• position: static, relative, absolute, fixed, sticky
• z-index - couches d'éléments (comme les couches successives de peinture sur un mur de temple)

Cascade et spécificité

• Ordre des sources de style - la cascade décide quel style l'emporte
• La spécificité se compare groupe par groupe : d'abord le nombre d'ID, puis de classes, enfin d'éléments - un seul sélecteur d'ID l'emporte sur n'importe quel nombre de classes. Un style en ligne bat tous les sélecteurs, et !important bat les déclarations normales
• Héritage des propriétés - les éléments enfants peuvent hériter des styles de leurs parents

Pseudo-classes et pseudo-éléments

• :hover, :focus, :active, :visited - réaction à l'interaction de l'utilisateur
• :first-child, :nth-child(), :last-child - sélection selon la position
• ::before, ::after - ajout de contenu décoratif
• ::first-line, ::first-letter - stylisation de fragments de texte

Effets visuels

• Filtres (filter) : blur(), grayscale(), sepia() et d'autres effets
• Transformations (transform) : translate(), rotate(), scale()
• Préfixes navigateur et Autoprefixer, qui les ajoute pour toi

Analogies égyptiennes

Dans ce module, nous avons comparé le CSS à l'art de décorer les temples égyptiens :

• Les sélecteurs sont comme pointer vers le mur que tu veux décorer
• Les propriétés et les valeurs sont comme choisir les couleurs des pigments et les motifs
• Le modèle de boîte est comme planifier l'espace autour de chaque peinture
• La cascade est comme recouvrir d'anciennes peintures avec de nouvelles couches
• La spécificité est comme la hiérarchie - l'ordre du pharaon (ID) l'emporte sur l'avis d'un fonctionnaire (classe)

Et ensuite ?

Tu as maîtrisé les bases du CSS, qui sont le fondement de chaque beau site web. Dans les modules suivants, tu apprendras des outils encore plus puissants :

• Flexbox - disposition flexible des éléments
• CSS Grid - création de grilles de mise en page complexes
• Animations CSS - donner vie aux éléments de la page
• Responsive Design - adaptation aux différents écrans

Projet final

Ci-dessous, tu trouveras un éditeur où tu peux tester toutes les techniques CSS que tu as apprises. Crée une page sur les dieux égyptiens, en utilisant autant de propriétés CSS de ce module que possible ! Utilise différents sélecteurs, couleurs, polices, le modèle de boîte et le positionnement.

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Récapitulatif CSS - Page sur l'Égypte</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <header class="page-header">
11        <h1>Les dieux de l'Égypte antique</h1>
12        <nav>
13            <a href="#ra">Rê</a>
14            <a href="#anubis">Anubis</a>
15            <a href="#isis">Isis</a>
16        </nav>
17    </header>
18
19    <main>
20        <section id="ra" class="god-card">
21            <h2>Rê - Dieu du soleil</h2>
22            <p>Rê était l'un des dieux égyptiens les plus importants. Chaque jour, il naviguait dans le ciel à bord de sa barque solaire.</p>
23        </section>
24
25        <section id="anubis" class="god-card">
26            <h2>Anubis - Gardien des morts</h2>
27            <p>Anubis, le dieu à tête de chacal, conduisait les âmes des morts vers l'au-delà.</p>
28        </section>
29
30        <section id="isis" class="god-card">
31            <h2>Isis - Déesse de la magie</h2>
32            <p>Isis était une puissante déesse de la magie et de la maternité, vénérée dans toute l'Égypte.</p>
33        </section>
34    </main>
35
36    <footer class="page-footer">
37        <p>&copy; Égypte antique - Récapitulatif CSS</p>
38    </footer>
39</body>
40</html>