PREVIOUS UP   Technologies Internet et Education, © TECFA
  8. XML avec CSS

8. XML avec CSS

8.1 Association d'une feuille de style

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

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

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

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"

(répertoire avec tous les fichiers)

Exemple 8-2: Récit

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


PREVIOUS UP -- TIE