Le CSS (Cascading Style Sheets) est un langage de feuilles de style qui spécifie la présentation visuelle des documents HTML. Lorsqu'un navigateur interprète une feuille de style CSS, il applique les règles définies pour formater et afficher le contenu.
Syntaxe de base
Chaque règle CSS se compose d'un sélecteur et d'une déclaration. La déclaration comprend une propriété et sa valeur, terminée par un point-virgule.
Intégration du CSS
Style en ligne
Le style peut être directement intégré dans un élément HTML via l'attribut style. Cette méthode est déconseillée pour les mises en page complexes.
<p style="color: blue">Texte exemple.</p>
Style interne
Les styles peuvent être regroupés dans une balise <style> à l'intérieur de l'en-tête HTML.
<head>
<meta charset="UTF-8">
<title>Mon site</title>
<style>
div {
background-color: #ff5733;
}
</style>
</head>
Feuille de style externe
Une approche recommandée consiste à placer le CSS dans un fichier séparé et à l'inclure via une balise <link>.
<link href="styles.css" rel="stylesheet" type="text/css"/>
Sélecteurs CSS
Sélecteurs de base
Sélecteur d'élément
div { color: green; }
Sélecteur d'identifiant
#conteneur-principal {
background-color: yellow;
}
Sélecteur de classe
.texte-important {
font-size: 16px;
}
div.texte-important {
color: red;
}
Remarque : Les noms de classes ne doivent pas commencer par un chiffre. L'attribut class peut contenir plusieurs valeurs séparées par des espaces.
Sélecteur universel
* {
margin: 0;
}
Sélecteurs combinés
Sélecteur descendant
nav a {
color: purple;
}
Sélecteur enfant
ul > li {
list-style-type: square;
}
Sélecteur adjacent
h2 + p {
margin-top: 20px;
}
Sélecteur général
#en-tete ~ section {
border-left: 1px solid grey;
}
Sélecteurs d'attribut
input[type="text"] {
border: 1px solid blue;
}
a[href] {
text-decoration: underline;
}
Groupement et imbrication
Pour appliquer les mêmes styles à plusieurs éléments, on peut les grouper avec des virgules.
article,
section {
padding: 10px;
}
Les sélecteurs peuvent être imbriqués pour cibler des éléments spécifiques.
.parent .enfant {
color: orange;
}
Pseudo-classes
lien:non-visite {
color: red;
}
lien:visite {
color: green;
}
lien:hover {
color: purple;
}
lien:actif {
color: blue;
}
champ:focus {
outline: none;
background-color: #f0f0f0;
}
Pseudo-éléments
p::first-letter {
font-size: 2em;
color: red;
}
p::before {
content: "→ ";
color: green;
}
p::after {
content: " ←";
color: blue;
}
Les pseudo-éléments ::before et ::after sont souvent utilisés pour effacer les flottements.
Spécificité et héritage
Héritage CSS
Le CSS permet aux styles d'être hérités des éléments parents aux enfants. Par exemple, la couleur définie sur body sera appliquée à tous les éléments descendants.
body {
color: #333;
}
Cependant, certains propriétés comme border, margin, padding et background ne sont pas héritées. L'héritage peut être surchargé en appliquant un style directement à un élément enfant.
p {
color: #666;
}
Ordre de priorité des sélecteurs
La priorité est déterminée par la spécificité des sélecteurs. Les sélecteurs d'identifiant ont une priorité plus élevée que ceux de classe, qui eux-mêmes surpassent les sélecteurs d'élément. L'utilisation de !important est déconseillée car elle complique la maintenance.
Propriétés CSS
Propriétés de police
Famille de polices
corps {
font-family: "Arial", "Helvetica", sans-serif;
}
Taille de police
paragraphe {
font-size: 15px;
}
La valeur inherit permet d'hériter de la taille du parent.
Épaisseur de police
| Valeur | Description |
|---|---|
| normal | Épaisseur standard |
| bold | Gras |
| bolder | Plus gras |
| lighter | Plus fin |
| 100 à 900 | Valeurs numériques, 400 équivaut à normal, 700 à bold |
Couleur du texte
Les couleurs peuvent être spécifiées en hexadécimal, RGB, RGBA ou par nom.
texte {
color: #ff0000;
background-color: rgba(0, 0, 255, 0.5);
}
Propriétés de texte
Alignement du texte
| Valeur | Description |
|---|---|
| left | Aligné à gauche par défaut |
| right | Aligné à droite |
| center | Centré |
| justify | Justifié |
Décoration du texte
Pour supprimer le soulignement des liens :
a {
text-decoration: none;
}
Retrait de la première ligne
paragraphe {
text-indent: 2em;
}
Propriétés d'arrière-plan
element {
background-color: #f5f5f5;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
}
Raccourci possible :
element {
background: #f5f5f5 url('image.jpg') no-repeat center;
}
Bordures
boite {
border-width: 2px;
border-style: dashed;
border-color: #007bff;
}
Raccourci :
boite {
border: 2px dashed #007bff;
}
Les styles de bordure incluent : none, dotted, dashed, solid, etc.
Border-radius
cercle {
border-radius: 50%;
}
Propriété display
| Valeur | Description |
|---|---|
| none | L'élément est masqué et ne prend pas d'espace |
| block | L'élément prend toute la largeur disponible |
| inline | L'élément se comporte comme du texte en ligne |
| inline-block | Combine les caractéristiques de inline et block |
Différence entre display: none et visibility: hidden : le premier supprime l'espace de l'élément, tandis que le second le conserve dans la mise en page.
Modèle de boîte
- margin : Espace extérieur de la boîte.
- padding : Espace intérieur entre le contenu et la bordure.
- border : Bordure entourant le padding.
- content : Zone contenant le texte ou l'image.
Marges externes
.exemple-margin {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
}
Raccourci : margin: 10px 15px 20px 25px; (haut, droite, bas, gauche).
Pour centrer un bloc :
.centre {
margin: 0 auto;
}
Padding interne
.exemple-padding {
padding: 5px 10px;
}
Les valeurs de padding peuvent être spécifiées pour un, deux, trois ou quatre côtés.
Flottement
Les éléments flottants se déplacent à gauche ou à droite, sortant du flux normal du document. Cela peut causer des problèmes de mise en page comme l'effondrement des conteneurs parents.
image-flottante {
float: left;
}
Nettoyage des flottements
L'attribut clear empêche les éléments flottants d'apparaître sur un côté spécifique.
.clearfix::after {
content: "";
display: table;
clear: both;
}
Propriété overflow
| Valeur | Description |
|---|---|
| visible | Le contenu dépasse sans être coupé |
| hidden | Le contenu est masqué s'il dépasse |
| scroll | Des barres de défilement apparaissent si nécessaire |
| auto | Comme scroll, mais seulement si nécessaire |
Positionnement
Positionnement statique
Par défaut, les éléments sont en flux normal. Les propriétés top, right, etc., n'ont aucun effet.
Positionnement relatif
L'élément est décalé par rapport à sa position d'origine, mais conserve son espace dans le flux.
.element-relatif {
position: relative;
top: 10px;
left: 20px;
}
Positionnement absolu
L'élément est retiré du flux normal et positionné par rapport à l'ancêtre positionné le plus proche.
.conteneur {
position: relative;
}
.element-absolu {
position: absolute;
top: 50px;
right: 10px;
}
Positionnement fixe
L'élément est positionné par rapport à la fenêtre du navigateur et reste fixe lors du défilement.
.barre-fixe {
position: fixed;
bottom: 0;
width: 100%;
}
Note : Un élément avec position: absolute ou fixed ne peut pas avoir de float appliqué.