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