CSS - Cascading Style Sheets

Jean-Marie Vallet

Introduction

Principe de CSS :
Décrire l'aspect d'un document en fonction de sa structure
Utilisable pour tout langage de type XML
Pour (X)HTML :
une CSS est définie par extension de la feuille de style par défaut du navigateur
Autres avantages :
- uniformité d'un site web,
- présentation selon le media de sorti,
- coût de redign et de maintenance réduit
- allègement des pages, réduction de la bande passante utilisée

Limitation

Trois versions de CSS: 1.0, 2.0, 2.1. et 3.0 (non finalisée). A l'heure actuelle utilisez la 2.1
Implémentations partielles ou eronnées.
Styles par défauts différents.
Conclusion : il est impossible d'obtenir le même aspect sur toutes les combinaisons navigateur / système d'exploitation.
Une seule règle : « testez vos styles ! »
- Plusieurs navigateurs : ie6, ie7, Firefox, Opera, Safari ...
- Plusieurs OS : Windows, OS X, Linux ...

Incorporation dans XHTML

Définition directe dans un élément :
<p style="text-align: center; font-size: 18px;">...
Définition dans le document :
<head> ... <style type="text/css"> ... </style> ... </head>
Définition dans un document séparé :
<link rel="stylesheet" type="text/css" href="format.css" media="print"/>

Le jargon CSS

#exemple p.toto{
	background-color:  #333;
	/* voici un commentaire */
	color : green;
	font-weight : bold;
	 }

#exemple est un sélecteur d'ID, l'espace suivant est un sélecteur descendant, p est un sélecteur de type et .toto est un sélecteur de classe.
background-color, color, font-weight sont des propriétés et #333, green, bold sont les valeurs correspondantes.
L'ensemble constitue une règle.

Cascade et héritage (1)

Origine des feuilles de styles appliquées à un document :

Le navigateur : il fournit une feuille de style par défaut.
L'auteur : feuille de style associées au document.
L'internaute : peut grâce à son navigateur appliquer une feuille de style spécifique.

Les mécanismes de cascade et d'héritage définissent le processus d'application des feuilles de style à un document.

Cascade et héritage (2)

La cascade

Elle détermine comment sélectionner les règles applicables à un chaque élément en cas de conflit.

Tris des règles CSS (navigateur/auteur/internaute)
Tris par spécificité
Tris par ordre d'apparition

La syntaxe !important placée en fin de déclaration de propriété permet à l'utilisateur de remplacer une proriété qui nuit à son confort.

Cascade et héritage (3)

L'héritage

Les éléments voients certaines de leurs propriétes hériter leur valeur de celle utilisée par un élément conteneur.

Exemple : body { color : green; margin : 20px; } Tous le texte des éléments p par exemple seront affichés en verts, par contre le p n'auront pas une marge de 20px.

Chaque propriété peut ou non bénéficier de l'héritage, il convient donc de se référer aux spécifications CSS ou tout est présisé.

Les sélecteurs (1/3)

Déterminent à quels éléments s'appliquent des propriétés

Sélecteurs généraux

* tous les éléments 
E tout élément E
E.toto tout élément E d'attribut class="toto"
E#tutu tout élément E d'attribut id="tutu"
E, F tout E ou F

Les sélecteurs (2/3)

Sélecteurs hiérarchiques

E F tout F descendant d'un E
E > F tout F enfant d'un E
E + F tout F précédé d'un E

Pseudo-éléments

E:first-line la première ligne de tout E 
E:first-letter la première lettre de tout E 
E:before un élément inséré avant tout E 
E:after un élément inséré après tout E

Les sélecteurs (3/3)

Pseudo-classes

E:first-child tout E qui est frère aîné
E:link tout lien pas encore suivi
E:visited tout lien déjà suivi
E:hover tout E désigné
E:active tout E activé
E:focus tout E qui est focus de saisie

Unités absolues et relatives

Expression de la taille par unités absolues et relatives, leur utilisation est fonction du média.

Unités absolues

cm, in (Pouces=2.54cm), mm, pc (Picas=12pt), pt (Point=1/72 de pouce), px (selon la résolution de l'écran)

Unités relatives

% : pourcentage de la valeur hérité
em : hauteur de la lettre M, relatif à la fonte
ex : hauteur de la lettre x

Elément en ligne et de type bloc

Balise en ligne

Ils définissent la mise en forme de groupe de mots ou d'éléments au seins d'un bloc (liens, images, emphase ...). Peuvent s'imbriquer mais ne peuvent contenir d'élément de type blocs. Ex : balises a, code, em, strong, label, input, span, sub ...

Element de type bloc

Ils définissent la mise en forme de paragraphes, entête, titres et autres zones de la page. Ils s'affiche les uns sous les autres. Peuvent contenir des éléments blocs ou en ligne. Ex : balises h1, ul, pre, table, div, form ...

La propriété display permet de modifier un élement de type block en élément de type en ligne et inversement.

Les propriétés (1/11)

Typographie (1/2)

font-family : type de police appliquée (nom de police et nom générique)
font-size : taille de la police appliquée (em, %)
color : couleur de la police appliquée (valeurs rgb, hexa, mots clés)
font-style : orientation de la police (normal, italic, oblique)
font-weight : graisse de la polis (bold, normal, valeur numérique ...)

Les propriétés (2/11)

Typographie (2/2)

text-decoration : soulignement, surlignement, barré
text-transform : mise en majuscule, minuscule ...
text-indent : valeur de l'alinéa
line-height : hauteur de ligne
letter-spacing : espace entre chaque lettre
word-spacing : espace en tre chaque mot

Les propriétés (3/11)

Bordures

Propriété border : applicable à tout élement

border-width : épaisseur de bordure (border-left-width:1px;)
border-color : couleur de bordure (border-top-color:#aaa;)
border-style : style appliqué à la bordure (dotted, solid, dashed ...)

Ex de forme condensée : border : 1px solid red;

Les propriétés (4/11)

Arrière-plans

Propriété background : applicable à tout élement

background-color : couleur d'arrière-plan
background-image : image en arrière plan, indiquer l'url
background-repeat : répétition d'image
background-attachement : image fixe ou non par rapport au document
background-position : position initiale de l'arrière plan

Ex de forme condensée : background:transparent url(fond.png) repeat-x O O

Les propriétés (5/11)

Tableaux

border-collapse : bordures fusionnées ou non
border-spacing : distance entre les bordures
empty-cells : indique si les cellules vides sont affichées ou non
vertical-align : alignement vertical du contenu

Les propriétés (6/11)

Propriété de dimensionnement

S'applique complètement aux éléments de type bloc

width / min-width / max-width
Height / min-height / max-height
margin (top/right/bottom/left)
padding (top/right/bottom/left)

Les propriétés (7/11)

Propriété de positionnement (1/2)

display : changement de le structure de l'élément (inline, block, table, none, ... )
visibility : Affiche ou masque un élément (visible, hidden)
position : détermine le positionnement d'un élément. static, absolute, relative, fixed (non supporté par ie)
top / right / bottom / left : controle de la distance entre élément et son éventuel conteneur. Valide pour position != static

Les propriétés (8/11)

Propriété de positionnement (2/2)

z-index : permet de spécifier l'ordre d'empilement des éléments.
float : fait passer l'élément en positionnement flottant et détermine de quel coté du parent celui-ci est affiché. (right, left, none)
clear : détermine si l'élément peut se trouver sur la même bande horizontale qu'un élément flottant. (none, left, right, both)

Les propriétés (9/11)

Propriétés de liste

list-style-image : image affichée en remplacemet de puce, indiquer l'url
list-style-type : définit l'aspec de la puce. Ex : disc, circle, square, none ...
list-style-position : indique l'emplacement de la puce par rapport à la liste. (inside, outside)

Ex de forme condensée : list-style : none inside url(puce.png);

Les propriétés (10/11)

Spécification du média

Se fait lors de la définition du document séparé :


				<link rel="stylesheet" type="text/css" href="style.css" media="print"/>

					<link rel="stylesheet" type="text/css" href="style2.css" media="screen"/>

					<style type="text/css"> @import(style.css) screen </style>

Type de média : all, screen, projection, braille, speech, ...

Les propriétés (11/11)

Propriétés de sortie imprimante

@page {propriétés} : permet d'établir les règles de mise en page avec les propriétés suivantes :

size : taille et orientation de la page imprimée
marks : hirondelles
page-break : saut de page
orphans : éviter les orphelines
widows : éviter les lignes veuves

Conseil de syntaxe

Utiliser les formes condensées
padding : 0.2em 0;
Regrouper les propriétés
p, form { padding : 0.5em;border:1px solid red; }
Utilisé les valeurs hexa pour les couleurs
color : #25a;
Séparer les propriétés de positionnement des autres pour améliorer la lisibilité
choisir les noms de classe en fonction du sens du contenu et non de la mise en forme à appliquer

Références et pour aller plus loin

Spécification du W3C
A list Apart
CSS Zen Garden
AlsaCréation
CSS Mémento
Bien développer pour le Web 2.0

Présentation réalisée avec S5

Année Spéciale ENSIMAG - 12/02/2007

Techniques de programmation pour Internet