GENIE MULTIMEDIA Restitution de documents CSS Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE

Présentation au sujet: "GENIE MULTIMEDIA Restitution de documents CSS Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE"— Transcription de la présentation:

1 GENIE MULTIMEDIA Restitution de documents CSS Christine Vanoirbeek EPFL – IC – CGC Bâtiment BC (Station 14) 1015 LAUSANNE christine.vanoirbeek@epfl.ch

2 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(2) Introduction  Objectif: fournir un mécanisme pour associer différents styles à un même document Article Présentations Contenu …

3 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(3) Introduction  Initialement conçues pour être utilisées avec des documents HTML  Peuvent être utilisées avec des documents XML  CSS 1  CSS 2 (media)  CSS 3  La norme s’adresse ­Aux utilisateurs ­Aux développeurs

4 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(4) Principes  Feuille de style CSS = ensemble de règles  Chaque règle spécifie les valeurs pour les propriétés de style associées aux éléments du document  sélecteur {propriété:valeur; propriété:valeur}  Exemple  EM { color : red}  H1 {color:blue; text-align: center}  H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; font-stretch: normal; font- size-adjust: none }  H1 { font: bold 12pt/14pt Helvetica }

5 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(5) Association de style aux éléments d’un document  document HTML  utilisation de l ’attribut style … Introduction …

6 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(6) Inclusion d’une feuille de style dans un document  document HTML  utilisation de l ’élément style pour inclure une feuille de style dans le document Les feuilles de style CSS H1 { color: blue } Introduction

7 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(7) Association d’une feuille de style à un document  document HTML  utilisation de l ’élément LINK pour associer une feuille de style au document Les feuilles de style CSS Introduction...

8 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(8) Propriétés  Pour chaque propriété, la norme CSS spécifie  la syntaxe  une éventuelle valeur par défaut  les éléments auxquels elle s ’applique  si elle est héritable  comment interpréter les pourcentages  les media pour lesquels elle a un sens

9 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(9) Exemples de valeurs pour les propriétés  Longueur (unités absolues ou relatives)  Pourcentage P {font-size: 12px} H1 {margin: 0.5in} P { line-height: 120% } /* 120% de 'font-size' */

10 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(10) Exemples de valeurs pour les propriétés  Une URL  Spécification des couleurs BODY { background: url("http://www.bg.com/pinkish.gif") } BODY {color: black; background: white } EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* integer */ EM { color: rgb(100%, 0%, 0%) } /* float */

11 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(11) Cadre, marges et espacement Exemple: questionnaire avec réponses, questionnaire sans réponsequestionnaire avec réponsesquestionnaire sans réponse

12 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(12) Figures flottantes  Remarque préliminaire: 2 manières d’afficher les éléments d’un document HTML  En bloc  En ligne  La propriété « float »  Permet de spécifier si l’élément bloc (généralement une image) doit figurer à gauche ou a droite de son élément père  La propriété « clear »  indique si la propriété « float » s’applique dans son contexte.  exemple 1, exemple 2 exemple 1exemple 2

13 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(13) Héritage  Les valeurs peuvent être implicitement héritées des noeuds parent ou ancêtres  La norme définit les propriétés héritables * {color: inherited}

14 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(14) Cascading  Chaque règle peut être spécifiée comme étant normale ou importante P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt }

15 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(15) Multiplicité des spécifications de style  Définies par l ’auteur  Définies par l ’utilisateur  Définies par l ’application  de plus, les feuilles de style peuvent être importées   régles de résolution de conflits potentiels

16 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(16) Résumé  Règles importées: régles locales > règles importées  Règles normales: auteur > utilisateur > application  Règles importantes: utilisateur > auteur > application  Spécification spécifiques > propriétés héritées  En cas de conflit: la dernière règle spécifiée s’applique

17 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(17) Types de media  all, aural, braille, embossed, handheld, print, projection, screen, tty, tv @media print {...} @media screen {...} @import « style-print.css » print; @import « style-screen.css » screen;

18 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(18) Sélecteurs  Spécifie les éléments auxquels s’appliquent les propriétés ­un élément spécifique ­tous les éléments du document ­les éléments d ’un type donné ­des éléments spécifiés en fonction de leur emplacement dans la structure logique du document ­les éléments spécifiés en fonction des attributs ­les éléments appartenant à des classes ­pseudo elements

19 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(19) Sélecteurs  Spécificité d ’un sélecteur = nombre obtenu par la concaténation de 3 valeurs  le nombre d ’attributs ID  le nombre d ’autres attributs ou classes  le nombre de noms d ’éléments  Les pseudo-éléments sont ignorés

20 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(20) Modèle de traitement  1. Génération de l ’arbre du document  2. Identification des media concernés  3. Calcul des valeurs de propriétés  4. Génération du document physique

21 GENIE MULTIMEDIA - Restitution de documents (CSS) - 16.11.2006(21) Document et feuille de style CSS  Document XML   En résumé HTMLCSS XMLXSL