Les feuilles de style en cascade (CSS) sont un langage de présentation utilisé pour styliser les documents HTML. Elles contrôlent l'apparence des éléments, comme les couleurs, les polices et la disposition.

La syntaxe CSS de base se compose d'un sélecteur suivi de déclarations entre accolades. Exemple :

element {
    propriete: valeur;
}

Il existe trois méthodes pour intégrer CSS dans un document HTML :

1. Avec une balise <style> dans l'en-tête, permettant des styles internes.
2. En liant un fichier CSS externe via une balise <link>, pour une réutilisation.
3. En appliquant des styles en ligne avec l'attribut style sur un élément spécifique.

/* Exemple de balise style */
<style>
    div {
        color: bleu;
    }
</style>

/* Exemple de lien externe */
<link rel="stylesheet" href="styles.css">

/* Exemple de style en ligne */
<p style="font-size: 14px;">Texte stylisé</p>

Les sélecteurs CSS ciblent des éléments pour appliquer des styles. Les sélecteurs de base incluent :

• Sélecteur d'élément : cible un type de balise (ex: p { color: vert; }).
• Sélecteur d'identifiant : utilise l'attribut id (ex: #mon-id { fond: rouge; }).
• Sélecteur de classe : utilise l'attribut class (ex: .ma-classe { taille: 16px; }).
• Sélecteur universel : cible tous les éléments (ex: * { marge: 0; }).

Les sélecteurs combinatoires établissent des relations entre éléments :

• Sélecteur descendant : cible les éléments imbriqués (ex: div span { decoration: soulignement; }).
• Sélecteur enfant direct : cible les éléments fils immédiats (ex: div > p { bordure: 1px solide; }).
• Sélecteur frère adjacent : cible l'élément frère immédiatement suivant (ex: div + p { couleur: noir; }).
• Sélecteur général de frère : cible tous les frères suivants (ex: div ~ span { fond: gris; }).

Les sélecteurs d'attribut ciblent des éléments en fonction de leurs attributs :

[data-role] {
    fond: jaune;
}
[data-role="admin"] {
    couleur: blanc;
}
input[type="text"] {
    bordure: 2px solide bleu;
}

Le regroupement permet d'appliquer un style à plusieurs sélecteurs (ex: h1, h2, h3 { police: Arial; }). L'imbrication combine différents types de sélecteurs (ex: #en-tete, .menu, ul { marge: 10px; }).

Les pseudo-classes définissent des états spéciaux, comme pour les liens :

a:non-visite { color: gris; }
a:survol { color: bleu; }
a:actif { color: noir; }
a:visite { color: violet; }
input:focus { fond: cyan; }

Les pseudo-éléments créent des parties virtuelles d'un élément :

p::premiere-lettre { taille: 24px; }
p::avant { contenu: 'Note: '; couleur: gris; }
p::apres { contenu: ' - fin'; couleur: gris; }

La priorité des sélecteurs détermine quel style s'applique en cas de conflit. L'ordre de priorité est : styles en ligne > sélecteurs d'identifiant > sélecteurs de classe > sélecteurs d'élément. Pour des sélecteurs identiques, le dernier dans le code prend le dessus.

Propriétés CSS courantes

Les dimensions sont définies avec width et height. Les éléments en ligne ignorent ces propriétés sauf si display est modifié.

.conteneur {
    largeur: 300px;
    hauteur: 150px;
    fond: vert;
}

Les propriétés typographiques incluent font-family, font-size, font-weight, color, et text-decoration.

.texte {
    police-famille: 'Helvetica', sans-serif;
    taille-police: 18px;
    graisse-police: gras;
    couleur: #333;
    decoration-texte: souligner;
    retrait-texte: 2em;
}

L'alignement du texte se fait avec text-align (valeurs : gauche, droite, centre, justifié).

Les bordures sont définies avec border, border-width, border-style, et border-color. L'arrondi des coins utilise border-radius.

.boite-bordure {
    bordure: 2px solide rouge;
    rayon-bordure: 50%;
}

La propriété display contrôle le comportement d'affichage. none cache l'élément et retire l'espace, tandis que visibility: hidden cache mais conserve l'espace.

Le modèle de boîte CSS se compose de la marge (margin), de la bordure, du remplissage (padding) et du contenu. Les valeurs de marge et de remplissage peuvent être définies individuellement ou en raccourci.

.modele-boite {
    marge: 10px auto;
    remplissage: 15px;
    bordure: 1px solide;
    largeur: 200px;
}

La flottaison (float) positionne un élément à gauche ou à droite. Pour éviter l'effondrement parent, on utilise un clearfix :

.clearfix::apres {
    contenu: "";
    affichage: bloc;
    clear: les-deux;
}

La propriété clear empêche les éléments flottants sur un côté spécifié.

Le débordement (overflow) gère le contenu qui dépasse d'un élément, avec des valeurs comme hidden, scroll, ou auto.

Positionnement

Le positionnement CSS inclut :

• Statique : par défaut, aucun déplacement.
• Relatif : déplacement par rapport à la position origniale.
• Absolu : déplacement par rapport à l'ancêtre positionné le plus proche.
• Fixe : positionnement par rapport à la fenêtre du navigateur.

.position-fixe {
    position: fixe;
    haut: 0;
    gauche: 0;
}

La profondeur de pile est contrôlée par z-index, qui nécessite un positionnement non statique. Les valeurs plus élevées sont au premier plan.

.couche-superieure {
    position: relative;
    z-index: 10;
}

L'opacité (opacity) définit la transparence d'un élément, de 0 (transparent) à 1 (opaque).