CSS

Sommaire

Créer son site avec WordPress Introduction aux technologies web CSS

Cascading Style Sheet = feuille de style en cascade

Le CSS concerne la mise en forme de documents HTML. Il permet de rendre le site agréable à consulter.

Ex. choix de la police, de la taille, de la couleur des textes, choix des bordures, des fonds d'écran, largeur, hauteur et position des éléments, ...

Sans CSS, chaque élément HTML est affiché par le navigateur web avec un style par défaut.

Ex.

les éléments <strong> sont en gras
les éléments <q> sont encadrés par des guillemets
les éléments <p> forment des blocs qui s'affichent les uns en dessous des autres avec une marge haute et basse et leur texte est affiché avec la police par défaut du navigateur web
...

CSS permet de modifier ce style par défaut.

Concept important : séparation de la forme et du contenu

Bien que le CSS puisse être directement écrit dans le code source HTML, il est de bonne pratique, pour plus de clarté, de le séparer de la structure et du contenu, en le plaçant dans des feuilles de style .css.

Il peut y avoir plusieurs feuilles de style en cascade, la dernière sera celle prise en compte.

Les balises HTML disposent d'identifiant permettant d'appliquer un style via le feuille de style (fortement recommandé).

Plusieurs pages peuvent partager la même feuille de style afin de garantir l'homogénéité visuelle d'un site web.

Historique

CSS 1 : dès 1996, les. bases (couleurs, marges, polices de caractères, ...)
CSS 2 : apparue en 1999, avec notamment la possibilité d'utiliser des techniques de positionnement très précises
CSS 3 : dernière version en date qui apporte des fonctionnalités comme les bordures arrondies, les dégradés, les ombres, ...

Insérer une feuille de style dans l'en-tête d'un document HTML

Le chargement des feuilles de style s'effectue depuis la balise <head> ... </head> du document HTML.

Un même document peut utiliser plusieurs feuilles de style.

Structure d’une règle CSS

Le sélecteur détermine les éléments sur lesquels s'appliquent la règle.

Sélecteur

sélecteur d'élément ( = balise HTML)
sélecteur CSS de class : notation pointée (ex. .encadre ou span.motcle qui peuvent s'appliquer à plusieurs balises)
sélecteur CSS d'id : ex. #firstImage (un id est unique sur une même page)

Il est possible de regrouper plusieurs règles d'un même sélecteur, les définitions sont alors séparées par des points-virgules.

On peut factoriser les règles partagées par des sélecteurs, les sélecteurs sont alors séparés par des virgules.

Exemples de propriétés CSS

Propriété	Description
font-family	Type de police utilisée
font-size	Taille des caractères (en px, em, %, ...)
font-style	normal, italic, oblique
font-weight	normal, bold, lighter, ...
border	La bordure autour du contenu de l'élément (couleur, style, ...)
width	largeur du contenu (en px, em, %, ...)
color et background-color	Couleurs du texte et de l'arrière-plan (notation hexa #AAAAAA, symboles prédéfinis - ex. red, blue, ... ou rgb)

Le site caniuse.com vous permet de vérifier le niveau de compatibilité de la règle CSS que vous souhaitez appliquer.

Les problèmes venaient souvent des anciennes versions d’Internet Explorer (IE7, IE8, …) qui est maintenant abandonné.

Propriétés dynamiques

ex.

:hover : au survol
:visited : lien déjà visité
:link : lien non encore visité

Propriétés structurelles

ex.

:first-child : élément qui est le premier fils d'un autre
:last-child : élément qui est le dernier fils d'un autre

Pseudo-éléments

ex.

:before : insertion de contenu avant l'élément
:after : insertion de contenu après l'élément

Le contenu se définit grâce à la propriété content.

Variables

Principe de règles en cascades

Il peut y avoir des conflits de règles CSS.

Le mécanisme de cascade détermine les règles appliquées.

3 étapes de filtre :

Par média
Par origine
Par spécificité des sélecteurs

Notion d’héritage

Lorsque pour un élément aucune règle ne définit de valeur pour une propriété, c'est la valeur de cette propriété pour son parent qui s'applique.

Toutes les propriétés ne s'héritent pas : ex. margin, padding, ...

La propriété inherit permet d'agir sur l'héritage.

Les commentaires

Les commentaires ne sont pas exécutés, ils restent par contre visibles dans le code source, attention donc à ne pas y laisser d'informations confidentielles (ex. mots de passe) !

Gestion de la boîte

La propriété display définit le mode de gestion de la boîte d'un élément dans le flux de rendu.

Plusieurs valeurs possibles : none, block, inline, inline-block, ...

none : l'élément n'est pas affiché
block : ils peuvent contenir d'autres éléments block, inline ou du texte, ils ont par défaut la largeur de leur conteneur (élément parent), ils s'empilent verticalement les uns au-dessus des autres dans l'ordre du flux normal au sein de leur conteneur. Il est possible de fixer leur largeur et hauteur.
inline : ils ne peuvent contenir que d'autres éléments inline ou du texte, ils ont par défaut une largeur et haute définie par leur contenu, ils s'affichent les uns à la suite des autres selon le flux de texte naturel. Il n'est pas possible de fixer leur largeur et hauteur.
inline-block : ils peuvent contenir d'autres éléments block, inline ou du texte, ils ont par défaut une largeur et haute définie par leur contenu, ils s'affichent les uns à la suite des autres selon le flux de texte naturel. Il est possible de fixer leur largeur et hauteur.

Position

La propriété position permet d'agir sur le positionnement des boîtes.

position : relative permet de déclarer la position de la boîte par rapport à sa position attribuée par le flux normal (des chevauchements sont possibles via la propriété z-index)
position : absolu permet de retirer la boîte du flux normal, sa position est déterminée par rapport au conteneur (un parent positionné en absolute ou relative ou le contenu initial = <body> si aucun)
position : fixed permet de retirer la boîte du flux normal, sa position est déterminée par rapport à la fenêtre du navigateur web

Boîtes flottantes

La propriété float permet de créer des boîtes flottantes, retirées du flux normal et positionnées sur la gauche (float:left) ou la droite (float:right) de son conteneur, le reste du contenu s'affiche en s'écoulant autour.

Une boîte flottante acquiert automatiquement la propriété display:block et doit posséder une largeur.

La propriété clear permet d'interdire le flottement sur un élément bloc :