diff --git a/web/tp/TP_CSS.md b/web/tp/TP_CSS.md new file mode 100644 index 0000000..2d66e11 --- /dev/null +++ b/web/tp/TP_CSS.md @@ -0,0 +1,621 @@ +# TP CSS - Mise en forme et structuration d'une page web + +**Spécialité NSI - Première** + +--- + +## Objectifs + +- Comprendre le rôle du CSS (séparation contenu/présentation) +- Maîtriser la syntaxe CSS (sélecteurs, propriétés, valeurs) +- Utiliser les balises sémantiques HTML5 pour structurer une page +- Créer une mise en page complète avec CSS + +**Durée estimée** : 3h + +**Prérequis** : TP HTML terminé + +--- + +## Partie A : Introduction au CSS (20 min) + +### A.1 Le rôle du CSS + +**CSS** (*Cascading Style Sheets* - Feuilles de style en cascade) gère l'**apparence** d'une page web. + +> **Principe fondamental** : HTML = structure (le fond) | CSS = présentation (la forme) + +### A.2 Syntaxe CSS + +```css +selecteur { + propriete: valeur; + propriete2: valeur2; +} +``` + +**Exemple :** +```css +body { + background-color: chocolate; +} + +p { + font-size: 32px; + text-align: center; + color: #ffffff; +} +``` + +### A.3 Les 3 façons d'appliquer du CSS + +| Méthode | Exemple | Portée | +|---------|---------|--------| +| **Inline** (attribut style) | `

` | Un seul élément | +| **Interne** (balise style) | `` | Une seule page | +| **Externe** (fichier .css) | `` | Tout le site | + +**Bonne pratique** : Toujours utiliser un fichier CSS externe ! + +```html + + +``` + +--- + +## Partie B : Les sélecteurs CSS (30 min) + +### B.1 Sélecteurs de base + +| Sélecteur | Cible | Exemple | +|-----------|-------|---------| +| `element` | Toutes les balises de ce type | `p { }` → tous les `

` | +| `.classe` | Tous les éléments avec cette classe | `.important { }` → `class="important"` | +| `#id` | L'élément unique avec cet id | `#menu { }` → `id="menu"` | + +### B.2 Sélecteurs combinés + +| Sélecteur | Signification | Exemple HTML | +|-----------|---------------|--------------| +| `p span` | `` à l'intérieur de `

` | `

...

` | +| `p, span` | `

` ET `` (les deux) | `

` ou `` | +| `div p span` | `` dans `

` dans `

` | `

` | +| `.intro` | Classe "intro" | `

` | +| `p.intro` | `

` avec classe "intro" | `

` | +| `#titre` | Id "titre" | `

` | +| `a:hover` | Lien survolé | `` au survol souris | + +### B.3 Exercice interactif : CSS Diner + +Avant de continuer, entraînez-vous sur **CSS Diner** : + +👉 **[flukeout.github.io](https://flukeout.github.io)** (30 niveaux) + +Objectif : atteindre au moins le niveau 15. + +--- + +## Partie C : Propriétés CSS essentielles (20 min) + +### C.1 Texte + +```css +p { + color: #333333; /* Couleur du texte */ + font-size: 16px; /* Taille */ + font-family: Arial, sans-serif; /* Police */ + font-weight: bold; /* Gras */ + font-style: italic; /* Italique */ + text-align: center; /* Alignement: left, center, right, justify */ + text-decoration: underline; /* Soulignement */ + text-transform: uppercase; /* Majuscules */ + line-height: 1.5; /* Interligne */ +} +``` + +### C.2 Couleurs + +```css +/* 3 façons d'écrire une couleur */ +color: red; /* Nom */ +color: #ff0000; /* Hexadécimal */ +color: rgb(255, 0, 0); /* RGB */ +``` + +### C.3 Arrière-plan + +```css +body { + background-color: #f0f0f0; + background-image: url("images/fond.png"); + background-repeat: no-repeat; /* repeat, repeat-x, repeat-y */ + background-position: center; + background-size: cover; /* cover, contain, 100px */ +} +``` + +### C.4 Le modèle de boîte (box model) + +Chaque élément HTML est une "boîte" avec : + +``` +┌─────────────────────────────────────┐ +│ margin │ ← Marge extérieure +│ ┌───────────────────────────────┐ │ +│ │ border │ │ ← Bordure +│ │ ┌─────────────────────────┐ │ │ +│ │ │ padding │ │ │ ← Marge intérieure +│ │ │ ┌───────────────────┐ │ │ │ +│ │ │ │ CONTENU │ │ │ │ +│ │ │ └───────────────────┘ │ │ │ +│ │ └─────────────────────────┘ │ │ +│ └───────────────────────────────┘ │ +└─────────────────────────────────────┘ +``` + +```css +div { + width: 300px; + height: 200px; + padding: 20px; /* Intérieur */ + margin: 10px; /* Extérieur */ + border: 2px solid black; /* Bordure */ + border-radius: 5px; /* Coins arrondis */ + box-shadow: 4px 4px 5px #999; /* Ombre */ +} +``` + +--- + +## Partie D : Les balises sémantiques HTML5 (15 min) + +### D.1 Structure d'une page moderne + +``` +┌─────────────────────────────────────────────┐ +│
│ +│ ┌─────────────────────────────────────┐ │ +│ │