Chapitre 4. Les feuilles de styles : CSS CSS : Cascading style sheet

Chapitre 4. Les feuilles de styles : CSS

CSS : Cascading style sheet

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. Commentaires

16. Filtres d’images

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.

Tous les navigateurs n'interprètent pas toutes les propriétés CSS2 au même degré.

L'acronyme CSS signifie Cascading Style Sheets (feuilles de styles en cascade).

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.

• IE 5 gère la quasi totalité des spécifications CSS-2,• Le site du W3C propose une validation en ligne permettant

de vérifier la conformité d’un style à la norme CSS-2.

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

Héritage

• Pour chaque propriété la valeur « inherit » permet de préciser si la valeur doit être héritée.

• Exemple : H3 {

COLOR: navy; FONT: inhérit; FONT-FAMILY: sans-serif

}

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

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,...)

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

Feuille de styles interne• Une feuille de styles interne est insérée 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></style></HEAD>

• Application d'un style sur un élément<P CLASS="toto">texte du paragraphe…

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">

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.

Le sélecteur identifie le style, il lui donne son nom.

L’ensemble des balises HTML sont des sélecteurs potentiels

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 ;

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}

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.

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)

• Une Balise DIV est un cadre avec un espace et une marge (une boite),

• Un Balise SPAN permet de définir un style spécifique pour un texte

Notions de boîtes

Notions de boîtes

• Les balises DIV / LAYER permettent de définir des "couches" contenant des éléments et pouvant être positionnées sur l'écran.

• Il s'agit en réalité 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

Notions de boîtes

• La première (LAYER) est une balise spécifique à Netscape Navigator,

• Les balises DIV et SPAN sont plus génériques mais sont toutefois mieux supportées par Internet Explorer que Netscape Navigator

• La syntaxe de la balise LAYER est la suivante: <LAYER NAME="Nom de la couche" LEFT="Distance au bord

gauche" TOP="Distance au haut">

éléments HTML

</LAYER>

Notions de boîtes

• Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version 4 ou supérieure) peut se faire de la manière suivante

• Exemple :

<LAYER NAME="IMG1" LEFT="20" TOP="30"><IMG SRC="image.gif"></LAYER> <LAYER NAME="IMG2" LEFT="25" TOP="35"><IMG SRC="image2.gif"></LAYER>

Notions de boîtes• Avec Internet Explorer (versions 4 et supérieures), le positionnement des

éléments se fait selon le concept des CSS-2, au moyen des balises DIV et SPAN.

• Avec les balises DIV et SPAN, le positionnement peut se faire de deux façons:

– Le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).

– Le positionnement relatif se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.

• La syntaxe des balises DIV/SPAN est la suivante: <DIV style="position: absolute; top: 99 px; left: 99 px; visibility : visible;z-index : 2;">éléments HTML</DIV>

Notions de boîtes• LAYER Attribut Valeur Libellé

Name Chaine Identifiant de la balise

Top Entier Position absolue / partie supérieur de l’écran

Left Entier Position absolue / partie gauche de l’écran

Width Entier Largeur

Height Entier Hauteur

zIndex Entier Position

Visibility Show

Hidden

Valeur de superposition

Notions de boîtes

• DIV

• SPAN

Attribut Style Valeur LibelléID Chaine Identifiant de la balise

Name Chaine Nom de la balise

Position staticabsoluterelative

Aucun mouvement par rapport au document

positionnement par rapport au document

par rapport à l'élément précédent

Top autovaleur numérique entièrevaleur en pourcentage (%)

distance au sommet automatique

distance au sommet en pixels

distance au sommet en pourcentage

Notions de boîtes

• DIV

• SPAN

Attribut Style Valeur LibelléLeft auto

valeur numérique entièrevaleur en pourcentage (%)

distance à la bordure gauche automatique

distance à la bordure gauche en pixels

distance à la bordure gauche en pourcentage

Width autovaleur numérique entièrevaleur en pourcentage (%)

largeur automatique

largeur de l'élément en pixels

largeur de l'élément en pourcentage Largeur

Notions de boîtes

• DIV

• SPAN

Attribut Style Valeur LibelléHeight auto

valeur numérique entièrevaleur en pourcentage (%)

hauteur automatique

hauteur de l'élément en pixels

hauteur de l'élément en pourcentage

zIndex autovaleur numérique entière

superposition automatique

valeur indiquant la profondeur

Visibility inherithiddenvisible

visibilité par défaut

caché

visible Valeur de superposition

Propriétés de styles

• Padding

• Margin

• Color

• Border

• Font

• Display

• Filtre d’image

Notions de class

• Les class 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>

• Javascript va permettre grâce à sa gestion d'événement de changer dynamique la classe associée à une balise. (cf cours spécifique).

Notions de class

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…

Notions de class

• Les ID permettent d'identifier les balises et d'associer un style à une balise.

• Javascript va référencer la règle de style voulue grace à l'ID

• On l'utilisera de la manière suivante : <BALISE ID="nom_ID" > ... </BALISE>

• Différences entre l’utilisation de l’ID et de la CLASS ?– ID unique

– CLASS multiple et modifiable

Notions de class

• En javascript pour changer la class associée à une balise on utilisera la propriété className.<P ID='nom_ID' onMouseOver = "className

='style'">Bonjour</P>

• Pour affecter un style à une balise en Javascript :document.all.nom_ID.style.propriété_de_style

Ou nom_ID est l’identifiant d’une balise <DIV> par exemple.

Notions de pseudo-class

Les pseudo-classes sont en fait des classes spéciales permettant d'obtenir des effets particuliers.

Certains des effets sont dynamiques et surviennent pendant ou après une action de l'utilisateur.

• Pseudo-classe :first-child

:first-child La pseudo-classe :first-child affecte le premier élément-enfant d'un autre élément.

• Exemple de règle DIV > P:first-child {color: blue}


• Analyse de la syntaxe utilisée.

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.


• 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.


• 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ègleA:hover {background-color: yellow}

• la couleur d'arrière-plan d'un hyperlien passera au jaune dès que l'utilisateur le pointera.


: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.


• ExempleA:link{

color : #000099;text-decoration : none;font-weight : normal}

A:visited{color : #000099;text-decoration : underline;font-weight : bold;}

A:hover{color : #ff0066;text-decoration : underline;font-weight : normal;}


: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.

Notions de pseudo-éléments

• Il existe quatre pseudo-éléments. Ils permettent d'agir sur du contenu impossible à identifier avec le langage HTML.

:first-lineSé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.

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.

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)

• Plusieurs règles @import une à la suite de l'autre.

http://www.reseau.com/styles.css






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.

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

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

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 }

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. : 10pt1.2em0.7em12px0


• 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)


• Unités de longueurs absoluesInté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 %.


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 : #rrggbbex. : #6666FF

Les commentaires

P { font-size : 10px ; } /* commentaire ici */

Les filtres d’images

• Spécifiques à Internet Explorer • Disponibles à partir de la version

– xRay(enabled=1) – gray(enabled=1) – invert(enabled=1)– alpha(opacity=15,enabled=1) – flipV – flipH

• Exemple<STYLE>.filtre {filter:xRay(enabled=1) gray(enabled=1)

invert(enabled=1) alpha(opacity=15,enabled=1) flipV flipH}</STYLE>

Les filtres d’images• Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)• BlendTrans(Duration=?)• Blur(Add=?, Direction=?, Strength=?)• Chroma(Color=?)• DropShadow(Color=?, OffX=?, OffY=?, Positive=?)• FlipH• FlipV• Glow(Color=?, Strength=?)• Gris• Invert (invert)• Lumière• Mask(Color=?)• RevealTrans(Duration=?, Transition=?)• Shadow(Color=?, Direction=?)• Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)• Xray

Les filtres d’images• Exemple :

– fliph(enabled=1)– flipv(enabled=1)– gray(enabled=1)– invert(enabled=1)– xray(enabled=1)– alpha(opacity=50,enabled=1)– blur(direction=45,strength=15, add=0, enabled=1)– chroma(color=#FF0000 ,enabled=1)– dropshadow(offx=5, offy=9, color=#008fff,enabled=1)– glow(strength=5, color=#ffff00,enabled=1)– mask(color=#FF0000 ,enabled=1)– shadow(color=#FF0088,direction=315,enabled=1)– wave(freq=2, strength=6, phase=0, lightstrength=0, add=0, enabled=1)– wave(freq=4, strength=8, phase=0, lightstrength=25, add=1,

enabled=1)– chroma(color=#ff0000,enabled=1) shadow(color=#ff0000,enabled=1)

chroma(color=ffff00,enabled=1)

Documents

Chapitre 4. Les feuilles de styles : CSS CSS : Cascading style sheet