Laboratoire CSS

Laboratoire CSS

Il peut être fastidieux d’apprendre le CSS en manipulant des fichiers. Heureusement, on peut le faire au sein d’un navigateur.

Dans ce laboratoire, nous vous demandons d’expérimenter avec les notions de CSS vue jusqu’à présent. Partez du document XML et tentez de le mettre en forme de différentes manières.

Mise en Forme XML avec CSS

Entrez un contenu XML et un style CSS dans les champs ci-dessous, puis cliquez sur "Mise en forme" pour afficher le résultat stylisé dans l'iframe. Exemples :

Exemple XML :


    
        Jean Rochond
        10.10
        Achat d'ordinateur
    
    
        Madeleine Bédard
        20.10
        Achat d'un crayon
    

                

Exemple CSS :

facture {
    display: block;
    margin-bottom: 30pt;
}
montant {
    color: red;
}
raison {
    display: block;
    font-style: italic;
    margin-left: 1cm;
}
                

Document XML :

Document CSS :

Résultat :