Introduction aux documents structurs : Mise en forme de documents XML avec CSS

1
Introduction aux documents structurés Mise en
forme de documents XML avec CSS

• par Arnaud dAlayer
• EBSI BLT6131 25 novembre 2008
• Cours basé sur les notes de cours de Yves Marcoux
  (BLT6131) et Christian Rémillard (INU1011)

2
Au programme ce soir

• Mise en forme de documents XML avec CSS
• Appel dune feuille de styles CSS
• Structure dune feuille de styles CSS
• Règles-at et règles
• Les propriétés CSS
• Le modèle de boîtes CSS
• Présentation du TP4 Partie B

3
Portée de la présentation

• Cette présentation est ciblée vers les notions
  requises pour le TP4 de documents structurés en
  BLT6131 Informatique documentaire avancée
• Plusieurs notions importantes des feuilles de
  styles CSS sont absentes

4
Séparation du contenu et de la forme
Structure logique de linformation (définie dans
une DTD)
Règles de styles (CSS, XSLT, etc.) Document
stylé
Source Christian Rémillard. 2003. Le format XML
et ses applications pratiques en
archivistique.http//grds.ebsi.umontreal.ca/prese
ntations/2003/1029-XML-applications-archivistique/

5
Exemple de feuille de styles CSS

• _at_charset "iso-8859-1"
• auteur, destinataires, cc, sujet, para,
• corps, corpsafter displayblock
• sujet borderthin solid black padding 0.5em
  text-aligncenter
• margin-left20 margin-right20
• margin-top1em margin-bottom1em
• mémo margin-left1em
• sujetbefore content"Sujet "
  font-weightbold
• auteurbefore content"De " font-styleitalic
  font-weightbold
• destinatairesbefore content"À "
  font-styleitalic font-weightbold
• ccbefore content"Cc "
• cc margin-top0.5em font-size80
• corpsafter content"-30-" text-align center
• nomafter content", "
• nomlast-childafter content"."
• nomcourrielafter content" (" attr(courriel)
  "), "
• nomcourriellast-childafter content" ("
  attr(courriel) ")."
• cc nom text-decorationunderline

6
Appel dune feuille de styles CSSDans un fichier
XHTML (rappel)

• Attributs style et class dans les éléments
• Dans la balise ltheadgt
• Saisie directe dans le fichier HTML dans
  lélément ltstylegt
• Appel dune feuille de style (ou plusieurs) avec
  lélément ltlinkgt
• Exemples
• ltlink type"text/css" rel"stylesheet"
  href"css/all.css" media"all" charset"utf-8"/gt
• ltlink type"text/css" rel"stylesheet"
  href"css/screen.css" media"screen"
  charset"utf-8"/gt
• ltlink type"text/css" rel"stylesheet"
  href"css/print.css" media"print"
  charset"utf-8"/gt
• ltlink type"text/css" rel"stylesheet"
  href"css/stylesSciSocPsy.css" media"screen"
  charset"utf-8"/gt

7
Appel dune feuille de styles CSSDans un fichier
XML

• Dans le prologue
• Revoir les instructions de traitement (cours 9)
• Exemple
• lt?xml-stylesheet type"text/css"
  href"maFeuille.css"?gt
• Arguments disponibles
• type type de feuille de styles (CSS ou XSLT)
• href lien (relatif ou absolu) vers le fichier
  CSS
• title titre de la feuille de style
• media type de média utilisé avec la feuille de
  styles
• charset encodage utilisé dans la feuille de
  styles
• alternate indique sil sagit dune feuille de
  styles alternative

8
Appel dune feuille de styles CSSDans un fichier
XML - Exemple
9
Appel dune feuille de styles CSSDans un fichier
XML

• Dans un fichier XML, il nest pas possible
  dutiliser les mécanismes dattribution de styles
  avec les attributs style et class
• Sauf si la DTD de la classe de document le permet
• Ceci renvoie à des questions de modélisation
• Nécessite un traitement par feuille de styles
  XSLT pour les prendre en compte

10
Les feuilles de styles CSS

• Structure dune feuille de styles CSS
• Les règles-at (_at_)
• Les règles

11
Structure dune feuille de styles CSS Les
règles-at

• Les plus courantes
• _at_charset et _at_media
• _at_charset
• Règle indiquant le jeu de caractères utilisé
• À mettre en 1ère ligne
• Exemple _at_charset "iso-8859-1"

12
Structure dune feuille de styles CSS Les
règles-at

• _at_media
• Définir des styles CSS selon le format de
  consultation (écran, impression, etc.)
• Liste des médias http//www.w3.org/TR/CSS21/medi
  a.html
• Par défaut (si non spécifié), les styles
  sappliquent à tous les formats (all)
• Exemple _at_charset "iso-8859-1"
• _at_media all
• / listes des règles communes /
• _at_media print
• / listes des règles pour limpression /
• _at_media screen
• / listes des règles pour laffichage /

13
Structure dune feuille de styles CSS Les
règles-at

• Règles-at VS appel dans linstance XML
• Choix à adapter selon les cas
• Idéalement, rendre la feuille CSS la plus
   portable  (ou autosuffisante) possible, donc
  inclure _at_charset (et _at_media au besoin)
• Par  redéfinition , les appels sont
  prédominants aux règles-at
• Exemple une feuille de styles sans _at_media peut
  être limitée à un média par largument media de
  lappel
• Pour éviter les problèmes, ne pas les contredire
• Exemple _at_charset "iso-8859-1" dans la feuille
  CSS, mais charset"utf-8" dans linstance

14
Structure dune feuille de styles CSS Les règles

• Forme dune règle CSS sélecteur
  déclaration(s)
• Où
• Sélecteur indique à quel(s) élément(s)
  sapplique la règle
• Déclaration est constituée dune propriété, et
  de la valeur de cette propriété
• Propriété1 valeur1 propriété2 valeur2
• Exemple
• Mettre le texte en rouge et en gras dans le mémo
  mémo color redmémo font-weight bold
  mémo color red font-weight bold

15
Structure dune feuille de styles CSS gestion
des espaces

• Comme XML, les espaces (ou caractères blancs)
  peuvent être utilisés pour améliorer la
  lisibilité du codemémo color red
  font-weight bold mémo color
  red font-weight bold

16
Structure dune feuille de styles CSS Les
règles Les sélecteurs
17
Structure dune feuille de styles CSS Les
règles Les sélecteurs

• Pour une liste plus complète des sélecteurs
  disponibles, consulter la liste dans la
  spécification de CSS 2.1http//www.w3.org/TR/CSS2
  1/selector.htmlpattern-matching
• Les sélecteurs sont sensibles à la cassePara
  ? para
• Il est possible dattribuer plusieurs sélecteurs
  à une ou plusieurs règles sélecteur1,
  sélecteur2, sélecteur3, déclaration(s)

18
Structure dune feuille de styles CSS Les
règles Les propriétés

• Avec XHTML, les navigateurs possèdent une feuille
  de styles par défaut
• Avec XML, les navigateurs
• Affiche une vue du document XML dans laquelle
  nous pouvons voir le balisage
• Affiche le contenu des éléments directement sans
  mise en forme dans un paragraphe si une feuille
  de styles est liée mais absente ou vide
• Liste des propriétés CSS voir index de la
  spécification CSS 2.1http//www.w3.org/TR/CSS21/p
  ropidx.html

19
Structure dune feuille de styles CSS Les
règles Les propriétés

• Sans feuille de styles

20
Structure dune feuille de styles CSS Les
règles Les propriétés

• Avec feuille de styles absente ou vide

21
Structure dune feuille de styles CSS Les
règles Les propriétés

• Les propriétés les plus courantes

22
Structure dune feuille de styles CSS Les
règles Les propriétés Les Blocs

• Les blocs (? inline)
• La première étape consiste à dissocier
  visuellement sous forme de  bloc  les éléments
• Un bloc implique un retour à la ligne avant et
  après celui-ci
• Un bloc occupe par défaut 100 de la largeur
  disponible
• Exemple
• auteur, destinataires, sujet, cc, para
• displayblock

23
Structure dune feuille de styles CSS Les
règles Les propriétés Les Blocs

• Les blocs

24
Structure dune feuille de styles CSS Les
règles Les propriétés Les boîtes

• Le modèle de boîtes CSS
• En CSS, chaque élément est représenté par
  plusieurs boîtes qui représentent
• Le contenu
• La marge interne (padding)
• La bordure
• La marge externe (margin)

25
Structure dune feuille de styles CSS Les
règles Les propriétés Les boîtes
Source http//www.w3.org/TR/CSS21/box.htmlbox-d
imensions
26
Structure dune feuille de styles CSS Les
règles Les propriétés Les boîtes

• Bordure (cadre)
• Sous la forme border taille style couleur
• Propriétés http//www.w3.org/TR/CSS21/box.htmlp
  ropdef-border
• Exemples bordure noire de 1 pixelBorder 1px
  solid black

27
Structure dune feuille de styles CSS Les
règles Les propriétés Les boîtes

• Marges
• Exemple
• Marge interne (entre le cadre et le texte) de 10
  pixels et marge externe de 20 pixels (entre les
  boîtes)margin 20px padding 10px
• Il est possible de spécifier une marge (interne
  et externe) et une bordure différente pour chaque
  côté de la boîte
• Exemples
• Bordure de 1 px en haut seulement border-top
  1px solid black
• Marge interne de 10 pixels en haut et en
  baspadding 10px 0 10px 0(à lire dans lordre
  haut droite bas gauche)

28
Structure dune feuille de styles CSS Les
règles Les propriétés Les boîtes

• Alignement du texte
• Sur les éléments de type  bloc 
• Avec la propriété  text-align http//www.w3.org
  /TR/CSS21/text.htmlpropdef-text-align
• Valeurs possibles left, right, center, justify
• Exemple
• sujet
• display block / (pour rappel) /
• Text-align center

29
Structure dune feuille de styles CSS Les
règles Les pseudo-éléments

• Les pseudo-éléments sont des sélecteurs (voir
  spécifications CSS des sélecteurs)
• Pseudo-élément  before 
• Permet dajouter du contenu avant un élément
• Exemple ajouter un intitulé  sujet   en gras
  avant le contenu de lélément sujet
• sujetbefore
• content "sujet " font-weight bold

30
Structure dune feuille de styles CSS Les
règles Les pseudo-éléments

• Pseudo-élément  after 
• Permet dajouter du contenu après un élément
• Exemple ajouter une virgule après chaque nom
  dans destinataires
• nomafter
• content ", "
• Un problème le dernier nom a aussi une virgule.
  Solution les pseudo-classes.

31
Structure dune feuille de styles CSS Les
règles Les pseudo-classes

• Exemple de pseudo-classes
• last-child
• first-child
• Exemple
• Permet dajouter du contenu après un élément
• Exemple ajouter un point (au lieu dune
  virgule) après le dernier nom dans destinataires
• nomlast-childafter
• content "."

32
Structure dune feuille de styles CSS Les
règles afficher le contenu dun attribut

• Par défaut le contenu des attributs nest pas
  affiché, il faut alors utiliser la fonction
  attr()
• Exemple
• Afficher le courriel dune personne (stocké dans
  un attribut) après le nom
• Exemple
• nomcourrielafter content " ("
  attr(courriel) ") "

33
Structure dune feuille de styles CSS Les
règles Les unités de longueur

• Il est toujours préférable dutiliser des valeurs
  relatives pour la taille des éléments (bordures,
  marges, taille du texte, etc.)
• Unités de valeur absolues
• Centimètres (cm), pouces (in), points (pt)
• Unités de valeur relatives
• largeur par rapport à la boite courante
• em (et ex) largeur dune lettre  m  de la
  police de caractères courante
• Pixels (px) peu adapté à limpression et à la
  résolution des écrans

34
Structure dune feuille de styles CSS les
commentaires

• Un contenu en commentaire sera ignoré lors dun
  traitement CSS
• Permet (rappel)
• dajouter des commentaires de conception
• des repères pour la lecture (humaine)
• de déboguer un document CSS (ex identifier les
  sections de la feuille qui posent problème)
• Un commentaire ne peut pas contenir un autre
  commentaire
• Exemple / Voici un commentaire CSS /

35
TP4 Partie B

• Présentation du TP4 Partie B
• Étapes
• Lier une feuille de styles dans le fichier XML
• Le contenu des éléments apparait sans mise en
  forme
• Déterminer les éléments du documents qui devront
  être traités comme des blocs
• Gérer laffichage des listes déléments avec les
  pseudo-éléments et pseudo-classes
• Utiliser Firefox

36
La semaine prochaine(2 décembre 2008)

• Conférence de Martin Sévigny
• Laboratoire suite du TP4
• Période de consultation pour les recherches
  individuelles avec Martin Sévigny