2. Plan du chapitre
1. Introduction
2. Historique
3. Structure des feuilles de
styles
4. Héritage
5. Localisation externe, interne,
intra-ligne
6. Règles de rédaction
7. Sélecteurs regroupés
8. Notions de boites
9. Propriétés de styles
10. Notions de class
11. Notions de pseudo-class
12. Notions de pseudo-élément
13. Règles spéciales
14. Unités de mesures
15. Font WEB
3. Introduction
Les feuilles de styles offrent un moyen efficace pour
contrôler l'apparence et le rendu des documents
HTML.
Elles permettent de séparer le contenu de la forme.
L'acronyme CSS signifie Cascading Style Sheets
(feuilles de styles en cascade).
4. Historique
• Conçu initialement pour HTML, la première version dite
CSS niveau 1 (CSS-1) est publiée en 1996,
• Les feuilles de styles sont apparues en 1997 avec le
browser Internet Explorer 3.0,
• 1998, le W3C publie une nouvelle version CSS-2. Elle
introduit la notion de type de média,
• Elles se sont généralisées avec les versions 4.0 d'Internet
Explorer et de Netscape Navigator.
• Tous les navigateurs WEB récents gèrent CSS-2,
5. Structure des feuilles de styles
• Une feuille de styles est composée d'un ensemble de descriptions de styles.
Sélecteur {
propriété: valeur;
propriété: valeur …
}
• Exemple :
H2 {
COLOR: navy;
FONT: 18px;
FONT-FAMILY: sans-serif
}
• Aucune limite dans le nombre de couple propriétés / valeurs
6. Localisation des styles
La déclaration de règles de styles peut être
soit :
• externe au document HTML dans une feuille de
style,
• interne au document HTML dans la section
HEAD,
• intra-ligne, associé à l’attribut style d’une balise
7. Feuille de styles externe
• Séparation de la présentation de la page
HTML,
• Réduit la taille de la page HTML,
• Style identique pour l’ensemble d’un site,
• Évolution rapide du « design » d’un site.
• Feuille de style spécifique au média (taille
de l’écran, imprimante,...)
8. Feuille de styles externe
• Une feuille de styles externe est un fichier texte portant habituellement
l'extension .css,
• Le lien entre le document HTML et le fichier CSS s’effectue dans la
section <HEAD> d’un document HTML,
• Exemple :
<HEAD>
<TITLE>Histoire des feuilles de styles</TITLE>
<link REL="StyleSheet" TYPE="text/css" HREF="../styles.css">
</HEAD>
1. La balise <LINK> avertit le navigateur qu'il doit établir un lien
2. rel=stylesheet précise qu'il s'agit d'une feuille externe
3. type="text/css" avertit qu'il s'agit de feuilles de style en cascade
4. href=" ... " définit l'emplacement de la feuille de style
9. Feuille de styles interne
• Une feuille de styles interne est inséréee en en-tête du
fichier HTML à l'aide de l’élément <STYLE>,
• Ces styles seront définies uniquement pour le document
courant.
• Exemple :
<HEAD>
<TITLE>Nom du document</TITLE>
<style>
P {COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif}
</style>
</HEAD>
10. Styles intra-ligne
• La description d'un style intra-ligne est insérée directement
dans la balise d'ouverture d'un élément HTML,
• Le style est appliqué à l'aide de l'attribut HTML style
inséré dans la balise d'ouverture de l’élément,
• Exemple :
<P STYLE="COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif">
11. Règles de rédaction
Les règles sont à la base de toute feuille de styles.
Elles ont une syntaxe précise et sont construites de
la manière suivante :
Sélecteur {propriété: valeur; propriété: valeur …}
Une règle est composée du sélecteur suivi du bloc
de déclaration définissant le style.
L’ensemble des balises HTML sont des sélecteurs
potentiels
12. Règles de rédaction
Les accolades ( { } ) fixent les limites d'un bloc de
déclarations. Un bloc de déclaration comprend l'ensemble
de toutes les déclarations composant un style.
Une déclaration est composée du nom d'une propriété,
suivi du caractère deux-points ( : ) puis des valeurs
associées à la propriété.
Chaque déclaration doit être terminée par un ;
13. Sélecteurs regroupés
• Possibilité de regrouper plusieurs sélecteurs
pour une même description de style.
• Exemple :
H1, H2, H3, H4 {color: blue}
est identique à
H1 {color: blue}
H2 {color: blue}
H3 {color: blue}
H4 {color: blue}
14. Notions de boîtes
• Le concept de boîte (box) dans CSS-2 permet de définir les
surfaces sur lesquelles sont appliquées plusieurs
propriétés.
• Le contenu de presque tous éléments d'un document est
inséré dans une boîte.
• Il est possible qu'une boîte soit placée à l'intérieur d'une
autre et ainsi de suite.
• Une boîte qui en contient une autre devient la boîte
englobante de la deuxième.
• Chaque boîte est composée de plusieurs rectangles portant
des noms et ayant un rôle à jouer.
15. Notions de boîtes
• Ces rectangles sont formés par :
– les marges (margin)
– les bordures (borders)
– la boîte de remplissage (padding)
– la boîte de contenu (content)
16. Notions de boîtes
• Les balises DIV permettent de définir des "couches"
contenant des éléments et pouvant être positionnées sur
l'écran.
• Il s'agit de balises HTML spéciales pouvant contenir elles-
mêmes d'autres balises HTML, et dont les attributs sont
entre-autres:
– La position par rapport au haut du navigateur,
– La position par rapport à la bordure gauche du navigateur,
– La largeur,
– La hauteur,
– Le Z-Index, c'est-à-dire le niveau de superposition de la balise
17. Identifiants
• Les ID permettent d'identifier les balises et
d'associer un style à une balise.
<BALISE ID="nom_ID" > ... </BALISE>
• Dans le CSS, on définit le style d’un ID avec #
#nom_ID { style }
18. Classe CSS
• Les classes permettent d'affecter des styles différents à des
balises (modification dynamique de l'aspect d'une page
HTML).
• Il est possible d’ajouter une classe à un sélecteur.
La définition des classes :
.nom_de_la_classe {propriété de style: Valeur; propriété de style: Valeur ...}
Pour utiliser une classe :
<BALISE class="nom_de_la_classe"> ... </BALISE>
19. Classe CSS
• Une classe peut être utilisée sur plusieurs sélecteurs
<style>.red {color:red;}</style>
<p class="red">Bonjour<p>
<a class="red" href="…">Cliquer ici</a>
• Un sélecteur peut suivre plusieurs classes
<style>
.italique {font-style: oblique 40deg; }
.surligne {background-color:yellow}
</style>
<span class="red italique surligne">Attention<span>
20. Classe CSS
Une même balise peut avoir plusieurs descriptions de styles.
• Exemple :
Q.fra {color: blue}
Q.ang {color: red}
• L'application des styles ainsi définis s’effectuera via
l'attribut class:
• Exemple :
<Q CLASS="fra">contenu de l'élément…
<Q CLASS="ang">contenu de l'élément…
21. Notions de pseudo-class
Les pseudo-classes sont en fait des classes
spéciales permettant d'obtenir des effets
particuliers.
Exemple : Pseudo-classe :first-child
:first-child La pseudo-classe :first-child affecte
le premier élément-enfant d'un autre élément.
22. Notions de pseudo-class
• Exemple de règle
DIV > P:first-child {color: blue}
Le premier sélecteur indique l’élément parent,
le signe > précède le deuxième sélecteur pour
lequel la pseudo-classe :first-child est spécifiée.
On comprendra ainsi que tout premier élément-
enfant "paragraphe" d'un élément <DIV> sera
affiché en bleu dans le document.
23. Notions de pseudo-class
• Pseudo-classes pour les liens
:Link, :visited Ces deux pseudo-classes permettent de
définir un style pour les hyperliens non-visités (link) et un
autre pour les hyperliens visités (visited).
• Exemple de règle :
A:link {color: blue}
A:visited {color: green}
• Ainsi, les hyperliens non-visités seront affichés en bleu et
les hyperliens visités seront affichés en vert.
24. Notions de pseudo-class
• Pseudo-classes dynamiques
• Ces pseudo-classes permettent de définir des effets
de style survenant lors d'actions de l'utilisateur.
:hover Survient lorsque l'utilisateur pointe l’élément
• Exemple de règle
A:hover {background-color: yellow}
• la couleur d'arrière-plan d'un hyperlien passera au
jaune dès que l'utilisateur le pointera.
25. Notions de pseudo-class
:active Survient lorsque l'utilisateur active (clique
sur) l'élément :
• Exemple de règle :
A:active {color: red}
• la couleur du texte d'un hyperlien passera au rouge
dès que l'utilisateur l'activera.
26. Notions de pseudo-class
:focus Survient lorsque l’élément obtient le focus
via le clavier ou le pointeur de la souris.
• Exemple de règle :
A:focus {font-size: larger}
• la taille du texte sera augmentée d'un cran lorsque
l’élément obtiendra le focus.
27. Notions de pseudo-éléments
• Ils permettent d'agir sur du contenu impossible à
identifier avec le langage HTML.
:first-line Sélectionne la première ligne d'un
élément.
• Exemple de règle :
P:first-line {color: blue}
• La première ligne de chaque paragraphe sera
affichée en bleu.
28. Notions de pseudo-éléments
:first-letter Sélectionne la première lettre d'un élément,
• Exemple de règle :
P:first-line {font-size: 24pt}
• la première lettre de chaque paragraphe sera affichée avec
la taille 24 points.
:after :before
• Ces pseudo-éléments permettent l'insertion de texte ou
d'images devant ou après le texte de l’élément.
.coeur:before {content: "♥";}
29. Style des listes
• 3 propriétés s'appliquent aux éléments <ul> ou <ol>
• list-style-type définit le type de puces à utiliser
• list-style-position définit si les puces seront
disposées à l'intérieur ou à l'extérieur du début de l'élément de
liste.
• list-style-image permet d'utiliser une image
personnalisée pour la puce, plutôt qu'un simple carré ou rond.
• Exemple
ol { list-style-type: upper-roman; list-
style-position: inside;
list-style-image: url(star.svg) ;}
30. Règles spéciales
• Les AT-rules ou @rules sont destinées à fournir des
informations à l’application..
@import
• Utilisée au début d'une feuille de styles permet
l’importation d’une autre feuille de styles.
• Sa valeur doit être une URL
• Exemple de règle :
@import url(http://www.reseau.com/styles.css)
• On peut mettre plusieurs règles @import
31. Règles spéciales
@media
• Permet d'indiquer le média cible
• Plusieurs règles @media peuvent cohabiter.
• Chacune d'entre-elles devant être associées à des
règles spécifiques.
• Exemple de règle :
@media print {BODY {background-color: white}
• Dans cet exemple, la règle de style qui suit est
destinée aux imprimantes.
32. Règles spéciales
• Liste des médias disponibles
– all Tous les médias.
– aural Synthétiseurs vocaux.
– braille Appareils lisant le braille.
– embossed Imprimantes pour le braille.
– handheld Petits écrans, écrans monochromes, etc.
– print Imprimantes et dispositifs d'aperçu avant impression.
– projection Projecteurs, acétates électroniques.
– screen Écrans d'ordinateurs.
– tty Écrans de type télétype (terminaux).
– tv Télévision
33. Règles spéciales
@page
• Définir les paramètres d'une boîte de page (page box),
• Une boîte de page est une zone contenant deux aires
appelées aire de la page (page area) et aire des marges
(margin area),
• Cette règle permet d'insérer des instructions concernant les
dimensions, orientation, marges, etc. .
• La boîte de page agit en tant que boîte englobante
34. Règles spéciales
• La règle @page peut utiliser les propriétés suivantes :
– size,
– margin,
– marks
• Exemple :
@page { size: 8.5in 11in; margin: 2cm }
• Les propriétés des pages de gauche et de droite se présentent
comme suit :
@page :left { size: 8.5in 11in; margin: 2cm }
@page :right { size: 8.5in 14in; margin: 2cm }
• Il est aussi possible de spécifier les propriétés de la première
page du document :
@page :first { size: landscape; margin: 2cm }
35. Les unités de mesures
• Unités de longueurs (lenght)
• Les longueurs, tailles, épaisseurs des
propriétés définies dans les styles sont à
associer à des unités de mesures.
• Exemples. :
10pt
1.2em
0.7em
12px
0
36. Les unités de mesures
• Deux groupes d'unités de longueurs sont utilisées avec
CSS2 :
• Unités de longueurs relatives
– Elles permettent un ajustement automatique des dimensions
en fonction du support employé.
– em (relative à la taille définissant l'élément parent. 1.2em
= 120% de la taille de caractère définie dans l'élément parent)
– ex (relative à la valeur de la hauteur définie dans
l’élément parent (x-height) .)
– px (valeur relative à la résolution du support visuel, par
exemple l'écran)
37. Les unités de mesures
• Unités de longueurs absolues
Intéressantes uniquement lorsque le support de sortie du
document est connu à l'avance.
– in (pouces)
– cm (centimètres)
– mm (millimètres)
– pt (points; 1pt = 1/72in)
– pc (picas; 1pc = 12pt)
• Pourcentage
– Les pourcentages sont composés d'un nombre suivi du
symbole %.
38. Les unités de mesures
Les couleurs
• Une valeur de couleur est définie par un nom (nom
de la couleur lorsqu'elle existe) ou un code de
couleur RGB.
• Noms de couleurs :
aqua, black, fuschia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white et yellow.
• Codes de couleurs :
#rrggbb ex. : #6666FF
39. Les fonts WEB
• un bloc @font-face placé au début de la CSS
précise le ou les fichiers de fontes à télécharger :
@font-face { font-family: "myFont";
src: url("myFont.ttf"); }
• On peut utiliser le nom de la famille de polices
précisé dans @font-face pour appliquer la
police personnalisée
html { font-family: "myFont", "Bitstream Vera Serif",
serif; }
