Tutoriel CSS

De EduTech Wiki
Aller à la navigation Aller à la recherche

<pageby nominor="false" comments="false"/>

Introduction

Petite introduction à CSS. Il s'agit d'une importatation de transparents - à compléter (!) / Daniel K. Schneider 26 août 2008 à 14:21 (CEST)

Voir aussi: Liens CSS (page avec des ressources)

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)

Introduction aux "Cascading Style Sheets"

Motivation

Avantages:

  • Mises en page HTML et XML sophistiquées
  • DHTML (changement de positionnement d'é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
    • rend une page plus "lisible" et plus rapide à télécharger

Désavantages

  • Implémentations CSS1: bonnes dans Mozilla/Firefox 2+ et potables dans IE 6+
  • Implémentations CSS2: toujours lacunaires.
  • Il existe des tables de compatibilités, voir CSS (en Anglais)

Ce qui manque

  • Dans CSS1 / CSS2 il existe peu de capacités pour transformer un texte (voir XSLT)

Principe de base

  • Feuille de style = jeux de règles qui précise l'affichage d'un élément HTML ou XML
  • Chaque règle est composée:
    • d'un sélecteur (qui indique à quel type d'élément la règle s'applique)
    • une déclaration (qui comprend une ou plusieurs instructions de mise en page

Exemple (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

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's sites").
  • Pour gérer les Netscape 3 etc. pas de problème, ils ignorent les CSS

Association d'une feuille de style à une page HTML

Il existe plusieurs méthodes

Styles "inline"

Il est possible de définir des règles d'affichage pour des éléments HTML grâce à l'attribut "style".

Exemple de code:

 <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'est pas très efficace ...
 </p>

Dans cet exemple, on ajoute plusieurs propriétés CSS à l'élément "p" (un paragraphe): - color: red = on défini la couleur du texte. - font: 12pt times = on défini la police du paragraphe. - margin-left = on défini les marges gauches.

Il est possible de définir un style pour tous les éléments HTML (

,
,
  • , etc.).

    Exemple avec la balise :

     <p>
     On peut définir <span style="color: red;"> une phrase toute
     rouge </span>. Et revenir à la normale plus tard ...
    </p>
    

    Résultat: On peut définir une phrase toute rouge . Et revenir à la normale plus tard ...


    Le désavantage de cette méthode est que le code CSS est intégré aux pages HTML. Il n'y a donc pas de séparation entre le contenu et la présentation. Lorsque vous voulez modifier le style d'un élément, il est nécessaire d'ouvrir et de modifier chaque document HTML, puis de trouver l'élément en question dans le code. Selon le nombre de pages HTML et le nombre de lignes de code, cela peut être très fastidieux.

    Source: http://tecfa.unige.ch/guides/css/ex/simple-css2.html

    Feuille de style imbriquée dans une page

    • Déclaration d'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'affiche pas)
    • Pour rester compatible avec les anciens navigateurs, il faut commenter les règles CSS comme dans l'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>
    

    Feuille de style externe associé à des pages HTML

    • Solution efficace pour gérér le look de 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'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'une page HTML et ensuite manuellement entrer l'URL pour le CSS et le regarder (s'il en existe un)

    Exemple: 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'autre: pas d'entêtes, rien d'autre !!

    Multiples feuilles de style

    Les multiples feuilles de style ont plusieurs usages:

    (1) On peut laisser l'utilisateur choisir !

    (2) Pensez à faire une version spéciale pour l'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" />
    

    Importation

    On peut importer un fichier CSS depuis un autre fichier CSS ou encore depuis le CSS qui se trouve à l'intérier d'une balise style. Il s'agit donc aussi d'une alternative au "linking" ci-dessus.

    <style>
      @import ("simple-css3.css") ;
      p.default {margin-right: 3em; margin-left: 3em}
    </style>
    

    Feuilles de style client-side

    • Marche uniquement dans Mozilla et c'est très cool:
    • On peut censurer tout ce qu'on aime pas, adapter la page à la vue etc. :)

    Lire: en:Client-side Javascript

    La notion de sélecteurs

    Un sélecteur est un "nom" qui indique pour quels éléments d'une page HTML on définit appliquer la 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'une balise (X)HTML
    • on indique la classe d'une balise (X)HTML
    • on indique l'identificateur d'une balise XHTML
    • on indique le nom d'une balise plus sa classe, etc.

    Simple sélecteurs pour les balises

    • On indique le nom d'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'affichage par défaut des différentes balises. Typiquement, on modifie la couleur de certains éléments, la taille des fontes, les marges, etc.

    Les balises HTML <div> et <span>

    • ont été créés spécialement pour un usage avec les feuilles de style

    La balise <div>

    • peut contenir toutes les autres balises HTML et donc servir à mettre en forme toute une section d'une texte (mais attention aux priorités! <div> est un bloc alors que <span> est un élément in-line

    Il ne sera pas possible de définir une largeur de 100% -toute la page- pour un span)

    • <div> avec l'attribut class peut servir à faire des balises sur mesure ("custom tags") (voir plus loin)
    • <span> sert à changer une séquence de caractères à l'intérieur d'une balise et permet donc de créer des "balises" pour la mise en page de mots (fontes, etc.)

    Class et attributs ID

    Les attributs et sélecteurs "class"

    L'utilisation d'attributs HTML div et id avec des selecteurs de classe et de ID sont des mécanismes puissants pour:

    • définir des classes de contenu (indépendamment des balises)
    • pour différencier plusieurs variantes d'une même balise

    Principe: Dans le HTML, on associe une valeur à l'attribut "class" pour identifier toutes les balises que l'on veut traiter un peu différement. On peut aussi définir le style des enfants de la balise qui a l'attribut "class", mais il faut indiquer le chemin complet de l'arbre:

     ul li
    

    Il est possible de définir plusieurs classes par éléments

    Lorsque deux règles définissent la même propriété, il y a un conflit de définition qui sera réglé par les règles de cascading. Lire plus sur le cascading qui devient très compliqué dans en:CSS tutorial. Les débutants ne doivent pas trop s'inquiéter.

    • Les définitions "inline" ont priorité sur les définitions au niveau de la page qui eux ont priorité sur les fichiers importés.
    • Parmit ces différent types de définitions, c'est le plus spécifique et aussi le plus récent qui "gagne", (font-size dans l'exemple ci-dessous).

    Exemple de classes dans une simple feuille de style:

    Source: http://tecfa.unige.ch/guides/css/ex/simple-css2.html

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

    Après des années de bricolage infâme ....

    bla bla

    • item 1
    • item 2
        notre classe default marche partout, même pour un para préformaté
     

    Le style .default s'appliquera à tous les éléments dont la classe est "default" alors que le style .intro seulement aux balises <p> .

    L'attribut ID

    Il est parfois plus approprié d'utiliser l'attribut id (p.ex. pour positionner un élément ou encore lorsqu'on a un script ne manipule qu'un seul élément)

    On peut aussi combiner les deux (définir un style pour la classe et l'id d'une même balise)

    Syntaxe:

    • Le selecteur s'écrit avec un # devant

    Wildcard

    La "Wildcard" (joker) est le * et veut dire qu'on définit une règle pour tous les éléments:

    * {font-size: 12pt; }
    

    C'est pratique pour définir une police par défaut pour tous les éléments sans la définir pour chaque élément HTML.

    Exemple de définition "inline" d'un style

    Objectif: Changer la couleur d'un partie du texte

    Source: http://tecfa.unige.ch/guides/css/ex/simple-div-span.html simple-div-span.html]

     <div style="color: blue">
           <h1>L'influence d'un div tag qui aime le bleu</h1>
           <P>
                    bla bla bla
           </P>
     </div>
    

    Exemple de définition externe d'un style Objectif: Changer la couleur back-ground (arrière-plan)

    Source: http://tecfa.unige.ch/guides/css/ex/simple-div2.html simple-div2.html]

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

    Sélecteurs contextuels

    Exemple: Simple utilisation d'un sélecteur contextuel

    Source: http://tecfa.unige.ch/guides/css/ex/simple-css5.html css5.html]

    <style type="text/css">
       p strong     {color: red;}
    </style>
     ......
    <p>
    
    Ceci est un paragraph avec un ''&lt;strong&gt;'' strong modifié ''&lt;/strong&gt;''.
    
    En d'autres terme cela permet de redéfinir de façon simple le rendering
    de certaines balises "logiques" comme &amp;lt;em&amp;gt; ou &amp;lt;strong&amp;gt;.
    </p>
    

    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.

    Les Pseudo-éléments:

    • permettent d'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: Pseudo-sélecteurs

    <style>
       P:first-letter { font-size: 500%; color: green }
       P:first-line { color: green }
    </style>
    

    Pseudo-classes

    Pour rendre plus difficile la lecture des liens :)

     A:link { color : white }
     A:visited { color : yellow }
     A:active {color : red }
    

    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 "," et les pairs "propriétés: valeurs" sont séparées par des ";"

    Nous allons maintenant introduire

    • Types d'élément HTML
    • Boites (boxes)
    • Positionnement......

    Types d'affichage et défauts HTML

    Avant de planifier un style, il faut d'abord vérifier que vous utilisez HTML correctement. 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'affichage (display types) 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'insérant dans un paragraphe. Exemples HTML: <b>, <strong>, <span>

    Blocs, éléments de liste, élément inline etc. sont représentés dans CSS comme des boites (Angl. "box"). Pour chaque type de boite, il existe un jeu de règles pour définir les marges, la position, les couleurs du texte et de l'arrière-plan. On peut même définir leurs positions absolues sur la page. Donc un bloc est une boite qu'on remplit avec un contenu selon les règles que l'on choisit.

    Il est possible de changer de type, par exemple afficher une liste à puce comme une suite de phrases. Pour redéfinir ces valeurs par défaut:

     display: block;
     display: inline;
     display: list-item;
    

    Note: En réalité CSS2 distingue parmi une vingtaine de différents display types, mais il faut surtout retenir la différence entre "Block" (nouvelle ligne) et "inline".

    Exemple CSS positioning où on modifie <li> en "inline" affiché en ligne:

    <style type="text/css" xml:space="preserve">
       ul#menu li {
       display: inline;
       text-align: center;
       padding: 2px ;
       margin: 0;
       width: 19%;
       }
      </style>
    

    Attributs du texte

    Les attributs les plus utilisés sont les suivants. Il existe pleins d'autres, voir une bonne référence CSS.

    Attributs pour la gestion des propriétés d'écriture

    Attributs

    Valeurs

    sert à définir

    exemple

    font-family

    nom de l'é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'é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;

    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'écriture

    line-height: 1.2;


    Les boites CSS et leur positionnement

    Anatomie des boites

    Une boite (chaque élément "bloc" sauf les tables et autres exeptions qui ont des priorités à part ) possède l'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.

    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'un élément

    #menu {color:#000000;}body {color:blue;}

    background

    aussi

    couleur de l'arrière-plan

    h1, h2 {background:silver;}

    • Ceci n'est qu'un apperçu !
    • Il existe notamment des "shortcuts" qu'on montre sur la page suivante.

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

    Plusieurs exemples simples avec des boites

    • Source: 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="http://tecfa.unige.ch/guides/css/ex/boxing1.html">boxing1.html</a>  pour plus ... </p>
     </body>
    

    Le positionnement

    • Par défaut les éléments d'une page HTML sont affichés séquentiellement un après l'autre
    • Mais on peut les positionner selon des coordonnées absolues ou relatives n'importe où sur une page (voir les exemples qui suivent)
    #content    {    /*  les coordonnees selon l'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;
         }
    

    Exemple: Positionnement relatif de boites flottantes

    Exemple: Positionnement relatif horizontal + vertical

    Exemple: Un menu: "ul/li" comme boutons:

    Exemple: Positions absolues

    Exemple: Layout 3-colonnes

    XML avec CSS

    Association d'une feuille de style

    • Il est conseillé d'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'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'agit ici que d'une démo XML + CSS. L'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>
    

    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'un élément

    nom_de_l'élément

    Exemple:

    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

    Exemple:

    Step > Title { .... }
    

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

    élément_mère élément

    Exemple:

    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

    Exemple:

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

    (on réduit la distance)

    sélection d'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'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)

    Premières opérations à faire

    • Il faut d'abord indiquer pour chaque élément s'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 "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 Récit

    ( répetoire avec une solution CSS et une solution XSLT )

    • La DTD "RECIT" permet d'écrire des simples récits avec une grammaire génératrice.

    Liens

    Ressources CSS

    Voir aussi:

    Extensions FireFox
    • Web developper (menu: OUtils->Web developer->CSS->View Style Information, ensuite cliquer partout dans la page et regarder les infos)
    • Codeburner for Firefox Une référence HTML/CSS intégrée au navigateur
    Online Manuals
    Standards
    Compatibility tables
    http://www.quirksmode.org/css/contents.html (consult this for IE 6/7! in particular)
    CSS Validator (à utiliser SVP !!)
    http://jigsaw.w3.org/css-validator/
    Slides
    Version anglaise