# 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 **Prérequis** : TP HTML terminé --- ## Partie A : Introduction au CSS ### 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 ### 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 ### 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 ### D.1 Structure d'une page moderne ![Structure sémantique HTML5](assets/structure_semantique_html5.jpg) ``` ┌─────────────────────────────────────────────┐ │
│ │ ┌─────────────────────────────────────┐ │ │ │