Tutoriel CSS

De EduTech Wiki
Version datée du 26 août 2008 à 10:35 par Daniel K. Schneider (discussion | contributions) (Nouvelle page : = Cascading Style Sheets = </div><div> ==== Auteurs et version ==== * '' [http://tecfa.unige.ch/tecfa-people/schneider.html [http://tecfa.unige.ch/~class/ [http://tecfa.unige.ch/...)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigation Aller à la recherche

Cascading Style Sheets

Auteurs et version

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

     }
Css-intro-1.png

2.3 Ressources

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

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

    <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 &lt;em&gt; ou &lt;strong&gt;.

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

Css-intro-2.png
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:

  1. les blocs (blocks), c.a.d. des éléments qui commencent un nouveau paragraphe. Exemples HTML: <p>, <h2>, <div>
  2. Les listes et leurs éléments sont des blocs spéciaux: <li>
  3. 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:

Css-intro-3.png

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-4: Un menu: "ul/li" comme boutons

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

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Tutoriel_CSS&oldid=8599 »