Positionnement et sélecteurs CSS avancés

Sélecteurs avancés, Box Model et Positionnement

Séance 4 - DSP - USAL33

Rappel de la séance 3

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

1. Sélecteurs avancés (suite)

Pseudo-classes — État des éléments

Pseudo-classe	Cible	Exemple
:hover	Survol de la souris	a:hover { color: red; }
:focus	Élément ayant le focus	input:focus { border-color: blue; }
:first-child	Premier enfant	li:first-child { font-weight: bold; }
:last-child	Dernier enfant	li:last-child { border: none; }
:nth-child(n)	n-ième enfant	tr:nth-child(even) { background: #f0f0f0; }

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

Sélecteur	Cible	Exemple
[attr]	Éléments avec l’attribut	[required] { }
[attr="value"]	Valeur exacte	[type="email"] { }
[attr^="value"]	Commence par	[href^="http"] { }
[attr$="value"]	Finit par	[href$=".pdf"] { }

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

Type	Valeur	Exemple
Éléments	1	p, div
Classes, attributs, pseudo-classes	10	.card, [type], :hover
IDs	100	#header
Styles inline	1000	<div style="...">

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

2. Le Box Model

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

Zone	Rôle	Propriété CSS
Content	Contenu (texte, images)	width, height
Padding	Espace intérieur	padding
Border	Bordure	border
Margin	Espace extérieur	margin

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

3. Positionnement CSS

Propriété position

Valeur	Comportement
static	Position normale (défaut)
relative	Relative à sa position normale
absolute	Par rapport au parent positionné
fixed	Par rapport à la fenêtre
sticky	Hybride relative/fixed

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

Valeur	Flux	Référence
static	Dans le flux	-
relative	Dans le flux	Sa position normale
absolute	Hors du flux	Parent positionné
fixed	Hors du flux	Fenêtre
sticky	Dans puis hors	Conteneur

Résumé de la séance

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

Prochaine séance

TP4 : Box Model et Positionnement

Mise en pratique des concepts vus aujourd’hui

Questions ?

Merci !

À la prochaine séance