6. XML avec CSS

6.1 Association d'une feuille de style

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

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

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

6.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 !

"Wildcard" (s'applique à tous le éléments)

*

* { font-size: 12pt; }

sélection d'un élément

nom_de_l'élément

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

Step > Title { .... }

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

élément_mère élément

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

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

(on réduit la distance)

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

élément[attribut]

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"]

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)

6.3 Premiers pas

• Il faut d'abord indiquer si un élément est un "block" ou "inline"
• Faire sortir les titres
• Gérer les listes

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

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

/* 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;}