Cours gratuit : Cours de HTML - Les règles du CSS1



Contenu du cours
  • I. Polices de caractères
    1. Introduction
    2. Changer de police : font-family
    3. Changer la taille des caractères : font-size
    4. Changer l'orientation des caractères : font-style
    5. Mettre un texte en petites capitales : font-variant
    6. Changer la graisse de la police : font-weight
    7. Le résumé : font
    8. Exercice : Mise en forme de police

  • II. Texte
    1. Spécifier l'interligne : line-height
    2. Changer l'alignement horizontal d'un texte : text-align
    3. Surligner, souligner, barrer : text-decoration
    4. Mettre un alinéa, indenter le texte : text-indent
    5. Manipuler les majuscules et les minuscules : text-transform
    6. Changer l'alignement vertical : vertical-align
    7. Changer l'espace entre les mots : word-spacing
    8. Changer l'espace entre les lettres : letter-spacing
    9. Exercice : Mise en forme de texte

  • III. Couleurs et fonds
    1. Spécifier la couleur du texte : color
    2. Spécifier une couleur de fond : background-color
      1. Propriété
      2. Compatibilité
    3. Spécifier une image de fond : background-image
      1. Propriété
      2. Compatibilité
    4. Changer la position par défaut de l'image de fond : background-position
      1. Propriété
      2. Compatibilité
    5. Contrôler la répétition d'une image de fond : background-repeat
      1. Propriété
      2. Compatibilité
    6. Contrôler le défilement de l'image de fond : background-attachment
      1. Propriété
      2. Compatibilité
    7. Le résumé : background
      1. La propriété
      2. Compatibilité
    8. Exercice : Couleurs et fond

  • IV. Les « boîtes »
    1. Généralités
      1. Introduction : le modèle de boîte
      2. Règles d'attribution
    2. Les propriétés de la marge extérieure : margin
    3. Les propriétés de la marge intérieure : padding
    4. Les propriétés de la bordure : border
      1. Propriétés de largeur: border-width
      2. Spécifier la couleur de la bordure : border-color
      3. Spécifier le type de trait de la bordure : border-style
      4. Raccourcis : border-top, border-right, border-bottom, border-left
    5. Placement d'un élément de type bloc par rapport au contenu environnant : float
    6. Nettoyer les éléments flottants : clear
    7. Spécifier largeur et hauteur d'un élément : height, width
      1. Le comportement théorique
      2. Compatibilité
    8. Exercice : Boîtes

  • V. Listes
    1. Spécifier une image comme puce dans une liste : list-style-image
    2. Changer l'alignement du texte après la puce dans une liste : list-style-position
    3. Changer la forme de la puce ou le type de numérotation : list-style-type
    4. Exercice : Mise en forme de listes

  • VI. Autres propriétés
    1. Contrôle de l'affichage ou de la disparition d'un élément : display
    2. Prise en charge des blancs : white-space
  • _______________________

    Cette création est mise à disposition par le professeur Gilles Chagnon sous un contrat Creative Commons.

    I. Polices de caractères

    1. Introduction

    La mise en forme du texte est réalisée grâce à l'utilisation de quelques propriétés, gérant notamment la police (font en anglais).

    2. Changer de police : font-family

    font-family permet de spécifier quelle est la police à utiliser. Exemple d'utilisation :

    p
        {
            font-family : Verdana, Arial, sans-serif;
        }

    Il faut indiquer au moins un nom de police. Si la police n'est pas trouvée dans le système d'exploitation, la police par défaut est utilisée. Cette police est la Times New Roman sur un PC, et Times Roman sur un Mac. C'est la raison pour laquelle il est recommandé de spécifier plusieurs noms de polices, ainsi qu'une famille de polices générale :

    1. La police préférentielle en premier

    2. Une police plus généralement répandue

    3. Éventuellement d'autres choix de polices

    4. Une famille de polices générale

    Les familles de police générales sont

    Dans le cas où aucune police spécifique ne peut être trouvée, ce dernier choix permet de se reposer sur les polices définies par défaut sur le système, sans pour autant trop dégrader le rendu visuel.

    3. Changer la taille des caractères : font-size

    font-size permet de spécifier la taille de la police à utiliser. Exemples d'utilisation :

    h4
        {
            font-size : 1.2em;
        }

    h3
        {
            font-size : 120%;
        }

    h2
        {
            font-size : bigger;
        }

    La syntaxe des trois possibilités de spécification de la taille suit celle des unités, et il est possible d'utiliser de plus les mots-clefs smaller, small, normal, big et bigger qui changent la taille des caractères d'un facteur prédéterminé.

    4. Changer l'orientation des caractères : font-style

    font-style permet de spécifier le « style » (normal ou italique) de la police à utiliser. Les trois valeurs possibles sont normal, italic et oblique :

    span.definition
        {
            font-style : italic;
        }

    span.penche
        {
            font-style : oblique;
        }

    span.normal
        {
            font-style : normal;
        }

    normal est la valeur par défaut. oblique est un style où la police est inclinée. Le rendu à l'écran est parfois similaire au style italique, mais en toute rigueur il devrait en être différent.

    5. Mettre un texte en petites capitales : font-variant

    font-variant permet de spécifier une « variante » de la police à utiliser. Les valeurs possibles sont normal et small-caps :

    h4
        {
            font-variant : normal;
        }

    h4.grandtitre
        {
            font-variant : small-caps;
        }

    small-caps permet de spécifier que le texte doit être écrit en « petites capitales ».

    6. Changer la graisse de la police : font-weight

    font-weight permet de spécifier la graisse de la police à utiliser. Exemples d'utilisation :

    b.tresgras
        {
            font-weight : bolder;
        }

    span.important
        {
            font-weight : 300;
        }

    Les valeurs possibles peuvent être :

    7. Le résumé : font

    Il est possible de réunir plusieurs de ces propriétés en utilisant le raccourci font, à condition de respecter toujours un ordre précis (style, graisse, taille puis famille). Par exemple...

    p.introduction
        {
            font : italic bold 12pt Times, serif;
        }

    Exercice 1. Mise en forme de police

    Énoncé
    Correction

    II. Texte

    1. Spécifier l'interligne : line-height

    line-height permet de spécifier l'écart entre deux lignes dans le texte. Exemples d'utilisation :

    p
        {
            line-height : 200%;
        }

    Les valeurs possibles sont normal, un nombre positif (l'espacement entre deux lignes est égal à la valeur par défaut multipliée par le nombre), ou bien toute mesure de taille (une longueur ou un pourcentage).

    2. Changer l'alignement horizontal d'un texte : text-align

    text-align permet de spécifier l'alignement horizontal du texte. Exemples d'utilisation :

    h1
        {
            text-align : center;
        }

    p.journal
        {
            text-align : justify;
        }

    Les valeurs possibles sont left (valeur par défaut), right, center et justify.

    3. Surligner, souligner, barrer : text-decoration

    text-decoration permet de spécifier quel type de soulignement doit être appliqué au texte. Exemple d'utilisation :

    a:active, a:link, a:visited
        {
            text-decoration : none;
        }

    Les valeurs possibles sont none (pas de soulignement), underline (soulignement), overline (un trait au-dessus du texte), line-through (un trait au milieu du texte) et blink (clignotement ; à éviter dans la mesure du possible pour ne pas faire fuir l'internaute !).

    4. Mettre un alinéa, indenter le texte : text-indent

    text-indent permet de spécifier quelle indentation (ou retrait de première ligne) appliquer à la première ligne du texte. Exemple d'utilisation :

    p
        {
            text-indent : 5em;
        }

    La syntaxe de l'indentation à appliquer suit celle des unités. Elle peut être une longueur ou un pourcentage.

    5. Manipuler les majuscules et les minuscules : text-transform

    text-transform permet de spécifier quelle transformation appliquer à la police. Exemples d'utilisation :

    h1
        {
            text-transform : uppercase;
        }

    h2
        {
            text-transform : capitalize;
        }

    Les valeurs possibles sont :

    6. Changer l'alignement vertical : vertical-align

    vertical-align permet de spécifier quel alignement vertical appliquer au texte par rapport à la ligne de base. Exemples d'utilisation :

    img
        {
            vertical-align : 50%;
        }

    img.middle
        {
            vertical-align : middle;
        }

    .exponent
        {
            vertical-align : super;
        }

    Les valeurs possibles sont :

    7. Changer l'espace entre les mots : word-spacing

    word-spacing permet de spécifier l'espacement entre les mots du texte. Exemples d'utilisation :

    p em
        {
            word-spacing : 0.4em;
        }

    p.note
        {
            word-spacing : -0.2em;
        }

    Cette propriété a comme valeur une longueur. Il est à noter qu'une valeur négative est possible.

    8. Changer l'espace entre les lettres : letter-spacing

    letter-spacing permet de spécifier l'espacement entre les lettres du texte. Exemples d'utilisation :

    h1
        {
            letter-spacing : 0.1em;
        }

    p.note
        {
            letter-spacing : -0.1em;
        }

    Cette propriété a comme valeur une longueur. Il est à noter qu'une valeur négative est possible, mais le résultat est évidemment peu lisible. Une valeur de 0 empêche la justification.

    Exercice 1. Mise en forme de texte

    Énoncé
    Correction

    III. Couleurs et fonds

    1. Spécifier la couleur du texte : color

    color permet de spécifier la couleur du texte. Exemples d'utilisation :

    h1
        {
            color : blue;
        }

    h2
        {
            color : #000080;
        }

    h3
        {
            color : rgb(25%,50%,75%);
        }

    Afin d'éviter d'aboutri à un texte illisible (par exemple, blanc sur blanc) quand l'utilisateur a personnalisé sa feuille de style dans les préférences de son navigateur, background-color doit être spécifié en même temps que color.

    Cette propriété est compatible avec tous les navigateurs.

    2. Spécifier une couleur de fond : background-color

    a. Propriété

    background-color permet de spécifier la couleur de fond de l'élément. Exemples d'utilisation :

    body
        {
            background-color : white;
        }

    h1
        {
            background-color : #000080;
        }

    Afin d'éviter des conflits avec des feuilles de style personnelles spécifiées par des utilisateurs, il est recommandé de spécifier également la propriété background-image à chaque fois que background-color est utilisé. Souvent, background-image: none suffit.

    De plus, il est recommandé de spécifier à chaque fois la propriété color de telle manière que le texte soit lisible sur le fond.

    b. Compatibilité

    Il n'y a pas de problème de compatibilité avec les navigateurs compatibles CSS (même Internet Explorer 4 et Netscape 4), à une réserve près.

    Netscape 4, en effet, ne remplit pas correctement un élément de type bloc avec la couleur choisie, à moins de spécifier une bordure (même une bordure de largeur nulle). Ajouter une bordure laisse un espace transparent entre le remplissage par la couleur et la bordure. Netscape 4 possède une propriété... propriétaire, layer-background-color, qui corrige ce problème.

    3. Spécifier une image de fond : background-image

    a. Propriété

    background-image permet de spécifier une image de fond pour l'élément. Il faut indiquer l'URL de l'image par rapport à l'emplacement de la feuille de style. Exemples d'utilisation :

    body
        {
            background-image : url(/images/ombrages.gif);
        }

    p
        {
            background-image : url(http://www.wpdfd.com/images/bluebg.gif);
        }

    b. Compatibilité

    Il n'y a pas de problème de compatibilité avec les navigateurs compatibles CSS (même Internet Explorer 4 et Netscape 4), à une réserve près.

    Netscape 4, en effet, ne remplit pas correctement un élément de type bloc avec l'image choisie, à moins de spécifier une bordure (même une bordure de largeur nulle). Ajouter une bordure laisse un espace transparent entre le remplissage par la couleur et la bordure. Netscape 4 possède une propriété... propriétaire, layer-background-color, qui corrige ce problème.

    4. Changer la position par défaut de l'image de fond : background-position

    a. Propriété

    background-position permet de spécifier la position initiale d'une image de fond. Le moyen le plus simple est d'utiliser des mots-clefs :

    p.introduction
        {
            background-image : url(images/fond1.jpg);
            background-position : top center;
        }

    Dans chaque paragraphe de class="introduction", l'image de fond est localisée par l'URL relative images/fond.jpg. Elle est positionnée en haut et au milieu horizontal du paragraphe.

    Les pourcentages et les longueurs sont aussi autorisés. Les pourcentages se réfèrent à la taille de l'élément, et non à celle de l'image lui servant de fond. Les longueurs, bien que possibles, ne sont pas conseillées car l'affichage est alors trop dépendant des conditions précises de visualisation du document.

    Quand les pourcentages ou les longueurs sont utilisés, on indique d'abord la position horizontale, puis la position verticale. Par exemple :

    p.conclusion
        {
            background-image : url(images/fond2.jpg);
            background-position : 20% 65%;
        }

    Dans chaque paragraphe de class="introduction", l'image de fond est localisée par l'URL relative images/fond.jpg. L'image est positionnée de telle sorte que le point situé à 20% de la largeur de l'image, comptée à partir de la gauche, et à 65% de sa hauteur, comptée à partir du haut, est placé à 20% de la largeur du paragraphe, compté à partir de la gauche, et à 65% de la hauteur de ce dernier, comptée à partir du haut.

    Si on donne uniquement la position horizontale, la position verticale est fixée à 50%. On peut combiner pourcentages et longueurs : background-position: 33% 2cm est autorisé. En revanche, on ne peut combiner mots-clefs et pourcentages ou longueurs.

    b. Compatibilité

    Cette propriété fonctionne avec Internet Explorer 4 et suivants, Netscape 6 et suivants, Opera et Mozilla.

    Affecter une propriété différente de la valeur par défaut, sous Internet Explorer 4 pour Windows déclenche un bogue dans le support de ce navigateur pour la propriété background-repeat.

    5. Contrôler la répétition d'une image de fond : background-repeat

    a. Propriété

    background-repeat permet de spécifier la manière dont une image de fond va être répétée. Exemples d'utilisation :

    p.introduction
        {
            background-image : url(images/fond1.jpg);
            background-repeat : repeat;
        }

    p.conclusion
        {
            background-image : url(images/fond2.jpg);
            background-repeat : repeat-y;
        }

    Les valeurs possibles sont :

    b. Compatibilité

    Il n'y a pas de gros problème de compatibilité avec les navigateurs compatibles CSS (même Internet Explorer 4 et Netscape 4).

    Internet Explorer 4 pour Windows, cependant, ne place les images que de la gauche vers la droite, et du haut vers le bas. Il s'ensuit qu'en spécifiant une propriété background-position différente de la valeur par défaut, l'affichage reste incomplet.

    6. Contrôler le défilement de l'image de fond : background-attachment

    a. Propriété

    background-attachment permet de spécifier la manière dont l'image de fond est « attachée » au défilement de la fenêtre. Exemples d'utilisation :

    body
        {
            background-image : url(images/fond0.jpg);
            background-attachment : fixed;
        }

    Les deux valeurs possibles sont fixed (quand on agit sur les barres de défilement, l'image ne bouge pas), et scroll, valeur par défaut (le défilement de l'image suit celui du texte).

    b. Compatibilité

    Le support pour cette propriété varie selon les navigateurs :

    Internet Explorer pour Windows (jusqu'à la version 6), et les navigateurs Opera (jusqu'à la version 6) ne supportent pas correctement la valeur fixed pour d'autres éléments que l'élément <body>. Opera 7, Internet Explorer 5 pour Macintosh, Netscape 6.2.1 et suivants, toutes les versions de Mozilla ont un support correct.

    7. Le résumé : background

    a. La propriété

    Il est possible de réunir plusieurs de ces propriétés en utilisant le raccourci background. Par exemple...

    #supplement
        {
            background : #0c0 url(feuilles.jpg) no-repeat bottom right;
        }

    La déclaration précédente permet de spécifier que l'élément d'identifiant supplement a une couleur de fond par défaut, #00cc00, associée à une image de fond feuilles.jpg, alignée en bas à droite de l'élément, et ne se répétant pas.

    b. Compatibilité

    Le support pour ce raccourci varie selon les navigateurs :

    Ce raccourci est partiellement supporté par Netscape 4 ; mais cela n'est pas documenté officiellement et n'est donc pas fiable.

    Exercice 1. Couleurs et fond

    Énoncé
    Correction

    IV. Les « boîtes »

    1. Généralités

    a. Introduction : le modèle de boîte

    La recommandation CSS1 indique que tous les éléments HTML (sauf ceux qui ne figurent que par leurs adresses : images, son, objets multimédia en général, plug-in...) puissent être considérés comme des blocs rectangulaires. Ce bloc est constitué de plusieurs couches (en pelures d'oignon en quelque sorte) ; on a de l'intérieur vers l'extérieur :

    Pelures d'oignon

    Cette terminologie est décomposée selon le côté concerné : droite (right), gauche (left), dessus (top), dessous (bottom).

    b. Règles d'attribution

    Pour tous les éléments définis ci-dessus, une propriété définit son épaisseur, il s'agit :

    margin

    padding

    border-width

    margin-top

    padding-top

    border-top-width

    margin-right

    padding-right

    border-right-width

    margin-bottom

    padding-bottom

    border-bottom-width

    margin-left

    padding-left

    border-left-width

    Table 1. Propriétés pour l'ajustement de la taille des boîtes.

    Chacune des propriétés citées en en-tête permet d'énoncer celles de la colonne entière selon un protocole que nous allons illustrer par les exemples suivants :

    La règle est donc la suivante : les valeurs sont attribuées à partir du sommet (top) dans le sens des aiguilles d'une montre (top, right, bottom, left). Lorsqu'une valeur est manquante, on lui attribue celle du côté qui lui fait face.

    2. Les propriétés de la marge extérieure : margin

    Les valeurs possibles de la propriété sont un pourcentage, une longueur ou auto. Le pourcentage est une fraction de la largeur de l'élément parent contenant le bloc. Des valeurs négatives sont possibles dans les limites définies par l'implémentation. Le mot clé auto laisse au navigateur la gestion de cette épaisseur.

    3. Les propriétés de la marge intérieure : padding

    Les valeurs possibles de cette propriété sont un pourcentage ou une longueur.

    4. Les propriétés de la bordure : border

    a. Propriétés de largeur: border-width

    Les valeurs possibles de cette propriété sont une longueur, ou bien thin (mince), medium ou thick (gros). Cette propriété est compatible avec tous les navigateurs.

    b. Spécifier la couleur de la bordure : border-color

    border-color permet de spécifier la couleur de la bordure.

    La répartition des couleurs s'organise en commençant au sommet, puis en tournant dans le sens des aiguilles d'une montre. Si une couleur est manquante, on prend celle qui lui fait face.

    Si l'encadrement est présent mais pas la propriété border-color, le navigateur reprend par défaut la couleur du texte (color).

    Cette propriété est compatible avec tous les navigateurs, à la réserve près que Netscape 4 n'accepte qu'une seule valeur de couleur.

    c. Spécifier le type de trait de la bordure : border-style

    border-style permet de spécifier le style de la bordure.

    Les valeurs possibles sont :

    La compatibilité dépend de la valeur de la propriété choisie :

    d. Raccourcis : border-top, border-right, border-bottom, border-left

    border-top, border-right, border-bottom, border-left et border permettent des raccourcis :

    p.intro
        {
            border-top : thick blue double;
        }

    p.conclu
        {
            border-left : medium red dotted;
        }

    p.corps
        {
            border : thin medium thick red blue blue inset;
        }

    On peut également choisir de n'appliquer un style particulier qu'à une bordure :

    a:hover
        {
            border-bottom-style : dashed;
            border-bottom-color : gray;
            border-bottom-width : 1px;
        }

    Ces raccourcis sont supportés par tous les navigateurs, sauf Netscape 4 qui ne supporte que border-xxx-width, pour laquelle il fixe la valeur par défaut à 0, et non medium.

    5. Placement d'un élément de type bloc par rapport au contenu environnant : float

    float permet de spécifier la position d'un texte par rapport au flux de la page, c'est-à-dire sans position « naturelle ». L'élément est alors sorti du flux. Cela permet par exemple de placer une image de manière à ce que le texte dans lequel elle se trouve la contourne.

    Cette propriété peut prendre les valeurs none, right ou left. Dans l'exemple suivant, le paragraphe de classe note sera « calé » à droite de la fenêtre.

    p.note
        {
            float : right;
        }

    6. Nettoyer les éléments flottants : clear

    clear permet de spécifier si l'élément peut admettre un élément « flottant » sur un de ses côtés.

    Cette propriété peut prendre les valeurs none (la valeur par défaut), left, right ou both. Si clear="left", l'élément est positionné en-dessous de tout élément « flottant » sur sa gauche. Si clear="both", l'élément est positionné en-dessous de tout élément « flottant » sur sa gauche ou sa droite. Par exemple...

    h1
        {
            clear : left;
        }

    ... signifie qu'aucun élément flottant ne pourra se placer à gauche d'un titre de niveau 1.

    Cette propriété est supportée par tous les navigateurs.

    7. Spécifier largeur et hauteur d'un élément : height, width

    a. Le comportement théorique

    Ces propriétés s'appliquent à tout élément de type bloc mais aussi aux éléments insérés (dont ne figure que l'adresse url) comme les images.

    Les valeurs possibles de ces propriétés sont une longueur, un pourcentage (seulement pour width) et auto. Le pourcentage est une fraction de la taille du conteneur parent. L'option auto se réfère aux dimensions intrinsèques du contenu (par exemple la taille intrinsèque d'une image).

    b. Compatibilité

    Les recommandations du W3C stipulent que la largeur totale occupée à l'écran par un élément est égale à la somme de width, du double de padding-width et du double de border-width. Ce modèle de boîte standard est respecté par tous les navigateurs sauf Internet Explorer, pour qui la largeur à l'écran n'est égale qu'à width. C'est une source classique d'incompatibilités d'affichages entre navigateurs.

    Exercice 1. Boîtes

    Énoncé
    Correction

    V. Listes

    1. Spécifier une image comme puce dans une liste : list-style-image

    list-style-image permet de spécifier une puce pour une liste. Il faut indiquer l'URL de l'image à utiliser. Exemple d'utilisation :

    ul.index
        {
            list-style-image : url(../images/rond_rouge.gif);
        }

    2. Changer l'alignement du texte après la puce dans une liste : list-style-position

    list-style-position permet de spécifier la position de la puce ou du numéro. Exemple d'utilisation :

    ul.dedans
        {
            list-style-position : inside;
        }

    Les valeurs possibles sont inside et outside. Avec list-style-position: inside, le numéro ou la puce est aligné avec le texte. Avec list-style-position: outside, le numéro ou la puce est en marge du texte.

    3. Changer la forme de la puce ou le type de numérotation : list-style-type

    list-style-type permet de spécifier le type de puce ou de numéro selon le type de liste. Exemple d'utilisation :

    ul.carres
        {
            list-style-type : square;
        }

    Pour une liste non ordonnée, les valeurs possibles sont disc, circle, square et none.

    Pour une liste ordonnée, les valeurs possibles sont decimal (1, 2...), lower roman (i, ii...), upper-roman (I, II...), lower-alpha (a, b...), upper-alpha (A, B...) et none.

    Exercice 1. Mise en forme de listes

    Énoncé
    Correction

    VI. Autres propriétés

    1. Contrôle de l'affichage ou de la disparition d'un élément : display

    display permet de spécifier le mode d'affichage de l'élément. Exemple d'utilisation :

    h4
        {
            display : inline;
        }

    Les valeurs possibles sont :

    2. Prise en charge des blancs : white-space

    white-space permet de spécifier la manière dont les blancs sont pris en compte. Exemple d'utilisation :

    div.telque
        {
            white-space : pre;
        }

    Les valeurs possibles sont :




    Conditions d'utilisation et licence

    Creative Commons License
    Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.


    Source : www.gchagnon.fr/cours/html/index.html