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

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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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 }

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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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...

GENIE MULTIMEDIA - Restitution de documents (CSS) (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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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' */

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

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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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}

GENIE MULTIMEDIA - Restitution de documents (CSS) (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 }

GENIE MULTIMEDIA - Restitution de documents (CSS) (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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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

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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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

GENIE MULTIMEDIA - Restitution de documents (CSS) (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

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