Prérequis 

Ce TP est consacré à la partie 1 et 2 du tutorial  "Use Cascading Stylesheets to display XML" (developerWorks, November 2004).

Il faut bien comprendre que dans le cas de XML le navigateur n'a pas connaissance de la semantique des éléments. Il n'y a pas de style associé par défaut.

1
Voici notre fichier XML de test. Visualisez le à l'aide d'un navigateur. Aucun style n'est donné aux éléments.  Seule une information sur la structure du document est disponible.

default


Il est important de connaître pour la suite du TP la propriété display.
En particulier, il faut savoir que la propriété display ne s'hérite pas. 
selecteur *
Le selecteur * selectionne tous les éléments et permet de définir une propriété commune à l'ensemble des éléments.


syntaxe

* {border : solid black 1px;} /* tous les sélecteurs vont être encadrés en noir */
rem : J'utilise en phase préliminaire ce code pour voir les limites des blocs.


1
Utiliser ce selecteur pour visualiser chaque élément sur une ligne. Nous utiliserons la propriétée display sur le selecteur *.

Sortie  xml










héritage

Retour sur l'heritage de la propriété display. Comparer les trois écritures.

CSS1
abbreviation {display:inline;}
* {display: block;}

CSS2
abbreviation {display:inline;}
abbreviation * {display:inline;}  //tous les éléments à l'intérieur de abbreviation hérite de la propriété.

* {display: block;}

CSS3
abbreviation {display:inline;}
paper {display:block;}

* {display: inherit;} //A tester CSS3 sous Explorer

debut
Création de tableau

CSS permet de créer automatiquement des tableaux. Considérons la structure suivante un élément "livre" contenant plusieurs "chapitre"contenant plusieurs "para".
<livre>
    <chapitre>
       <para>
       <para>
    <chapitre>
       <para>
    <chapitre>
       <para>
       <para>

En considérant que "livre"=<ele-tab>, "chapitre"=<ele-ligne> et "para"=ele-cellule. Cette structure peut facilement être représentée sous forme de tableau de ligne de paragraphes.

<ele-tab>
    <ele-ligne>
       <ele-cellule>
       <ele-cellule>
    <ele-ligne>
       <ele-cellule>
    <ele-ligne>
       <ele-cellule>
       <ele-cellule>

syntaxe CSS

* { padding: 0.5em; border: solid 2pt blue; }
ele-table {
  display: table;
}

ele-ligne {
   display: table-row; 
}

ele-cellule {
  display: table-cell;
}


1
Utiliser cette propriété pour obtenir le résultat suivant sous forme de tableau, on rendra certains élément invisible (display:none)

Sortie  xml







debut
Génération de contenu

CSS permet d"écrire avant ou après un élément.

syntaxe

selecteur:before|after {content: 'blabla:';}

1
Utiliser cette propriété pour obtenir le résultat suivant

Sortie  xml







debut
Les attributs

CSS permet de référencer les attributs par la fonction attr

syntaxe

attr(nom)
1
Utiliser cette propriété pour obtenir les attributs des auteurs

Sortie  xml


debut
Selection par la valeur d'attribut 

CSS permet selectionner des attributs.

syntaxe


selecteur[attribut='valeur']{font-size:3em;}       //est égal à
selecteur[attribut~="valeur"]{font-size:5em;}    // contient



1
Utiliser cette propriété pour ne visualiser que les auteurs qui sont des membres

Sortie  xml


debut
impression

CSS permet de sélectionner des éléments par un test sur leur attribut.

syntaxe

<?xml-stylesheet type="text/css" href="master.css"?>
<?xml-stylesheet type="text/css" href="imp.css" media="print"?>

1
tester par vous même (apperçu avant impression) les effets dans le fichier imp.css de

section { page-break-after: always }

Sortie  xml


debut