Les feuilles de style CSS

Fontanet Rmy Vinay Julien

Istase 3

2 Dcembre 2002

Introduction
Utilisation des styles dans les logiciels qui manipulent du texte (traitement de texte, tableur, et logiciel de mise en page). Pour que le HTML ne fasse plus exception la rgle, le W3C lui a rajout cette fonctionnalit sous forme d'un complment appel "feuilles de style en cascade" (en anglais : "Cascading Style Sheets", CSS)

Plan
Introduction I - Prsentation des feuilles de style II - Exemple dutilisation III - Avantages / Inconvnients IV - Technologies concurrentes Conclusion

I - Prsentation des feuilles de style

Principes
Sparation du contenu et de la prsentation Prsentation uniforme d'un ensemble de documents Personnalisation possible

Adaptation divers mdias (cran, impression, audio...)

Plusieurs versions : CSS1, CSS2, CSS3

I - Prsentation des feuilles de style

Diffrentes versions
1996 : Cascading Style Sheet(CSS) : Dfinition d'un ensemble de rgles de prsentation 1998 : CSS2 : nouvelle version plus prcise, plus efficace, plus complte (tableaux, diffrents mdias...) 2000 : CSS3

I - Prsentation des feuilles de style

Hirarchie (cascading)
Le rdacteur dfinit ses styles (sa mise en page) Le lecteur peut dfinir ses prfrences, Le client (avec ses particularits : navigateur, synthse de parole...) interprte les styles ==> conflits possibles

Solution : "cascading" cd algorithme de choix bas sur la notion de "priorit" (niveau de dfinition, particularits...). A priorit gale, le rdacteur l'emporte mais le lecteur peut fixer une priorit "importante"

I - Prsentation des feuilles de style

Caractristiques du Texte :
- Couleur (texte, fond d'cran) - Police de caractres (famille, taille, style...) - Espacement (lettres, mots...)

Positionnement :
- Dfinition de rectangles ("boxes") avec marges, hauteur, largeur...

I - Prsentation des feuilles de style

Catgorie d'affichage :
- en ligne comme du texte italique - dans un bloc comme un titre H1 ou un paragraphe - dans une liste(position, images, types...)

Caractristiques lies aux diffrents mdias :

- Styles adapts une restitution audio - Dfinition de mise en page pour impression.

I - Prsentation des feuilles de style

Le Langage
Les interfaces Les slecteurs Les proprits

Les units

II Exemple dutilisation
Comment intgrer les feuilles de styles ?
L'instruction style en tant qu'lment :
<style type="text/css">

L'lment link pour tablir un lien vers une feuille de style externe (fichier texte avec l'extension .css) :
<link title="test" type="text/css" rel="stylesheet" href="mafeuille.css">

Importer une feuille de style (fichier texte avec l'extension .css) :

<style type="text/css"> @import url(http://www.allhtml.com/feuille.css); </style>

II Exemple dutilisation

constitue d'un ensemble de rgles prcisant la manire de prsenter une page web chaque rgle est constitue d'un slecteur, suivi d'un bloc de dclarations. Le slecteur prcise la portion de texte laquelle s'appliquent les dclarations chaque dclaration est constitue d'un identificateur, suivi d'une valeur. L'identificateur dcrit la proprit concerne (ex :taille des caractres), et la valeur dfinit la grandeur attribue l'identificateur (ex : 10 pts).

II Exemple dutilisation

II Exemple dutilisation

II Exemple dutilisation

III Avantages / Inconvnients

Avantages
Sparation du style et du contenu Libre les auteurs de contenu des contraintes de style et de prsentation Multiples possibilits de prsentation du mme jeu de donnes Rutilisation possible des donnes Permet une standardisation des styles

III Avantages / Inconvnients

Inconvnients
Plusieurs versions : CSS1, CSS2, - premire version CSS1 avec beaucoup de lacunes - parfois des actions inverses entre CSS1 et CSS2 Interprtation selon le navigateur Interprtation de la norme rarement complte L'utilisateur (le client) peut toujours les invalider

IV Technologies concurrentes
eXtensible Stylesheet Language
prsente visuellement des lments dfinis dans un document XML alors que le langage XML (eXtended Markup Language) dfinit plutt la smantique (le sens) des donnes. 2 parties principales : Le formatage : application de rgles de style sur des lments XML l'instar du langage CSS. La transformation : substitution d'un marquage XML en un balisage HTML ou un autre marquage XML.

IV Technologies concurrentes
Document Style Semantics and Specification Language
dfini par lISO. Le format DSSSL est utilis pour le rendu des documents SGML(Standard Generalized Markup Language, format normalis de documents). Il permet : de formater les documents pour l'affichage (langage de style) de transformer les documents : par exemple pour gnrer la table des matires (langage de transformation) l'extraction de donnes en considrant le document comme une base de donnes (langage d'extraction ou Query Language)

IV Technologies concurrentes
Formatting Output Specification Instance
Feuille de style qui permet de formater un document SGML pour une sortie papier. Issue du Dpartement de la Dfense amricain et son objectif est de permettre la composition de documentations techniques. Ne permet pas de raliser toutes les oprations ncessaires l'activit traditionnelle de pr-presse.

Conclusion
Les feuilles de style facilitent : - l'criture des pages en ne pensant qu'au contenu - l'volution du site (changement de l'image de fond, de la police...) Elles vont dans le sens de l'volution HTML --> XML ... Visualisation de documents XML : uniquement avec feuilles de style Les navigateurs interprteront de mieux en mieux les styles