Attributs globaux, sélecteurs CSS et Box Model

Attributs globaux, Sélecteurs CSS et Box Model

Séance 3 - DSP - USAL33

5. Attributs globaux

Qu’est-ce qu’un attribut global ?

Attributs globaux = attributs utilisables sur toutes les balises HTML

Principaux attributs :

Attribut

Rôle

id

Identifiant unique

class

Classe(s) CSS (réutilisable)

style

Styles CSS inline

title

Info-bulle au survol

data-*

Données personnalisées

lang

Langue du contenu

hidden

Cache l’élément

Attribut id

Rôle : Identifiant unique dans la page

Règles :

  • Valeur unique sur toute la page

  • Commence par une lettre

  • Pas d’espaces

Usages :

<div id="header">En-tête</div>

<a href="#section2">Aller à la section 2</a>
<section id="section2">...</section>

<button id="submit-btn">Envoyer</button>

Attribut class

Rôle : Une ou plusieurs classes CSS (réutilisables)

Règles :

  • Peut être utilisé sur plusieurs éléments

  • Un élément peut avoir plusieurs classes

  • Classes séparées par des espaces

<p class="important">Texte important</p>

<div class="card featured highlight">Carte mise en avant</div>

Bonne pratique : Préférer les classes aux IDs pour le style CSS

id vs class

Critère

id

class

Unicité

Unique dans la page

Réutilisable

Nombre par élément

Un seul

Plusieurs possibles

Spécificité CSS

Très élevée (100)

Moyenne (10)

Usage recommandé

Ancres, JavaScript

Styles CSS

 
<nav id="main-nav" class="navigation sticky">
    <a href="#home" class="nav-link active">Accueil</a>
</nav>

Attribut style

Rôle : Styles CSS inline (dans la balise)

<p style="color: blue; font-size: 18px;">Texte bleu</p>

À éviter : Mélange structure et présentation

Préférer : Fichier CSS externe

Cas d’usage légitime : Styles générés dynamiquement par JavaScript

Attribut title

Rôle : Info-bulle au survol de la souris

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Cliquez pour enregistrer">💾</button>
<img src="photo.jpg" alt="Photo" title="Photo de vacances 2026">

Avantages :

  • Aide contextuelle

  • Améliore l’UX

⚠️ Limites : Non accessible au tactile (mobiles)

Attributs data-* — Données personnalisées

Rôle : Stocker des données personnalisées (pour JavaScript)

<article data-article-id="42" data-author="Jean Dupont" data-category="tech">
    <h2>Titre de l'article</h2>
</article>

<script>
    const article = document.querySelector('article');
    console.log(article.dataset.articleId);  // "42"
    console.log(article.dataset.author);     // "Jean Dupont"
    console.log(article.dataset.category);   // "tech"
</script>

Bonne pratique : Préfixer avec data- + nom descriptif

Attribut lang

Rôle : Indique la langue du contenu

<html lang="fr">
    <body>
        <p>Texte en français</p>
        <p lang="en">This is in English</p>
        <p lang="es">Esto es en español</p>
    </body>
</html>

Avantages :

  • Accessibilité (prononciation correcte par lecteurs d’écran)

  • SEO (moteurs de recherche identifient la langue)

  • Traduction automatique

  • Correcteur orthographique du navigateur

Attribut hidden

Rôle : Cache un élément (non visible, non accessible)

<div hidden>Ce contenu est caché</div>

<div id="message" hidden>Message secret</div>
<button onclick="document.getElementById('message').hidden = false">
    Révéler
</button>

Équivalent CSS :

[hidden] {
    display: none;
}

Partie 3 (suite)

CSS approfondi

Sélecteurs avancés et Box Model

1. Sélecteurs avancés

Rappel : Sélecteurs de base

Sélecteur

Cible

Exemple

Type

Toutes les balises d’un type

p { color: blue; }

Classe

Éléments avec une classe

.important { font-weight: bold; }

ID

Élément avec un ID unique

#header { background: #333; }

Universel

Tous les éléments

* { margin: 0; }

Sélecteurs de classe et d’ID

Classe (.ma-classe)

  • Réutilisable sur plusieurs éléments

  • Préféré pour le style CSS

.button { padding: 10px 20px; }
.button-primary { background: blue; color: white; }

ID (#mon-id)

  • Unique dans la page

  • Haute spécificité (difficile à surcharger)

  • Réservé pour JavaScript ou ancres

#unique-header { font-size: 32px; }

Sélecteurs de combinaison

Sélecteur

Nom

Cible

A B

Descendant

Tous les B dans A (à n’importe quel niveau)

A > B

Enfant direct

B enfant immédiat de A

A + B

Voisin adjacent

B immédiatement après A (même parent)

A ~ B

Voisins généraux

Tous les B après A (même parent)

 
/* Tous les <p> dans <article> */
article p { line-height: 1.6; }

/* Les <li> directs de <ul> */
ul > li { list-style: disc; }

/* Le premier <p> après un <h1> */
h1 + p { font-size: 1.2em; }

Pseudo-classes — État des éléments (1/2)

Pseudo-classe

Cible

Exemple

:hover

Survol de la souris

a:hover { color: red; }

:focus

Élément ayant le focus

input:focus { border-color: blue; }

:active

Élément activé (clic)

button:active { transform: scale(0.95); }

Pseudo-classes — État des éléments (2/2)

Pseudo-classe

Cible

Exemple

: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; }

Pseudo-éléments — Parties d’éléments

Pseudo-élément

Cible

Exemple

::before

Contenu inséré avant

p::before { content: "→ "; }

::after

Contenu inséré après

a::after { content: " ↗"; }

::first-line

Première ligne

p::first-line { font-weight: bold; }

::first-letter

Première lettre

p::first-letter { font-size: 2em; }

 
/* Ajouter une icône avant les liens externes */
a[href^="http"]::after {
    content: " 🔗";
}

Note : ::before et ::after nécessitent la propriété content

Sélecteurs d’attributs

Sélecteur

Cible

[attr]

Éléments avec l’attribut

[attr="value"]

Attribut avec valeur exacte

[attr^="value"]

Attribut commençant par value

[attr$="value"]

Attribut finissant par value

[attr*="value"]

Attribut contenant value

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

/* Tous les PDFs */
a[href$=".pdf"]::after { content: " 📄"; }

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

Spécificité CSS

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

Type de sélecteur

Valeur

Exemple

Éléments, pseudo-éléments

1

div, ::before

Classes, attributs, pseudo-classes

10

.card, [type], :hover

IDs

100

#header

Styles inline

1000

<div style="...">

!important

∞

color: red !important;

Calcul :

div p { }              /* 0-0-2   = 2 */
.intro p { }           /* 0-1-1   = 11 */
#content .intro p { }  /* 1-1-1   = 111 */

⚠️ Évitez !important : complique la maintenance

La cascade CSS

Cascade = ordre de priorité quand plusieurs règles ciblent le même élément

Ordre de priorité :

  1. Importance : !important

  2. Spécificité du sélecteur

  3. Ordre d’apparition (dernière règle gagne)

En cas d’égalité de spécificité : La dernière règle définie l’emporte

p { color: blue; }
p { color: red; }  /* ← Celle-ci gagne */

2. Le Box Model

Le Box Model CSS

Chaque élément HTML est une boîte rectangulaire 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 de l’élément

width, height

Padding

Espace intérieur

padding

Border

Bordure de l’élément

border

Margin

Espace extérieur

margin

 
div {
    width: 200px;       /* Content */
    padding: 20px;      /* Espace intérieur */
    border: 5px solid black;  /* Bordure */
    margin: 10px;       /* Espace extérieur */
}

Largeur totale (par défaut) = width + padding×2 + border×2 = 250px

Content — Contenu

div {
    width: 300px;
    height: 200px;
    min-width: 200px;   /* Largeur minimale */
    max-width: 500px;   /* Largeur maximale */
}

Comportement par défaut :

  • Bloc (<div>, <p>, <h1>) : largeur 100% du parent

  • Inline (<span>, <a>, <strong>) : largeur = contenu

Bon à savoir : min-width et max-width sont essentiels pour le responsive

Padding — Espacement intérieur

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

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

/* Top | Horizontal | Bottom */
padding: 10px 20px 15px;

/* Top | Right | Bottom | Left (sens horaire) */
padding: 10px 20px 10px 20px;

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

Astuce mnémotechnique (4 valeurs) : « TRouBLe » (Top, Right, Bottom, Left)

Border — Bordure

/* Syntaxe complète */
border: 2px solid #333;
/*      ↑    ↑     ↑
      width style color */

/* Styles de bordure */
border-style: solid;   /* Ligne continue */
border-style: dashed;  /* Tirets */
border-style: dotted;  /* Pointillés */
border-style: double;  /* Double ligne */

/* Bordures différentes par côté */
border-top: 3px solid red;
border-bottom: 1px dashed blue;

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

Margin — Espacement extérieur

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

/* Centrer un élément de bloc */
margin: 0 auto;

/* Marges négatives (avancé) */
margin-top: -10px;  /* Rapproche de l'élément au-dessus */

Valeurs spéciales :

  • auto : centrage horizontal (pour les éléments de bloc avec largeur définie)

  • Valeurs négatives : superposer ou rapprocher les éléments

Fusion des marges verticales

Comportement spécial : 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), pas 50px

Règle : La plus grande marge l’emporte

Astuce : Les marges horizontales ne fusionnent jamais

box-sizing — Calcul de la largeur

Problème par défaut : width ne compte pas padding et border

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Largeur totale = 200 + 40 + 10 = 250px */
}

Solution : box-sizing: border-box

* {
    box-sizing: border-box; /* Recommandé globalement */
}

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    /* Largeur totale = 200px (padding et border INCLUS) */
}

Toujours utiliser border-box au début de votre CSS

Visualiser le Box Model

DevTools (F12) → Onglet « Éléments » → Panneau « Styles » en bas

┌─────────────────────┐
│   margin: 10        │
│  ┌───────────────┐  │
│  │ border: 5     │  │
│  │ ┌───────────┐ │  │
│  │ │ padding:  │ │  │
│  │ │    20     │ │  │
│  │ │ ┌───────┐ │ │  │
│  │ │ │ 200×  │ │ │  │
│  │ │ │ 150px │ │ │  │
│  │ │ └───────┘ │ │  │
│  │ └───────────┘ │  │
│  └───────────────┘  │
└─────────────────────┘

Utilisez toujours les DevTools pour déboguer le Box Model

Fin de la séance 3

Prochaine étape : TP3 - Synthèse HTML

Questions ?