image/svg+xml $ $ ing$ ing$ ces$ ces$ Res Res ea ea Res->ea ou ou Res->ou r r ea->r ch ch ea->ch r->ces$ r->ch ch->$ ch->ing$ T T T->ea ou->r

Les feuilles de styles en cascade (CSS)

  1. Les sélecteurs de nœuds
    1. Les sélecteurs de base
    2. Les opérateurs d'association
    3. Les pseudo-classes
    4. Les pseudo-éléments
  2. Les feuilles de style
  3. Spécificité de règles
  4. Héritage de propriétés
  5. Quelques propriétés CSS
    1. Mise en forme du texte
    2. Taille des composants
    3. Mise en page CSS
      1. Positionnement de conteneurs
      2. Agencement flexible flex
      3. Agencement grid
  6. Transitions CSS
  7. Les préprocesseurs CSS
  8. Les bibliothèques CSS

Les sélecteurs de nœuds

Les sélecteurs de base

Un exemple : un sélecteur sélectionnant les liens hypertextes de classe superLink pointant vers une URL commençant par ``https://example.com" :

a.superLink[href^="https://example.com"]

Les opérateurs d'association

Ces opérateurs permettant de sélectionner des nœuds à proximité d'autres nœuds dans l'arbre DOM :

Les pseudo-classes

Les pseudos-classes permettent de sélectionner des éléments selon certaines propriétés implicites transitoires ou durables. Certaines peudo-classes sont spécifiques à certains types de balises. Les pseudo-classes sont toutes introduites par le caractère :.

Nous listons les pseudo-classes les plus courantes :

☞ Il n'est possible de modifier que la couleur de liens avec la pseudo-classe :visited et l'API JavaScript retournera toujours la couleur d'un lien non-visité avec getComputedStyle() ; cela permet d'éviter à une page d'espionner l'historique des sites visités par un internaute.

Il existe aussi des pseudo-classes relatives au positionnement des éléments dans l'arbre DOM :

Les pseudo-éléments

Les pseudo-éléments sont des éléments virtuels qui n'existent pas dans l'arbre DOM et qui sont créés spécialement afin d'entourer certains éléments existants. Les pseudo-éléments sont préfixés par ::.

On peut par exemple ajouter du texte autour d'un élément (ici un lien hypertexte) avec les pseudo-éléments ::before et ::after :

a::before {
	content: "->";
}

a::after {
	content: "<-";
}

Les pseudo-éléments ::first-letter et ::last-letter permettent de cibler la première lettre (ou dernière lettre) d'un élément. On pourra ainsi par exemple mettre une lettrine pour les paragraphes :

p::first-letter {
	font-size: 150%;
}

Il existe également un pseudo-élément ::first-line sélectionnant la première ligne d'un élément.

::selection cible les éléments faisant l'objet d'une sélection par l'utilisateur.

Les feuilles de style

Une feuille de style est une liste de règles permettant d'appliquer des propriétés stylistiques de rendu à certains nœuds de l'arbre DOM en utilisant des sélecteurs.

Voici un exemple de feuille de style mettant le texte des paragraphes en couleur verte sauf les liens qui sont soulignés et mis en rouge :

p {
	color:green ;
}

p::first-letter {
	font-size: 150%;
}

p a {
	color: red;
	text-decoration: underline;
}

Une feuille de style peut être directement intégrée dans la page entre balises <style> dans l'en-tête :

<html>
	<head>
		...
		<style>
			p { color: green; }
			...
		</style>
	</head>
	<body>
		...
	</body>
</html>

Préférablement, elle peut être placée dans un fichier externe lié à la page :

<html>
	<head>
		...
		<link rel="stylesheet" type="text/css" href="mystyle.css">
	</head>
	...
</html>

On peut spécifier différentes variantes de feuilles de style selon le contexte d'affichage de la page avec l'attribut media. Par exemple <link rel="stylesheet" type="text/css" media="print" href="mystyle-print.css"> indique une feuille de style dédiée pour l'impression. Il est possible d'utiliser les médias suivants :

Il est possible aussi d'indiquer le style d'un élément directement dans l'élément lui-même avec l'attribut style. Par exemple :

<p style="color: red; font-size: 1.25em; border-top: solid;">Hello CSS!</p>

Spécificité de règles

Certaines règles peuvent posséder un sélecteur qui cible des nœuds communs avec des valeurs de propriétés conflictuelles. Par exemple imaginons la feuille de style suivante :

* {
	color: black;
}

a {
	color: blue;
}

a.aClass {
	color: green;
}

#mylink {
	color: red;
}

a[href^="http://example.com/page"] {
	color: gray;
}

a[href^="http://example.com"] {
	color: yellow;
}

Pour comprendre quelle règle sera appliquée selon les cas, nous devons considérer les sélecteurs par pouvoir de sélectivité décroissant :

Héritage de propriétés

Certaines propriétés de style sont héritées implicitement du nœud ancêtre dans l'arbre DOM alors que ce n'est pas le cas pour d'autres. Par exemple :

Par défaut chaque propriété de style d'un élément a la valeur unset :

Par exemple si l'on ne souhaite pas hériter la couleur de l'ancêtre et utiliser celle par défaut pour un paragraphe, on pourra définir la feuille de style suivante :

body { color: red; }
p { color: initial; } //* unset correspondrait à inherit pour color */

Quelques propriétés CSS

Il existe de nombreuses propriétés CSS (plus de 600) que ne nous pouvons pas décrire exhaustivement sur cette page. On pourra se référer aux pages suivantes :

Mise en forme du texte

Nous listons quelques propriétés pour le formatage du texte :

☞ Pour mettre en forme un passage de texte sans créer un nouveau nœud ayant un impact sur l'affichage ou une signification sémantique (par exemple p), on peut envelopper le texte dans un nœud <span class="myClass"> ... </span> avec une ou plusieurs classes CSS spécifiées. On peut ensuite écrire les règles s'appliquant à ces classes dans la feuille de style.

Taille des composants

La taille des composants peut être contrôlée avec différentes propriétés CSS :

Un élément CSS peut aussi disposer d'une bordure configurable avec la propriété border (et ses spécialisations border-left...). On peut modéliser un élément CSS ainsi :

Boîte CSS

Une dimension peut être exprimée en différentes unités :

☞ Il faut en générale privilégier les unités relatives plutôt que les unités absolues ce qui permet de réaliser un document s'adaptant aux différentes géométries d'écran ou de feuilles d'impression.

☞ On encapsule généralement les entités dans des conteneurs génériques div. On peut ensuite configurer la taille, les bordures, padding et marges des conteneurs div par règle CSS :

<div class="myDivClass">
	<img src="somePicture.jpg" />
	<p>
		Some paragraph of text
	</p>
</div>

Mise en page CSS

Positionnement de conteneurs

Les éléments à positionner sont généralement dans des conteneurs div. On utilise la propriété position pour le positionnement, cette propriété peut prendre les valeurs suivantes :

Agencement flexible flex

Le mode d'agencement flex a été introduit en 2009 pour faciliter l'agencement d'une chaîne de conteneurs sur une page.

On pourra consulter ces pages intéressants pour en savoir plus sur l'agencement flexible en CSS :

Agencement grid

Le mode d'agencement grid (display: grid) a été introduit à partir de 2017 pour disposer les éléments sur une grille avec de nombreuses propriétés CSS utilisables pour personnaliser le rendu.

Voici quelques propriétés CSS utilisable pour configurer la grille :

.container {
	display: grid;
	
	/* une colonne de longueur 100px, 200px, 300px */
	grid-template-columns: 100px 200px 300px;
	
	/* une colonne de 100px de large puis deux autres se partageant l'espace (avec 100px minimum garantis pour la 2ème) */
	grid-template-columns: 100px minmax(100px, 1fr) 1fr;
	
	/* repeat permet de répeter plusieurs fois des directives (ici 7 fois des colonnes de taille entre 100px et 1fr) */
	grid-template-columns: repeat(7, minmax(100px, 1fr));
	
	/* avec auto-fill, on ajoute autant de colonnes que le container parent peut en supporter */
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	
	/* à la différence d'auto-fill, auto-fit enlève les colonnes vides */
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	
	/* on peut rajouter une gouttière entre les colonnes et lignes */
	gap: 10px;
	
	/* on peut imposer une taille pour chaque rangée (ici minimale de 100px, auto s'adaptant à la hauteur des éléments dans la rangée) */
	grid-auto-rows: minmax(100px, auto);
	
	/* il est possible de nommer les lignes et colonnes pour le placement des éléments (. indique une zone vide sans nom) */
	grid-template-areas:
		"title  title   title"
		"menu1  content ."
		"footer foorter footer";

On peut placer un élément sur la grille en indiquant le nom de son area (si on a utilisé grid-template-areas) :

h1 {
	grid-area: title;
	
	/* on peut aligner horizontalement l'item sur le début, la fin, le centre ou étendre sur toute la zone */
	justify-self: start | end | center | stretch;
	
	/* on peut choisir comment aligner l'item verticalement */
	align-self: start | end | center | stretch;
}

On peut aussi indiquer explicitement les numéros de colonnes et lignes de placement (les colonnes et lignes sont numérotées depuis 1) :

.something {
		grid-row: 1; /* placement sur la 1ere ligne */
		grid-column: 1 / 4 /* placement sur les colonnes 1 à 4 exclues (donc 1, 2 et 3) */
}

Sans indication, les éléments sont placés sur la première ligne jusqu'à remplir toutes les colonnes, puis sur la deuxième...

Il est possible de positionner les lignes ou colonnes en mode masonry :

Pour en savoir plus sur le positionnement grid :

Transitions CSS

Les préprocesseurs CSS

Le rôle de préprocesseurs CSS est de proposer une nouvelle syntaxe plus puissante pour exprimer des feuilles de style. Chaque préprocesseur a ses spécificités ; leur objectif général est d'éviter la duplication de code. Par exemple on pourra trouver des fonctionnalités telles que :

Parmi les préprocesseurs les plus répandus, on peut citer :

Les feuilles de styles exprimés dans les langages de ces préprocesseurs sont ensuite transpilés en CSS pour être interprétables par les clients web.

Les bibliothèques CSS