Synthèse Complète NSI WEB02

1. Liaison HTML / CSS

Le CSS est écrit dans un fichier séparé (ex: style.css). On le lie dans le <head> du HTML :

2. Syntaxe et Exemple de Code

Une règle CSS cible un élément et lui applique des styles :

        h1 { 

            color: #2c3e50; /* Couleur du texte */

            text-align: center; /* Alignement */

        }

        button:hover { 

            background-color: #e67e22; /* Change au survol */

            transform: scale(1.1);

        }

3. Récapitulatif des Propriétés CSS de base

Catégorie	Propriété	Description / Valeurs
Texte	`color`	Couleur du texte (nom, hexadécimal, rgb).
	`font-family`	Police de caractère (ex: Arial, sans-serif).
	`font-size`	Taille de la police (px, em, %).
	`font-weight`	Épaisseur du trait (normal, bold).
	`text-align`	Alignement (left, center, right, justify).
Fond	`background-color`	Couleur d'arrière-plan de l'élément.
Fond	`background-image`	Image de fond (url).
Boîte	`width` / `height`	Largeur et hauteur de la boîte.
	`padding`	Marge intérieure (entre contenu et bord).
	`margin`	Marge extérieure (entre deux éléments).
	`border`	Contour (ex: 2px solid black).
Apparence	`border-radius`	Arrondi des angles (px ou %).
Apparence	`box-shadow`	Ombre portée sur l'élément.
Interaction	`cursor`	Type de curseur (ex: pointer pour les liens).

4. Le Modèle de Boîte (Box Model)

C'est le concept le plus important pour la mise en page. Chaque élément est une boîte :

MARGIN (Marge extérieure) : Espace entre cet élément et les autres.

BORDER (Bordure)

PADDING (Marge intérieure) : Espace entre le contenu et la bordure.

CONTENU (Texte, Image)

5. Zoom sur les Listes

Les listes permettent de structurer des énumérations. On utilise toujours <li> pour chaque élément.

A. Les types de listes (HTML)

Liste non-ordonnée (<ul>) : Pour une énumération sans notion d'ordre (puces).
Liste ordonnée (<ol>) : Pour une procédure, un classement ou des étapes (1, 2, 3...).
Liste imbriquée : On peut placer une liste à l'intérieur d'un élément <li> pour créer des sous-niveaux.

B. Personnalisation CSS

La propriété list-style-type permet de changer l'apparence des puces ou des numéros :

Valeur	Résultat pour `<ul>`	Résultat pour `<ol>`
`disc` / `decimal`	Points pleins (défaut)	1, 2, 3... (défaut)
`circle` / `lower-alpha`	Cercles vides	a, b, c...
`square` / `upper-roman`	Carrés pleins	I, II, III...
`none`	Supprime les puces	Supprime les numéros

        /* Exemple de liste sans puces (utile pour les menus) */

        ul.menu { 

            list-style-type: none;

            padding: 0;

        }