La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Les feuilles de style CSS Fontanet Rémy Vinay Julien Istase 32 Décembre 2002.

Présentations similaires


Présentation au sujet: "Les feuilles de style CSS Fontanet Rémy Vinay Julien Istase 32 Décembre 2002."— Transcription de la présentation:

1 Les feuilles de style CSS Fontanet Rémy Vinay Julien Istase 32 Décembre 2002

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

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

4 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

5 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

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

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

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

9 I - Présentation des feuilles de style Le Langage • Les interfaces • Les sélecteurs • Les propriétés • Les unités

10 II – Exemple d’utilisation Comment intégrer les feuilles de styles ? • L'instruction style en tant qu'élément : • L'élément link pour établir un lien vers une feuille de style externe (fichier texte avec l'extension.css) : • Importer une feuille de style (fichier texte avec l'extension.css) url(http://www.allhtml.com/feuille.css);

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

12 II – Exemple d’utilisation

13

14

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

16 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 Inconvénients

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

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

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

20 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


Télécharger ppt "Les feuilles de style CSS Fontanet Rémy Vinay Julien Istase 32 Décembre 2002."

Présentations similaires


Annonces Google