Les feuilles de style CSS

Fontanet Rémy
Vinay Julien

Istase 3 2 Décembre 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
règle, le W3C lui a rajouté cette fonctionnalité
sous forme d'un complément appelé "feuilles de
style en cascade" (en anglais : "Cascading Style
Sheets", CSS)
 Plan

• Introduction
• I - Présentation des feuilles de style
• II - Exemple d’utilisation
• III - Avantages / Inconvénients
• IV - Technologies concurrentes
• Conclusion
I - Présentation des feuilles de style

Principes
•Séparation du contenu et de la présentation

•Présentation uniforme d'un ensemble de documents

•Personnalisation possible

•Adaptation à divers médias (écran, impression, audio...)

•Plusieurs versions : CSS1, CSS2, CSS3

I - Présentation des feuilles de style

Différentes versions
•1996 : Cascading Style Sheet(CSS) : Définition d'un ensemble de
règles de présentation

•1998 : CSS2 : nouvelle version plus précise, plus efficace, plus

complète (tableaux, différents médias...)

•2000 : CSS3
I - Présentation des feuilles de style

Hiérarchie (cascading)
•Le rédacteur définit ses styles (sa mise en page)
•Le lecteur peut définir ses préférences,
•Le client (avec ses particularités : navigateur, synthèse de parole...)
interprète les styles ==> conflits possibles

•Solution : "cascading" càd algorithme de choix basé sur la notion de

"priorité" (niveau de définition, particularités...).
A priorité égale, le rédacteur l'emporte mais le lecteur peut fixer une
priorité "importante"
I - Présentation des feuilles de style

• Caractéristiques du Texte :
- Couleur (texte, fond d'écran)
- Police de caractères (famille, taille, style...)
- Espacement (lettres, mots...)

• Positionnement :
- Définition de rectangles ("boxes") avec marges, hauteur, largeur...
I - Présentation des feuilles de style

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

• Caractéristiques liées aux différents médias :

- Styles adaptés à une restitution audio

- Définition de mise en page pour impression.

I - Présentation des feuilles de style

Le Langage

• Les interfaces
• Les sélecteurs
• Les propriétés
• Les unités
II – Exemple d’utilisation

Comment intégrer les feuilles de styles ?

• L'instruction style en tant qu'élément :
<style type="text/css">
• L'élément 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 d’utilisation

• constituée d'un ensemble de règles précisant la manière de présenter

une page web
• chaque règle est constituée d'un sélecteur, suivi d'un bloc de
déclarations. Le sélecteur précise la portion de texte à laquelle
s'appliquent les déclarations
• chaque déclaration est constituée d'un identificateur, suivi d'une valeur.
L'identificateur décrit la propriété concernée (ex :taille des caractères), et
la valeur définit la grandeur attribuée à l'identificateur (ex : 10 pts).
II – Exemple d’utilisation
II – Exemple d’utilisation
II – Exemple d’utilisation
III – Avantages / Inconvénients

Avantages
• Séparation du style et du contenu

• Libère les auteurs de contenu des contraintes de style et de

présentation

• Multiples possibilités de présentation du même jeu de données

• Réutilisation possible des données

• Permet une standardisation des styles

III – Avantages / Inconvénients

Inconvénients
• Plusieurs versions : CSS1, CSS2, …
- première version CSS1 avec beaucoup de lacunes
- parfois des actions inverses entre CSS1 et CSS2

• Interprétation selon le navigateur

• Interprétation de la norme rarement complète

• L'utilisateur (le client) peut toujours les invalider

IV – Technologies concurrentes

eXtensible Stylesheet Language

présente visuellement des éléments définis dans un document XML

alors que le langage XML (eXtended Markup Language) définit plutôt
la sémantique (le sens) des données.
2 parties principales :
•Le formatage : application de règles de style sur des éléments 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

défini par l’ISO.
•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 générer la table des
matières (langage de transformation)
• l'extraction de données en considérant le document comme une base
de données (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 Département de la Défense américain et son objectif est de
permettre la composition de documentations techniques.
•Ne permet pas de réaliser toutes les opérations nécessaires à 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 interpréteront de mieux en mieux les styles