8. XML avec CSS

8.1 Association d'une feuille de style

Il est conseillé d'utiliser une feuille externe et ensuite l'importer:

<?xml-stylesheet type="text/css" href="feuille.css"?>

note: pas de feuilles de styles internes comme pour HTML !

Voici le début d'un fichier:

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet href="stepbystep.css" type="text/css"?>

<!DOCTYPE Stepbystep SYSTEM "stepbystep-ex.dtd">

<Stepbystep xmlns:xlink="http://www.w3.org/1999/xlink">

 <Doctitle>ATTENTION: Il ne s'agit ici que d'une démo XML + CSS. L'original de ce fichier se trouve

ailleurs et a été modifié sans doute depuis ....

 </Doctitle>

 <Info>

  <Author Email="Stephane.morand@tecfa.unige.ch">

  </Author>

  <Version>Version 0.2</Version>

  <Para>installation brute de postnuke sur le serveur tecfaseed

  </Para>

 </Info>

8.2 Selecteurs CSS2 pour XML et HTML

XML nécessite un navigateur qui supporte CSS2 (au moins en partie)
A part la notation Balise.classe les sélecteur XML et HTML sont les mêmes !

sélection d'un élément

nom_de_l'élément

Exemple:

Step {

display: list-item;

list-style-type: decimal;

}

sélection d'un élément qui est l' enfant direct d'un élément

élément_mère > élément

Exemple:

Step > Title { .... }

sélection d'un élément qui est le descendant d'un élément

élément_mère élément

Exemple:

Step Title { .... }

Dans l'exemple suivant P est un descendant de LI, LI doit être un enfant direct de OL. OL est dans DIV.

DIV OL>LI P

sélection d'un élément qui est le frère d'un élément

élément_frère + élément

Exemple:

H1 + H2 { margin-top: -5mm }

(on réduit la distance)

sélection d'un élément qui possède un attribut

élément[attribut]

Exemple:

Title[status] { color: blue; }

(tous les titres qui un attribut "status" sont paints en bleu )

sélection d'un élément qui possède un attribut avec une valeur

élément[attribut="valeur"]

Exemple:

Title[status="brouillon"] { color: red; }

(tous les titres qui un attribut "status" avec valeur "brouillon" sont peints en rouge )

Note: au lieu de "=", on a aussi ~= et = (voir la documentation)

8.3 Premières opérations à faire

Il faut d'abord indiquer pour chaque élément s'il est un "block" ou "inline"
Faire sortir les titres
Gérer les listes

Exemples

/* title et para sont des éléments "block", ils ont une petite marge

title, para {display: block; margin: 0.5em;}

/* les title sont un peu plus grands */

title {font-size: 1.5em;}

/* les item sont des list-item de type bullet */

item {display: list-item;list-style-type: bullet;}

/* strong est un élément inline, rendering on italic et bleu   */

strong {display: inline; font-style: italic; color: rgb(000,000,128);}

Exemple 8-1: Exemple "Stepbystep"

http://tecfa.unige.ch/guides/css/ex-xml/stepbystep/

(répertoire avec tous les fichiers)

Le DTD Stebbystep permet de formatter des instructions de type "pas par pas", par exemple comment installer un logiciel.

Exemple 8-2: Récit

http://tecfa.unige.ch/guides/xml/examples/recit/

( répetoire avec une solution CSS et une solution XSLT )

La DTD "RECIT" permet d'écrire des simples récits avec une grammaire génératrice.