Tutoriel CSS
Cascading Style Sheets
Auteurs et version
- [http://tecfa.unige.ch/~class/ [http://tecfa.unige.ch/~jermann/ Daniel K. Schneider] - David Ott - Vivian Synteta - Natascha Michel ]
- Version: 1.1 (modifié le 25/8/08 par DKS)
Prérequis
- Module technique précédent: [../../html/html-intro/html-intro.html html-intro]
- Module technique précédent: xhtml-intro
- Module technique précédent: [../../html/xml-tech/xml-tech.html xml-tech] (pour les chapitres sur XML seulement)
Autres modules
- Module technique suppl.: [../../html/xml-xslt/xml-xslt.html xml-xslt]
Abstract
Petite introduction à CSS
Objectifs
- Savoir faire de simples style sheets HTML avec CSS
- Faire des pages emboîtées sans tables
- XML avec CSS
- (Pas de DHTML pour le moment, ce se fera dans un autre module je pense)
2. Introduction aux "Cascading Style Sheets"
2.1 Motivation
Avantages
- Mises en page HTML et XML sophistiquées
- DHTML (changement de positionnement d�$-1òùéléments sur x,y et z par exemple)
- Séparation de contenu et de style:
- permet de servir une page à plusieurs "sauces" (HTML riche, HTML pauvre mais efficace, HTML vocal, ....), donc variantes pour imprimer, le PDA, etc.
- permet de gérér centralement le "look" de pleines de pages, donc diminue le coût de maintenance
- rends une page plus "lisible" et plus rapide à télécharger
Désavantages
- Dans CSS1 / CSS2: peu de capacités pour transformer un texte (voir XSLT)
- Implémentations CSS1: bonnes dans Mozilla/Firefox et potables dans IE 6
- Implémentations CSS2: toujours lacunaires.
- Il existe des tables de compatibilités
- (voir http://tecfa.unige.ch/guides/css/pointers.html)
2.2 Principe de base
- Feuille de style = jeux de règles qui précise l�$-1òùaffichage dòùun élément HTML ou XML
- Chaque règle est composée:
- d�$-1òùun sélecteur (qui indique à quel type d�$-1òùélément la règle s�$-1òùapplique)
- une déclaration (qui comprend une ou plusieurs instructions de mise en page
Exemples (de sensibilisation)
H1 { color: red }
P { font-face: Verdana, sans-serif ; font-size: 12pt}
H1, H2, H3 { color : blue }
H1.ChapterTOC, H2.PeriodeTOC, H2.ExerciceTOC, H2.SectionTOC {
display: block;text-indent: 30pt;
text-align: left; font-size: 14.000000pt;
font-weight: Bold; font-family: "Times";
}
2.3 Ressources
- http://tecfa.unige.ch/guides/css/pointers.html (voir la section links!!)
- http://www.w3.org/Style/CSS/ (CSS page c/o W3C)
2.4 Conseils HTML
- Mettez des balises fermantes (<p> .....</p>, <li> .... </li>, etc)
- Testez avec Mozilla/Firefox, ajustez ensuite pour IE Explorer (et autres navigateurs déficients).
Pour être compatible:
- Pour gérer les anciens browsers (NS 4 et IE 5) comprénant mal CSS il faut écrire des scripts de filtrage (disponibles sur le "web master�$-1òùs sites").
- Pour gérer les Netscape 3 etc. pas de problème, ils ignorent les CSS
3. Association d�$-1òùune feuille de style à une page HTML
Il existe plusieurs méthodes
3.1 Styles "inline"
- On peut définir un attribut style pour chaque élément HTML
<p style="color: red; font: 12pt times; margin-left: 2em">
On peut définir un style pour chaque balise.
Ce paragraphe contient son propre style, mais ce n�$-1òùest pas
très efficace ...
</p>
- http://tecfa.unige.ch/guides/css/ex/simple-css2.html
- Il s�$-1òùagit ici dòùune technique quòùil faut mieux éviter, car elle ne respecte pas très bien le principe de la séparation de contenu et de présentation
- Voir aussi <span> qui permet de définir un style à l�$-1òùintérieur d�$-1òùun paragraphe.
<p>
On peut définir <span style="color: red;"> une phrase toute
rouge </span>. Et revenir à la normale plus tard ...
</p>
3.2 Feuille de style imbriquée dans une page
- Déclaration d�$-1òùune feuille de style avec la balise <style>
Exemple 3-1: Simples feuilles CSS imbriquées
- http://tecfa.unige.ch/guides/css/ex/simple-css.html
- http://tecfa.unige.ch/guides/css/ex/simple-css2.html (exemple plus compliqué)
Utilisation:
- La déclaration doit se faire dans le <head> (sinon il peut y avoir des problèmes, par ex. la couleur background du body qui ne s�$-1òùaffiche pas)
- Pour rester compatible avec les anciens navigateurs, il faut commenter les règles CSS comme dans l�$-1òùexemple ci-dessous !
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
<html> <head>
<title>Simple CSS démo</title>
<STYLE type="text/css">
<!--
body {background: white; font-family: Helvetica, Arial, sans-serif;}
H2, H3 {font-family: Helvetica, Arial, sans-serif;}
P.intro {color: blue; margin-left: 4em; margin-right: 2em;}
.default {margin-left: 2em;}
-->
</STYLE>
</head>
3.3 Feuille de style externe associé à des pages HTML
- Solution efficace pour gérér le look des plusieurs (ou pleins!) de pages
- La balise <link> doit se trouver dans le <head>
- Si vous utilisez des caractères non standards dans le texte ("é","ö", etc.) il faudrait déclarer l�$-1òùattribut CHARSET dans le HTML (à vérifier)
- Pensez à créer un répertoire central pour vos styles ! (A tecfa: /web/styles)
- Vous pouvez regarder le source d�$-1òùune page HTML et ensuite manuellement entrer lòùURL pour le CSS et le regarder (sòùil en existe un)
Exemple 3-2: Simple feuille CSS externe
<html>
<head>
<link rel="stylesheet" href="simple-css3.css" charset="ISO-8859-1" type="text/css"/>
<title>Simple CSS démo III</title>
</head>
<body>
ATTENTION : Dans le fichier - feuille de style vous mettez juste les déclarations CSS, rien d�$-1òùautre: pas dòùentêtes, rien d�$-1òùautre !!
3.4 Multiples feuilles de style
- On peut laisser l�$-1òùutilisateur choisir !
- dans Mozilla en tout cas (Menu View->Use Style)
- on peut aussi écrire un programme JavaScript qui le fait
- http://www.alistapart.com/stories/alternate/test.html
- Pensez à faire une version spéciale pour l�$-1òùimpression
Exemple de la home page de DKS:
<style type="text/css" media="all">@import "/tecfa-people/dks-normal.css";</style>
<link rel="alternate stylesheet" type="text/css" media="screen" title="Friendly fonts " href="/tecfa-people/dks-friendly.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="bigtype" href="/tecfa-people/dks-big.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="Print with URLs" href="/tecfa-people/dks-print-url.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="Print" href="/tecfa-people/dks-print.css" />
<link rel="stylesheet" type="text/css" media="print" href="/tecfa-people/dks-print.css" />
3.5 Importation
- Il s�$-1òùagit dòùune alternative au "linking" ci-dessus
- http://tecfa.unige.ch/guides/css/ex/simple-css4.html
<style>
<!--
@import ("simple-css3.css") ;
p.default {margin-right: 3em; margin-left: 3em}
-->
</style>
Attention:
- Marche mal avec certains Explorer 4
- Ne marche pas avec Netscape (4.x) ! On peut utiliser cet fait pour filter ces navigateurs ....
3.6 Feuilles de style client-side
- Marche uniquement dans Mozilla et c�$-1òùest très cool:
- On peut censurer tout ce qu�$-1òùon aime pas, adapter la page à la vue etc. :)
4. La notion de sélecteurs
- Un sélecteur est un "nom" qui indique à quels éléments d�$-1òùune page HTML on desire appliquer une règle.
- Chaque règle CSS commence nécessairement par un sélecteur.
Rappel de la syntaxe pour une règle CSS:
selecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }
Il existe plusieurs méthodes pour identifier les éléments, par exemple:
- on indique le nom d�$-1òùune balise (X)HTML
- on indique la classe d�$-1òùune balise (X)HTML
- on indique l�$-1òùidentificateur dòùune balise XHTML
- on indique le nom d�$-1òùune balise plus sa classe, etc.
4.1 Simple sélecteurs pour les balises
- On indique le nom d�$-1òùune balise, ou encore une liste séparés par des virgules.
H1 {color: green}
H2 {color: green}
est équivalent à:
H1, H2 {color: green}
- Dans ce cas on utilise CSS pour changer l�$-1òùaffichage par défaut des différentes balises
- Typiquement, on modifie la couleur de certains éléments, la taille des fontes, les marges, etc.
4.2 Class et attributs ID
A. Les attributs et sélecteurs "class"
- Mécanisme puissant pour:
- définir de classes de contenu (indépendamment des balises)
- pour différencier plusieurs variantes d�$-1òùune même balise
- Principe: On associe une valeur à l�$-1òùattribut "class"
- On peut aussi définir le style des enfants de la balise qui a l�$-1òùattribut "class" ; mais il faut indiquer le chemin complet de lòùarbre (dans lòùex., default ul li) .
- il est possible d�$-1òùavoir plusieurs classes par éléments (dans l�$-1òùex., le 2ème <p>) .
- Lorsque deux styles définissent la même propriété, c�$-1òùest celui qui est le plus L de lòùélément qui "gagne" (dans l�$-1òùex., font-size)
Exemple 4-1: Classes dans une simple feuille de style
<STYLE type="text/css">
P.intro {color: blue; margin-left: 4em; margin-right: 2em;}
.default ul li {font-size: 0.8em;}
.default {margin-left: 2em; font-size:1em;}
.bleu {color:red;}
</STYLE>
......
<p class="intro">
Après des années de bricolage infâme ....
</p>
<p class="default bleu">
bla bla
</p>
<div class="default">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<pre>
notre classe default marche partout, même pour un para préformaté
</pre>
</div>
Le style .default s�$-1òùappliquera à tous les éléments dont la classe est "default" alors que le style .intro seulement aux balises <p> .
B. Attribut ID
- Parfois plus économique d�$-1òùutiliser lòùattribut ID (p.ex. lorsquòùon a un script qui implique des id)
- on peut aussi combiner les deux (définir un style pour la classe et l�$-1òùid dòùune même balise)
- Le selecteur s�$-1òùécrit avec un # devant
- Si on veut définir les éléments enfants d�$-1òùun éléments avec l�$-1òùattribut id ayant une classe définie, on peut le faire sans passer par les éléments intérmédiaire
- (pour l�$-1òùex. ci-dessus, sans ul)
C. "wildcard"
- "Wildcard" * (s�$-1òùapplique à tous le éléments) :
* { font-size: 12pt; }
- pratique pour définir une police par défaut pour tous les éléments sans la définir à chaque fois (y compris <pre> et <button> .
4.3 Les balises HTML <div> et <span>
- ont été créés spécialement pour un usage avec les feuilles de style
A. <div>
- peut contenir toutes les autres balises HTML et donc servir à mettre en forme toute une section d�$-1òùune texte (mais attention aux priorités! <div> est un bloc alors que <span> est un élément in-line, cf [css-intro.html#60322 5.1 �$-1òüTypes dòùéléments et défauts HTML�$-1òý [22]] Il sera pas possible de définir une largeur de 100% -toute la page- pour un span)
- <div> avec l�$-1òùattribut class peut servir à faire des "custom tags" (voir plus loin)
- <span> sert à changer une séquence de caractères à l�$-1òùintérieur d�$-1òùune balise
B. Définition "inline" d�$-1òùun style
Exemple 4-2: Changer la couleur d�$-1òùun partie du texte
<div style="color: blue">
<h1>L�$-1òùinfluence dòùun div tag qui aime le bleu</h1>
<P>
bla bla bla
</P>
</div>
C. Définition externe d�$-1òùun style
Exemple 4-3: Faire des backgrounds avec une définition externe
<style>
div.important {
background: rgb(204,204,255);
padding: 0.5em; border: none;
}
</style>
.....
<body>
<div class="important">
<h1>Une section importante</h1>
<h2>Un sous-titre</h2>
<P>
Tout le div a son joli background à lui.
bla bla bla
</P>
</div>
4.4 Sélecteurs contextuels
Exemple 4-4: Simple utilisation d�$-1òùun sélecteur contextuel
<STYLE type="text/css">
<!--
P strong {color: red;}
-->
</STYLE>
......
<P>
Ceci est un paragraph avec un <strong> strong modifié </strong> .
En d�$-1òùautres terme cela permet de redéfinir de façon simple le rendering
de certaines balises "logiques" comme <em> ou <strong>.
</P>
4.5 Pseudo sélecteurs (élément et classes)
- Un pseudo sélecteur identifie un élément par des critères autres que balise et classe
- CSS2 en définit pleins, ci-dessous les éléments de CSS1.
- Attention: certains navigateurs implémentent mal ces fonctionalités CSS1.
A. Pseudo-éléments
- permettent d�$-1òùidentifier des éléments non-balisés (comme la première lettre ou la première ligne)
- Marche avec les navigateurs IE 5.5 (à confirmer) et Mozilla
Exemple 4-5: Pseudo-sélecteurs
<style>
P:first-letter
{ font-size: 500%; color: green }
P:first-line
{ color: green }
</style>
B. Pseudo-classes
- Pour rendre plus difficile la lecture des liens :)
A:link
{ color : white }
A:visited
{ color : yellow }
A:active
{color : red }
5. Les déclarations CSS
Rappel de la syntaxe pour une règle CSS:
selecteur(s) { propriété: valeur ; propriété: valeur1, valeur2, valeur3 ; ...... }
Attention:
- Les valeurs des propriétés sont séparées par des ","
- Les pairs "propriétés: valeurs" sont séparées par des ";"
[ reste = à développer, voir d�$-1òùautres documentations en attendant]
- Types
- Boites
- Positionnement......
5.1 Types d�$-1òùéléments et défauts HTML
Avant d�$-1òùutiliser un style, voir quel est lòùélément html qui s�$-1òùen rapproche le plus. Par exemple, pour faire des titres, se baser sur <h1> , <h2> , <h3> ... plutôt que sur <p> ou <div> .
En typographie on distingue entre 2-3 types d�$-1òùéléments de base:
- les blocs (blocks), c.a.d. des éléments qui commencent un nouveau paragraphe. Exemples HTML: <p>, <h2>, <div>
- Les listes et leurs éléments sont des blocs spéciaux: <li>
- les "in-line", c.a.d. s�$-1òùinsérant dans un paragraphe. Exemples HTML: <b>, <strong>, <span>
display: block;
display: inline;
display: list-item;
- Pour chaque élément "bloc" il existe un jeu de règles pour définir les marges, la position, les couleurs du texte et de l�$-1òùarrière-plan. On peut même définir leurs positions absolues sur la page. Donc un bloc est une boite qu�$-1òùon remplit avec un contenu selon les règles que l�$-1òùon choisit.
- Evidémment, il est possible de changer de type, par exemple afficher une liste à puce comme une suite de phrases.
Exemple 5-1: CSS positioning - <li> inline
Voir aussi [css-intro.html#74092 7. �$-1òüLes boites CSS et leur positionnementòý [25]]
6. Attributs du texte
Les attributs les plus utilisés sont les suivants (pleins d�$-1òùautres !) (voir les pointeurs tecfa)
6.1 Attributs pour la gestion des propriétés d�$-1òùécriture
|
Attributs |
Valeurs |
se charge de |
exemple |
|---|---|---|---|
|
font-family |
nom de l�$-1òùécriture |
police |
font-family: Helvetica; |
|
serif |
famille de police, écriture de type serif |
font-family: Times,serif; | |
|
font-size |
pt, cm |
taille de police |
font-size: 14pt; |
|
font-style |
forme d�$-1òùécriture |
| |
|
italic |
italique |
font-style: italique; | |
|
font-weight |
de 100 à 900 |
épaisseur |
font-weight: 500; |
|
normal |
correspond à la valeur 400 |
font-weight: normal; | |
|
bold |
correspond à la valeur 700 |
font-weight: bold; |
6.2 Alignement du texte
|
Attributs |
Valeurs |
se charge de |
exemple |
|---|---|---|---|
|
text-align |
alignement des paragraphes |
| |
|
left |
aligné à gauche, valeur par défaut |
text-align: left; | |
|
center |
centré |
text-align: center; | |
|
right |
aligné à droite |
text-align: right; | |
|
justify |
justifié en forme de bloc |
text-align: jutify; | |
|
text-indent |
pt, cm |
retrait de la première ligne |
text-indent: 1cm; |
|
line-height |
pt, cm |
hauteur des lignes |
line-height: 14pt; |
|
valeur relative |
écart entre les lignes par rapport à la taille de l�$-1òùécriture |
line-height: 1.2; |
7. Les boites CSS et leur positionnement
7.1 Anatomie des boites
Une boite (chaque élément "bloc" sauf les tables et autres exeptions qui ont des priorités à part ) possède l�$-1òùanatomie suivante:
Chaque élément correspond à un selecteur CSS qui permet de définir la largeur générale (des 4 cotés) ou encore la largeur de chaque côté. On peut aussi définir dessin et couleur du cadre.
7.2 Les bords, les cadres et le couleur
|
Attributs |
Valeurs |
se charge de |
exemple |
|---|---|---|---|
|
margin |
pt, px, cm, % |
4 marges |
body {margin:1cm;} |
|
margin-top |
marge en haut |
p {margin-top:10px;} | |
|
margin-bottom |
marge en bas |
h3 {margin-bottom:3pt;} | |
|
margin-left |
marge à gauche |
img {margin-left:50px;} | |
|
margin-right |
marge à droite |
p.citation {margin-right:10pt;} | |
|
border |
pt,px, cm, % |
largeur du cadre |
p {border:5px;} |
|
border-top |
h1 {border-top:0.2cm;} | ||
|
etc ... |
|||
|
border-style |
style de cadre |
||
|
solid |
ligne simple |
p {border-style:solid;} | |
|
double |
ligne double |
h1 {border-style:double;} | |
|
padding |
pt,px,cm,%,etc |
marge intérieures |
p {padding: 5px;} |
|
color |
valeur hexa /nom |
couleur d�$-1òùun élément |
#menu {color:#000000;}body {color:blue;} |
|
background |
aussi |
couleur de l�$-1òùarrière-plan |
h1, h2 {background:silver;} |
- Ceci n�$-1òùest quòùun apperçu !
- Il existe notamment des "shortcuts" qu�$-1òùon montre sur la page suivante.
Les bords, les cadres et la couleur (shortcuts)
Exemple:
#content {
border-right: 2px dotted black;
border-bottom: 2px dotted black;
color: #000;
background-color: #ffffcc;
padding: 5px 5px 5px 5px; /* haut, droite, bas, gauche */
margin: 5px 15px 5px 5px;
}
H1 {
/* 1 cm en haut et en bas, 2cm sur les côtés */
margin: 1cm 2cm;
/* 3em en haut, 20% sur les côtés, et 2em en bas */
padding: 3em 20% 2em;
}
Exemple 7-1: Plusieurs exemples simples avec des boites
- http://tecfa.unige.ch/guides/css/ex/boxing0.html
- la boite pour le "body" a des lignes pointillés
- la boite pour un <p> a une petite marge, un bord solide, et une couleur en arrière-plan
- une partie de ce meme paragraphe est mis dans une boite avec un "span"
<body style="border-style:dotted">
<h1>Boites</h1>
<p>The dashed box is for the "body", the big thick box is for a "p" tag, and the thin box is used within a "span" tag. (View the source).</p>
<p style="background-color:#d0d0d0;border-style:solid;border-width:4px;
padding:1em;margin:0.1cm; ">
Tout est une boite - DKS nov 2003
<span style="background-color:#d0d0d0;border-style:solid;border-width:1px;
padding:1pt;margin:1pt;width:50%;position:relative ">
<a href="http://validator.w3.org/check/referer">XHTML validation</a> -
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS validation<a>
</span>
</p>
<p>Voir <a href="boxing1.html">boxing1.html</a> pour plus ... </p>
</body>
7.3 Le positionnement
- Par défaut les éléments d�$-1òùune page HTML sont affichés séquentiellement un après l�$-1òùautre
- Mais on peut les positionner selon des coordonnées absolues ou relatives n�$-1òùimporte où sur une page (voir les exemples qui suivent)
#content { /* les coordonnees selon l�$-1òùhorloge: 12, 3, 6, 9 */
float: left;
width: 80%;
color: #000;
background-color: #ffffcc;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#menu { /* qui sera mis à droite */
position: absolute;
right: 0;
width: 17%;
font: 10px/14px verdana, sans-serif;
color: black;
margin: 5px 5px 5px 5px;
background-color: #ffffff;
}
- Voir le prochain slide pour une série d�$-1òùexemples
Exemple 7-2: Positionnement relatif de boites flottantes
Exemple 7-3: Positionnement relatif horizontal + vertical
Exemple 7-5: Positions absolues
Exemple 7-6: Layout 3-colonnes
8. XML avec CSS
8.1 Association d�$-1òùune feuille de style
- Il est conseillé d�$-1òù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�$-1òù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�$-1òùagit ici que dòùune démo XML + CSS. L�$-1òù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�$-1òùun élément
nom_de_l�$-1òùélément
Exemple:
Step {
display: list-item;
list-style-type: decimal;
}
sélection d�$-1òùun élément qui est l�$-1òù enfant direct dòùun élément
élément_mère > élément
Exemple:
Step > Title { .... }
sélection d�$-1òùun élément qui est le descendant d�$-1òùun élément
élément_mère élément
Exemple:
Step Title { .... }
Dans l�$-1òù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�$-1òùun élément qui est le frère d�$-1òùun élément
élément_frère + élément
Exemple:
H1 + H2 { margin-top: -5mm }
(on réduit la distance)
sélection d�$-1òù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�$-1òù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�$-1òùabord indiquer pour chaque élément s�$-1òù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"
(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
( répetoire avec une solution CSS et une solution XSLT )
- La DTD "RECIT" permet d�$-1òùécrire des simples récits avec une grammaire génératrice.
Liens
- http://tecfa.unige.ch/guides/tie/html/css-into/css-intro.html (Transparents HTML)
- http://tecfa.unige.ch/guides/tie/pdf/files/css-intro.pdf (Transparents PDF)