Ce que nous avons vu

Attributs globaux HTML

• id, class, data-*, lang

Sélecteurs CSS de base

• Type, classe, ID, universel
• Sélecteurs de combinaison (descendant, enfant direct)

Aujourd'hui :

• Fin des sélecteurs avancés
• Box Model
• Positionnement CSS

Pseudo-classes — État des éléments

Exemple : Tableau avec lignes alternées

tr:nth-child(odd) {
    background: white;
}

tr:nth-child(even) {
    background: #f5f5f5;
}

Usage typique : Améliorer la lisibilité des tableaux

Pseudo-éléments

Pseudo-élément	Cible	Exemple
::before	Contenu inséré avant	p::before { content: "→ "; }
::after	Contenu inséré après	a::after { content: " "; }

Important : La propriété content est obligatoire

a[href^="http"]::after {
    content: " (lien externe)";
}

Sélecteurs d'attributs

Exemples pratiques

/* Champs obligatoires */
input[required] {
    border-left: 3px solid red;
}

/* Liens externes */
a[href^="http"] {
    color: blue;
}

/* Liens PDF */
a[href$=".pdf"]::after {
    content: " (PDF)";
}

Spécificité CSS

Spécificité = poids d'un sélecteur

Règle : Plus la spécificité est élevée, plus la règle est prioritaire

Calcul de la spécificité

/* Spécificité : 1 */
p { color: blue; }

/* Spécificité : 11 */
.intro p { color: red; }

/* Spécificité : 101 */
#content p { color: green; }

/* Spécificité : 111 - gagne */
#content .intro p { color: purple; }

La cascade CSS

Ordre de priorité quand plusieurs règles ciblent le même élément :

1. Importance : !important
2. Spécificité : ID > classe > élément
3. Ordre d'apparition : La dernière règle gagne

p { color: blue; }
p { color: red; }  /* Cette règle gagne */

Conseil : Éviter !important autant que possible

Le Box Model CSS

Chaque élément HTML est une boîte composée de 4 zones :

┌─────────────────────────────────────┐
│           MARGIN (extérieur)        │
│  ┌───────────────────────────────┐  │
│  │        BORDER (bordure)       │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │   PADDING (intérieur)   │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     CONTENT       │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

Les 4 zones du Box Model

Exemple de Box Model

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

Largeur totale (par défaut) = 200 + (20×2) + (5×2) = 250px

Par défaut, width et height ne comptent que le content

Padding — Espacement intérieur

/* Tous les côtés identiques */
padding: 15px;

/* Vertical | Horizontal */
padding: 10px 20px;

/* Top | Right | Bottom | Left */
padding: 10px 20px 15px 25px;

/* Côté par côté */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;

Astuce : Top, Right, Bottom, Left (sens horaire)

Border — Bordure

/* Syntaxe : width style color */
border: 2px solid #333;

/* Styles courants */
border-style: solid;   /* Ligne continue */
border-style: dashed;  /* Tirets */
border-style: dotted;  /* Pointillés */

/* Coins arrondis */
border-radius: 10px;
border-radius: 50%;    /* Cercle */

Margin — Espacement extérieur

/* Syntaxe identique au padding */
margin: 20px;
margin: 10px 20px;
margin: 10px 15px 20px 25px;

/* Centrage horizontal */
.container {
    width: 800px;
    margin: 0 auto;
}

Pour centrer : L'élément doit avoir une largeur définie

Fusion des marges verticales

Les marges verticales adjacentes fusionnent

<p style="margin-bottom: 30px;">Paragraphe 1</p>
<p style="margin-top: 20px;">Paragraphe 2</p>

Résultat : Espace entre les deux = 30px (la plus grande)

Important : Uniquement vertical, pas horizontal

box-sizing: border-box

Le problème :

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}
/* Largeur totale = 250px */

La solution :

* {
    box-sizing: border-box;
}

.box {
    width: 200px;  /* Largeur totale = 200px */
    padding: 20px;
    border: 5px solid black;
}

À mettre au début de tous vos projets CSS

Visualiser le Box Model

DevTools : F12 → Éléments → Computed

Les zones sont colorées :

• Margin : bleu clair
• Border : jaune
• Padding : vert
• Content : bleu foncé

Utilisez les DevTools pour déboguer

Propriété position

Propriétés associées : top, right, bottom, left, z-index

position: static

Position normale dans le flux

div {
    position: static; /* Valeur par défaut */
}

Les propriétés top, right, bottom, left sont ignorées

Vous n'écrirez presque jamais cette valeur

position: relative

Décalage par rapport à sa position normale

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Caractéristiques :

• L'élément reste dans le flux
• L'espace d'origine est réservé
• Crée une référence pour position: absolute

position: absolute

Position par rapport au parent positionné le plus proche

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 10px;
    right: 10px;
}

Caractéristiques :

• L'élément sort du flux
• Si aucun parent positionné : par rapport à <body>

Exemple : Badge sur une carte

<div class="card">
    <span class="badge">NEW</span>
    <h3>Titre</h3>
    <p>Contenu</p>
</div>

.card {
    position: relative;
    padding: 20px;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
}

position: fixed

Position fixe par rapport à la fenêtre

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

Caractéristiques :

• Ne bouge pas au scroll
• Sort du flux

Usage : Headers fixes, boutons flottants

Compenser un header fixe

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
}

body {
    padding-top: 60px; /* Hauteur du header */
}

position: sticky

Hybride entre relative et fixed

.sidebar {
    position: sticky;
    top: 20px;
}

Comportement :

1. Agit comme relative normalement
2. Devient fixed au scroll quand le seuil est atteint
3. Redevient relative à la fin du conteneur

Usage : Sidebars, en-têtes de tableaux

z-index — Ordre d'empilement

Contrôle la superposition des éléments

.back {
    position: absolute;
    z-index: 1;
}

.front {
    position: absolute;
    z-index: 2; /* Au-dessus */
}

Règles :

• Fonctionne avec position différent de static
• Plus le z-index est élevé, plus l'élément est au-dessus

Valeurs courantes de z-index

.navbar {
    position: fixed;
    z-index: 100;
}

.modal {
    position: fixed;
    z-index: 200;
}

.overlay {
    position: fixed;
    z-index: 199;
}

Convention : Utiliser des valeurs espacées (100, 200, 300...)

Centrage avec position absolute

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Explication :

1. top: 50%; left: 50%; place le coin en haut à gauche au centre
2. transform décale l'élément de la moitié de sa taille

Alternative : Flexbox ou Grid (plus simple)

Récapitulatif position

Ce que nous avons vu

Sélecteurs avancés

• Pseudo-classes : :hover, :nth-child()
• Pseudo-éléments : ::before, ::after
• Sélecteurs d'attributs
• Spécificité et cascade

Box Model

• Content, Padding, Border, Margin
• box-sizing: border-box

Positionnement

• static, relative, absolute, fixed, sticky
• z-index

Points clés

Box Model : Toujours utiliser box-sizing: border-box

Spécificité : Éviter !important

Positionnement :

• relative pour créer une référence
• absolute pour sortir du flux
• fixed pour des éléments fixes
• sticky pour un comportement hybride

DevTools : Indispensable pour déboguer