Les Feuilles de Style en Cascade (CSS)
Les feuilles de style en cascade, connues sous le nom de CSS (Cascading Style Sheets), sont un langage informatique conçu pour définir la présentation visuelle des documents HTML ou XML. CSS permet de contrôler la disposition, les couleurs, les polices et d'autres aspects esthétiques des pages web, que ce soit de manière statique ou dynamique via des scripts. Il offre une précision au pixel près pour le positionnement des éléments et supporte une large gamme de styles typographiques.
Intégration de CSS dans les Projets Web
Dans le développement web, les feuilles de style CSS sont généralement créées par des ingénieurs front-end ou des designers UI. Selon les normes du W3C, la structure est gérée par HTML, l'apparence par CSS et les interactions par JavaScript.
Il existe trois méthodes prnicipales pour intégrer CSS dans une page web :
Styles en Ligne
Cette méthode consiste à appliquer des styles directement aux balises HTML via l'attribut style. Elle est rarement utilisée en pratique car elle mélange le contenu et la présentation. Elle est principalement réservée aux cas où les styles sont modifiés dynamiquement via JavaScript.
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de Style en Ligne</title>
</head>
<body style="background-color: #f0f0f0; color: #333;">
<h1 style="border: 2px dashed #aaa; padding: 10px;">Contenu de la Page</h1>
</body>
</html>
Styles Internes
Ici, les règles CSS sont placées dans une balise <style> à l'intérieur de l'en-tête <head>. Cette approche est utile pour les pages uniques, mais moins adaptée aux projets multi-pages car elle ne permet pas la réutilisation.
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de Style Interne</title>
<style>
body {
background-color: #e8f4f8;
}
h1 {
background-color: #4a90e2;
color: #fff;
padding: 15px;
}
</style>
</head>
<body>
<h1>Contenu Dynamique</h1>
</body>
</html>
Styles Externes
Pour une meilleure maintenabilité, les styles sont définis dans un fichier CSS séparé (par exemple, styles/main.css) et inclus via une balise <link>. Cela favorise la réutilisation et la séparation des préoccupations.
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Lien vers Feuille de Style Externe</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>Structure Modulaire</h1>
</body>
</html>
Dans le fichier styles/main.css :
body {
background-color: #fafafa;
}
h1 {
color: #2c3e50;
font-family: Arial, sans-serif;
}
Syntaxe de Base de CSS
Une règle CSS se compose d'un sélecteur, d'une paire d'accolades et de déclarations de propriétés avec leurs valeurs. Les propriétés sont uniques dans une même règle ; si elles se répètent, la dernière valeur l'emporte. Les valeurs multiples sont séparées par des espaces.
Les commentaires en CSS se font avec /* commentaire */ pour documenter le code sans affecter le rendu.
Sélecteurs CSS
Sélecteurs d'Éléments
Le sélecteur universel * cible tous les éléments, souvent utilisé pour la réinitialisation des styles.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Les sélecteurs de type ciblent les balises par leur nom, comme p, h1, etc.
p {
font-size: 1.2em;
line-height: 1.5;
}
Sélecteurs d'ID
Les sélecteurs d'ID, préfixés par #, ciblent un élément unique identifié par un attribut id.
#section-principale {
background-color: #d4e6f1;
padding: 20px;
}
Sélecteurs de Classe
Les sélecteurs de classe, préfixés par un point ., permettent de regrouper plusieurs éléments partageant un même style.
.alerte {
color: #c0392b;
border-left: 4px solid #e74c3c;
}
.important {
font-weight: bold;
}
Sélecteurs de Relation
Les sélecteurs descendants (espace) ciblent tous les éléments imbriqués, tandis que les sélecteurs enfants (>) ne ciblent que les descendants directs.
.conteneur p { /* Tous les p à l'intérieur de .conteneur */
color: #555;
}
.conteneur > .enfant { /* Éléments directs avec classe .enfant */
background: #f9f9f9;
}
Les sélecteurs de fratrie (+ pour le frère adjacent, ~ pour les frères suivants) permettent de cibler des éléments au même niveau hiérarchique.
#element-cible + .suivant {
margin-top: 10px;
}
#element-cible ~ .meme-niveau {
opacity: 0.8;
}
Sélecteurs d'Attribut
Ces sélecteurs ciblent les éléments en fonction de la présence ou de la valeur de leurs attributs.
input[required] {
border-color: #27ae60;
}
input[type="email"] {
font-style: italic;
}
Pseudo-classes
Les pseudo-classes comme :hover ou :nth-child()
permettent de styliser des éléments en fonction de leur état ou position. ``` a:hover { text-decoration: underline; } li:nth-child(odd) { background-color: #ecf0f1; } li:nth-child(even) { background-color: #bdc3c7; }
### Pseudo-éléments
Les pseudo-éléments comme `::before` et `::after` permettent d'insérer du contenu décoratif avant ou après un élément.
.citation::before { content: "« "; color: #7f8c8d; } .citation::after { content: " »"; color: #7f8c8d; } .texte-selectionne::selection { background-color: #f1c40f; color: #2c3e50; }
Propriétés CSS Principales
--------------------------
Les propriétés CSS couvrent divers aspects de la mise en forme. Parmi les courantes :
- **Texte** : `text-align`, `text-indent`, `line-height`, `letter-spacing`, `vertical-align`.
- **Police** : `font-size`, `font-family`, `font-weight`, `color`, avec le raccourci `font`.
- **Apparence** : `width`, `height`, `border`, `border-radius`, `background`, `margin`, `padding`, `position`, `z-index`, `opacity`, `box-shadow`.
- **Mise en page** : `display`, `float`, `clear`, `overflow`, `flex` pour les dispositions flexibles.
- **Animation** : `transition` pour les effets de transition, `animation` pour les animations complexes.
- **Listes et tableaux** : `list-style` pour les puces, `border-collapse` pour les tableaux.
- **Curseur** : `cursor` pour changer l'apparence du pointeur.
Techniques de Mise en Page
--------------------------
Diverses méthodes existent pour structurer la mise en page web : l'utilisation de tables (obsolète), la combinaison div+css traditionnelle, les boîtes flexibles (Flexbox) pour une disposition réactive, et le positionnement CSS pour un contrôle précis des éléments.
</body></html>