Introduction aux feuilles de style en cascade

Kart yok

Comprendre les bases de CSS, y compris les sélecteurs, les propriétés, la cascade et la mise en page.

Introduction aux Feuilles de Style en Cascade (CSS)

Les Cascading Style Sheets (CSS), ou Feuilles de Style en Cascade en français, sont un langage essentiel qui permet de définir l'apparence et le style visuel d'une page web. Il s'agit d'un système pour «habiller» le contenu structuré par HTML, le rendant ainsi présentable et esthétiquement agréable. Introduit en 1996, CSS en est actuellement à sa version 3.

Rôle de HTML vs. CSS

HTML	CSS
Permet de structurer les éléments d'une page.	Définit une ou plusieurs apparences pour différents éléments.
La visualisation est faite par le navigateur après interprétation du code.	Apporte une meilleure maîtrise de la présentation de la page.
Chaque élément HTML a un style standard par défaut.	Facilite l'unification des styles de toutes les pages d'un site sans modifier le contenu.
	Reste indépendant du code HTML et en simplifie l'écriture.

Le CSS s'intéresse à la mise en forme et la mise en page du contenu intégré avec du HTML.
Mise en forme : souligner, mettre en gras, changer la couleur, encadrer le texte.
Mise en page : disposer les blocs les uns par rapport aux autres dans la page.

Principes Fondamentaux du CSS

Le CSS permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML pour mettre en forme une page web.

Règles CSS

Une règle CSS sert à définir un style à appliquer à des balises HTML. Elle se compose d'un sélecteur et d'une ou plusieurs déclarations.

Le sélecteur détermine les éléments cibles (balise, attributs, état). Ex: p, h1.
La propriété est l'aspect de l'élément HTML que l'on souhaite modifier. Ex: color, font-size.
La valeur est ce qui est assigné à la propriété. Ex: red pour color, 14px pour font-size.

Une règle CSS suit le format: sélecteur { propriété : valeur ; }

Exemple :

h1 { /* On modifie le style des titres */
  color: red; /* Le texte sera écrit en rouge */
}
strong { /* On modifie le style des mots importants */
  background-color: gold; /* Le texte sera écrit sur un fond doré */
}

Il existe plus de 300 propriétés en CSS3. Les déclarations multiples sont séparées par des points-virgules.
h1 {
  color: blue;
  font-size: 12px;
}
Les sélecteurs peuvent être factorisés en les séparant par des virgules pour appliquer le même style à plusieurs éléments.
exemple
h1 , h2 {
color : blue ;
font-size : 12px;
}

Méthodes d'intégration du CSS

Il existe trois façons d'écrire des règles CSS dans un document HTML, avec une méthode privilégiée pour la maintenance et la performance :

CSS externes (Méthode A - à privilégier)
CSS internes (Méthode B)
CSS en ligne (Méthode C - fortement déconseillée)

Méthode A : CSS Externes

Cette méthode consiste à lier un fichier .css externe au document HTML. Ce fichier regroupe toutes les règles CSS.

Avantages :
- Change le design du site en un clin d'œil sans modifier le HTML.
- Facilite la maintenance du site.
- Harmonise l'ensemble du site web.
- Allège la taille des fichiers HTML, ce qui rend le site plus rapide car le fichier CSS est téléchargé une seule fois.
Intégration :
Ajouter la balise <link> dans la section <head> du HTML :
```
<link rel="stylesheet" type="text/css" href="design.css">
```
- rel="stylesheet" : indique que le fichier est une feuille de style.
- type="text/css" : spécifie le type de média.
- href : l'emplacement de la feuille de style (URL relative ou absolue).
Importation de CSS :
Les CSS peuvent être importées via la règle @import dans un fichier CSS principal ou dans une balise <style> :
```
@import url('nom-du-fichier.css');
```
Les règles @import doivent être placées au début du fichier CSS. Les fichiers importés sont récupérés de manière synchrone, pouvant affecter le temps de chargement. Il est recommandé de minimiser les importations et de regrouper les fichiers CSS pour une performance optimale.

Méthode B : CSS Internes

Les styles sont directement écrits dans la section <head> du document HTML, à l'intérieur d'une balise <style>.

<html>
<head>
  <title>CSS</title>
  <style>
    /* Règles CSS ici */
  </style>
</head>
<body>
  <!-- Contenu HTML -->
</body>
</html>

Inconvénient : Pour harmoniser un site, il faudrait redéclarer les mêmes balises <style> dans chaque page, ce qui est inefficace.
Utilisation : Utile pour une page spécifique avec une mise en forme unique.

Méthode C : CSS en Ligne (Inline CSS)

Appliquer des styles directement sur les balises HTML en utilisant l'attribut style.

<p style="color: blue; font-size: 14px;">Mon paragraphe stylisé.</p>

Inconvénients :
- Mélange la structure et la présentation.
- Le style ne s'applique qu'à la balise où il est déclaré, ce qui est inefficace pour des éléments similaires répétées.
- Fortement déconseillée pour la maintenance et la cohérence.

Sélecteurs CSS

Les sélecteurs CSS sont des motifs utilisés pour cibler et sélectionner des éléments HTML auxquels appliquer des styles. Ils peuvent être regroupés en plusieurs catégories.

1. Sélecteurs Simples

Sélectionnent des éléments selon leur type (balise), leur id ou leur class.

Sélecteur de balise : cible toutes les occurrences d'une balise spécifique. Ex : p { color: green; }
Sélecteur de classe : cible les éléments ayant un attribut class spécifique. Précédée d'un point (.).
- Ex : Pour un paragraphe <p class="enonce">, le CSS serait .enonce { color: green; }
- Un élément peut avoir plusieurs classes : <p class="second-p encadré">.
Sélecteur d'ID : cible un élément unique avec un attribut id spécifique. Précédée d'un dièse (#).
- Ex : Pour <div id="logo">, le CSS serait #logo { /* propriétés */ }
- L'attribut id doit être unique dans une page.
Sélecteur universel : (*) sélectionne toutes les balises. Ex : * { margin: 0; padding: 0; } (souvent utilisé pour réinitialiser les styles).
Combinaison balise et classe/ID : E.val pour une balise E avec class="val", ou E#mon_id pour une balise E avec id="mon_id".

Les balises <div> et <span> sont des conteneurs génériques souvent utilisés avec les attributs id et class pour appliquer des styles.

<span> : élément en ligne, utilisé pour styliser une petite partie de texte. Ex. : <span>Neil Armstrong</span>.

<div> : élément de type bloc qui crée un nouveau bloc dans la page et provoque un retour à la ligne. Utilisé pour regrouper plusieurs éléments et appliquer des styles uniformes.

2. Sélecteurs Combinés

Sélectionnent des éléments selon leur situation dans l'arbre DOM (Document Object Model), c'est-à-dire l'imbrication des éléments.

sélecteur₁ combinateur sélecteur₂ { déclaration; ... }

Il existe 4 combinateurs :

Combinateur descendant (espace) : sélecteur1 sélecteur2
- S'applique à tout élément désigné par sélecteur2 qui est un descendant (direct ou indirect) de sélecteur1.
- Ex : header a { color: green; font-style: italic; } (tous les liens <a> à l'intérieur d'un <header>).
Sélecteur de nœuds enfants (>) : sélecteur1 > sélecteur2
- S'applique à tout élément désigné par sélecteur2 dont le parent direct est sélecteur1.
- Ex : header > a { color: green; font-style: italic; } (seulement les liens <a> qui sont enfants directs de <header>).
Sélecteur de nœuds adjacents (+) : sélecteur1 + sélecteur2
- S'applique à tout élément désigné par sélecteur2 dont le frère directement précédent est sélecteur1.
- Ex : h1 + h3 { color: green; } (un <h3> qui vient directement après un <h1>).
Sélecteur de nœuds frères (~) : sélecteur1 ~ sélecteur2
- S'applique à tout élément désigné par sélecteur2 dont un frère précédent est sélecteur1 (pas nécessairement adjacent).
- Ex : h1 ~ h3 { color: green; } (tous les <h3> qui suivent un <h1>, pas seulement le premier).

3. Sélecteurs de Pseudo-classes

Sélectionnent des éléments en fonction de l'état dans lequel ils se trouvent. Une pseudo-classe est un mot-clé préfixé par un double point (:) qui s'ajoute à un sélecteur CSS. Format : sélecteur:pseudoClasse { declaration₁; declaration₂;... }

Catégories de pseudo-classes :

Structurelles : ciblant un élément enfant par rapport à son parent.
- :first-child : le premier enfant.
- :last-child : le dernier enfant.
- :nth-child(n) : le n-ième enfant. Ex : tr:nth-child(even) pour les lignes paires d'un tableau. .item:nth-child(2){
  color: green;
  }
D'ancres :
- :link : lien hypertexte non visité.
- :visited : lien hypertexte déjà visité.
Dynamiques : interagissent avec l'utilisateur.
- :hover : l'élément est survolé par le curseur de la souris.
- :active : l'élément est en train d'être cliqué (actif).
- :focus : l'élément a le focus (par exemple, un champ de formulaire).

4. Sélecteurs de Pseudo-éléments

Sélectionnent et stylent une partie spécifique d'un élément. Ils sont préfixés par ::. Format : sélecteur::pseudoElt { déclaration; ... }

::first-line : première ligne d'un bloc de texte.
::first-letter : première lettre d'un bloc de texte.
::before : insère du contenu avant l'élément.
::after : insère du contenu après l'élément.
::selection : partie du texte sélectionnée par l'utilisateur.

a::after { content: " >>>> "; background-color: aqua; }
p::first-letter { font-size: 2em; background-color: aqua; }

5. Sélecteurs d'Attributs

Sélectionnent un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.

E[att] : sélectionne la balise E qui contient l'attribut att.
E[att="val"] : sélectionne la balise E qui contient l'attribut att avec la valeur "val".
E[att^="val"] : sélectionne les éléments dont l'attribut att commence par "val".
Ex : a[href^="https://"] { color: green; } (les liens dont l'attribut href commence par "https://").

La Cascade et l'Héritage

Lorsque plusieurs règles CSS s'appliquent au même élément et à la même propriété, un mécanisme de résolution des conflits est utilisé.

La Cascade

La cascade détermine quelle règle sera appliquée en considérant la spécificité, l'ordre d'apparition et les règles !important.

Spécificité : Plus un sélecteur est spécifique, plus il a de poids.
- Un sélecteur d'ID : 0-1-0-0
- Un sélecteur de classe, d'attribut ou de pseudo-classe : 0-0-1-0
- Un sélecteur d'élément ou de pseudo-élément : 0-0-0-1
- La spécificité d'un sélecteur complexe est l'addition des poids de ses composants.
- Ex : p.special a une spécificité de 0-0-1-1 (1 pour la classe, 1 pour l'élément).
Ordre d'apparition : Si deux règles ont la même spécificité, celle qui apparaît en dernier dans le fichier CSS (ou le dernier fichier chargé) est appliquée.
Importance (!important) : Une règle avec !important sera prioritaire sur les autres (sauf si une autre règle !important est plus spécifique ou apparaît après).

Un style en ligne (inline style) a toujours la plus haute priorité.

L'Héritage

Certaines propriétés CSS, dites héritables, se propagent automatiquement d'un élément parent à ses descendants.

Ex : la propriété color est héritée. Si un <div> a une couleur définie, ses enfants le seront aussi, sauf si un enfant spécifie sa propre couleur.
Les propriétés comme background, margin, padding, border ne sont pas héritables.
L'héritage intervient uniquement lorsque l'élément n'est pas ciblé par une règle CSS directe pour une propriété héritée.
🧠 Point très important (cascade & héritage)
👉 Le background-color n’est PAS hérité

Mise en Forme avec CSS

Couleurs en CSS

Plusieurs méthodes pour définir les couleurs :

Par leur nom (anglais) : Ex : red, blue. Peu pratique en raison du nombre limité de noms.
Synthèse additive (Rouge, Vert, Bleu - RGB) :
- Notation hexadécimale : #rrggbb. Ex : #af6307.
- Notation décimale rgb() : trois valeurs entières entre 0 et 255 (ou pourcentages). Ex : rgb(210, 48, 65).
- Avec canal alpha rgba() : ajoute un canal d'opacité (valeur entre 0 et 1). Ex : rgba(255,255,0, 0.6).
HSL (Teinte, Saturation, Luminosité) :
- hsl() : Teinte (0-360), Saturation (0-100%), Luminosité (0-100%). Ex : hsl(240, 100%, 50%).
- hsla() : Ajoute un canal d'opacité entre (0-1). Ex : hsl(140, 20%, 40%, 0.9).

Unités de Mesure en CSS

Unités absolues

Dépendent des spécifications physiques de l'affichage.

$1 \text{ in} = 2,54 \text{ cm} = 25,4 \text{ mm} = 72 \text{ pt} = 6 \text{ pc}" data-type="inline-math"></span>$ $1 in = 2, 54 cm = 25, 4 mm = 72 pt = 6 pc " d a t a - t y p e = " in l in e - ma t h " >< / s p an >$

px (pixel) : unité dont le rendu dépend de la résolution du périphérique.

Unités relatives

Les unités relatives sont plus flexibles et adaptées au responsive design :

em : relatif à la taille de la police de l'élément lui-même.
rem : relatif à la taille de la police de l'élément racine (<html>).
ex : pourcentage de la hauteur de la lettre "x" minuscule de la police.
% (pourcentage) : définit la taille par rapport à son conteneur parent.
vw (Viewport Width) : 1% de la largeur du viewport.
vh (Viewport Height) : 1% de la hauteur du viewport.

ATTENTION : Utiliser la notation anglaise (point .) pour les valeurs décimales (ex: 1.4em).

Propriétés CSS liées à la Police

font-size : taille de la police (valeurs absolues ou relatives).
font-weight : graisse de la police (normal, bold, etc.).
font-style : style de la police (normal, italic, etc.).
font-family : le type de police (liste ordonnée par priorité, ex: Arial, sans-serif).
font-variant : variation de la police (normal, small-caps).
Raccourci font : combine plusieurs propriétés de police dans un ordre strict. Ex : font: italic small-caps bold 16px/1.5 Arial, sans-serif;.

Propriétés CSS liées au Texte

text-align : alignement du texte (left, right, center, justify). S'applique aux éléments de type bloc.
text-decoration : décoration du texte (none, underline, overline, line-through).
text-transform : transformation du texte (capitalize, uppercase, lowercase).
text-indent : retrait de la première ligne.
word-spacing : espacement entre les mots.
letter-spacing : espacement entre les lettres.
line-height : hauteur des interlignes.
white-space : contrôle des espaces vides (pre, nowrap, normal).
text-shadow : ajoute une ombre portée au texte.

Propriétés CSS liées aux Listes

list-style-type : apparence de la puce ou style de numérotation. Ex : disc, decimal, upper-roman.
list-style-position : position de la seconde ligne par rapport à la puce (outside, inside).
list-style-image : remplace les puces par une image (url(votre_puce.gif)).
Raccourci list-style : combine list-style-type, list-style-image, list-style-position.

Propriétés CSS liées aux Tables

border-spacing : distance entre les bordures des cellules adjacentes.
border-collapse : gère la fusion des bordures (collapse, separate).
caption-side : positionne la légende du tableau (bottom, top).

Propriétés CSS liées aux Bordures

border-style : style de la bordure (solid, dashed, dotted, etc.).
border-width : épaisseur des quatre bordures.
border-color : couleur de la bordure.
Raccourci border : combine border-color, border-style et border-width.
border-radius : arrondit les quatre coins de la bordure. Ex : border-radius: 35px; (cercle si hauteur=largeur).

Propriétés CSS liées à l'Arrière-plan et autres

background-image : image de fond (url(fichier_image)).
background-repeat : répétition de l'image (repeat, no-repeat, repeat-x, repeat-y).
background-attachment : fixe l'image de fond lors du défilement (scroll, fixed).
background-position : position de l'image de fond (ex: center top, 50% 20px).
box-shadow : définit les ombres portées des boîtes.
resize : permet le redimensionnement d'un élément (none, both, horizontal, vertical).

Mise en Page avec CSS : Le Modèle de Boîte

Chaque élément HTML est considéré comme une boîte rectangulaire, composée de trois parties :

Son Contenu : texte, images, autres éléments.
Un Cadre :
- Une bordure.
- Une marge interne (padding) : espace entre le contenu et la bordure.
Une marge externe (margin) : espace entre le cadre et les boîtes adjacentes.

La taille du contenu, la bordure et la marge externe peuvent être contrôlées par des propriétés CSS.

Flux du Document

L'ordre dans lequel le navigateur affiche les boîtes est appelé le flux du document.

Flux normal (par défaut) :
- Les éléments enfants s'affichent dans leur conteneur parent.
- Éléments de bloc : (ex: <p>, <div>) s'affichent en dessous de leur frère précédent et occupent toute la largeur disponible.
- Éléments en ligne : (ex: <span>, <a>) s'affichent à côté de leur frère précédent et retournent à la ligne si l'espace manque.
Flux personnalisé : Certaines propriétés CSS permettent de sortir des éléments du flux normal (positionnement, flottement, flexbox, grid).

Techniques de Mise en Page des Boîtes

Diverses techniques CSS permettent de contrôler la disposition des éléments HTML :

Marges internes et externes.
Positionnement (propriété position).
xFlottants (float).
Flexbox (display: flex).
CSS Grid (display: grid).

1. Marges Externes / Padding

Le padding est l’espace intérieur d’un élément, c’est-à-dire la distance entre le contenu (texte, image…) et la bordure de l’élément.

Les marges externes contrôlent l'espace entre les éléments et leur environnement extérieur. Les navigateurs appliquent des marges par défaut, souvent réinitialisées ("CSS reset") pour un meilleur contrôle.

p {
  border: solid 2px red;
  background-color: yellow;
  width: 500px;
  padding: 20px; /* Marge interne */
}
h1 {
  border: dashed 3px green;
  background-color: purple;
  margin: 50px; /* Marge externe */
}
div {
  background-color: orangered;
  border: dotted 2px blue;
}

2. Positionnement (position)

La propriété position permet de contrôler la position d'un élément.

`static` (par défaut)	L'élément ne peut pas être positionné ou repositionné, il suit le flux normal du document.
`relative`	L'élément est positionné par rapport à sa position normale dans le flux. Il peut être décalé avec `top`, `right`, `bottom`, `left`. Il reste dans le flux et laisse un espace vide à son emplacement d'origine.
`absolute`	L'élément est retiré du flux normal et positionné par rapport au premier parent positionné (`relative`, `absolute`, `fixed`). S'il n'y a pas de parent positionné, il se positionne par rapport au corps de la page. Les autres éléments ne tiennent pas compte de cet élément.
`fixed`	Crée un élément indépendant du flux, positionné par rapport au viewport. L'élément reste fixe même lorsque la page défile.

z-index : Contrôle l'empilement (profondeur) des éléments positionnés. Plus la valeur est élevée, plus l'élément est au-dessus. Fonctionne uniquement sur les éléments positionnés (relative, absolute, fixed).

3. Propriété display

La propriété display change le mode d'affichage par défaut d'un élément HTML, sans modifier le code HTML.

display: block : L'élément se comporte comme un bloc (prend toute la largeur disponible, retour à la ligne). Ex : span { display: block; }.
display: inline : L'élément se comporte comme en ligne (ne prend que l'espace nécessaire, pas de retour à la ligne). Ex : p { display: inline; }.
display: inline-block : L'élément se comporte comme inline mais peut avoir une largeur et une hauteur définies. Utile pour des éléments alignés horizontalement mais avec des dimensions spécifiques.
display: list-item : L'élément se comporte comme un élément de liste (puce ou numérotation).

4. Positionnement Flottant (float)

La propriété float retire un élément du flux normal et le positionne le plus à droite ou le plus à gauche possible dans son conteneur.

float: right | left | none
clear: right | left | both : annule l'effet du flottement et permet aux éléments suivants de ne plus être affectés par les flottants précédents.

Différence entre display: none et visibility: hidden :

visibility: hidden; : rend l'élément invisible mais il continue d'occuper de l'espace dans la disposition de la page.
display: none; : rend l'élément invisible et le retire complètement du flux de la page, il ne prend donc pas de place.

5. Flexbox (display: flex)

Le module Flexbox (Flexible Box Layout) crée des mises en page unidimensionnelles complexes et flexibles, particulièrement utiles pour le responsive design. Il gère la distribution, l'alignement et le centrage des éléments enfants d'un conteneur.

Conteneur flex : Un élément avec display: flex; ou display: inline-flex; transforme ses enfants directs en éléments flexibles (flex items).
Axes :
- Axe principal : Direction des éléments enfants (par défaut, horizontal de gauche à droite).
- Axe transversal : Perpendiculaire à l'axe principal (par défaut, vertical de haut en bas).

Propriétés CSS pour le conteneur flex :

flex-direction : Définit la direction de l'axe principal (row, row-reverse, column, column-reverse).
justify-content : Contrôle l'alignement des éléments sur l'axe principal (flex-start, flex-end, center, space-between, space-around, space-evenly).
align-items : Alignement des éléments sur l'axe transversal (flex-start, flex-end, center, baseline, stretch).
flex-wrap : Définit si le contenu s'affichera sur une seule ligne ou plusieurs (nowrap, wrap, wrap-reverse).
align-content : Contrôle l'espacement entre les lignes quand flex-wrap: wrap; est activé.

Propriétés CSS pour les éléments flex (flex items) :

order : Contrôle l'ordre d'affichage des éléments indépendamment de leur ordre dans le code source (valeur par défaut 0).
flex-grow : Indique si l'élément peut grandir pour remplir l'espace vacant. Valeur sans unité (par défaut 0).
flex-shrink : Indique la proportion avec laquelle l'élément devrait rétrécir si l'espace est insuffisant. Valeur sans unité.
flex-basis : Dimension idéale de l'élément avant que flex-grow ou flex-shrink n'intervienne (équivalent de width ou height selon flex-direction).
Raccourci flex : combine flex-grow, flex-shrink et flex-basis. Ex: flex: 1 1 200px;.
align-self : Aligne un élément spécifique sur l'axe transversal, supplantant l'align-items du conteneur.

Avantages de Flexbox :

Disposition facile : Simplifie la création de mises en page complexes.
Mise en page réactive : Les éléments s'adaptent dynamiquement à l'espace et à la taille de l'écran.
Alignement et centrage facile : Propriétés dédiées.
Contrôle individuel : Propriétés spécifiques pour chaque flex item.

Responsive Web Design (RWD) et Media Queries

Le Responsive Web Design (RWD) est une approche qui permet aux sites web de s'adapter automatiquement à la taille de l'écran et au périphérique utilisé, grâce notamment aux Media Queries.

Media Queries

Une media query est une fonctionnalité CSS qui applique des styles en fonction des caractéristiques du périphérique (largeur, hauteur de l'écran, résolution, orientation, type de média, etc.).

@media (condition) {
  /* Règles CSS */ 
}

Opérateurs logiques : and, , (ou logique), not.

Exemple :

@media (max-width: 768px) {
  body {
    font-size: 10px;
  }
}

Types de médias (media attribut dans <link>) :
- all (par défaut) : tous les types de médias.
- screen : pour les écrans.
- print : pour l'impression.
- speech : pour les synthétiseurs vocaux.
Caractéristiques d'appareil : max-width, min-width, orientation (portrait, landscape), min-resolution, max-resolution.

Utilisations courantes :

Adapter la disposition (ex : grille vers colonne).
Modifier les tailles de police.
Cacher ou afficher des éléments.

Bonnes pratiques :

Mobile First : Concevoir d'abord pour les petits écrans, puis adapter aux plus grands.
Éviter les tailles fixes : Utiliser des unités relatives (%, em, rem, vw, vh).
Tester sur plusieurs appareils.

Bir quiz başla

Bilgini etkileşimli sorularla test et