pictavie.net - Tutorial - Les feuilles de style

Les feuilles de style

Les feuilles de styles permettent de préparer des formats de présentation visant à simplifier la conception graphique de vos pages. Ainsi, le titre en bleu de ce chapitre (comme, d'ailleurs, le texte de ce paragraphe) sont issus de feuilles de styles. Il existe quatre manières de créer ce type de charte graphique. Comme toujours dans ces pages, nous nous attacherons à aller au plus simple et à n'étudier que trois méthodes :

La feuille de style partielle, en utilisant la fonction STYLE dans un attribut : cette méthode permet de modifier ponctuellement un élément de la mise en page.

...
<HEAD>
<STYLE type="text/css">
<!--
.exemple23 {
           font-size: 11pt;
           font-family: Arial, Helvetica, sans-serif;
           font-weight: 900;
           color: #CC9900;
           background-color: transparent
           }
-->
</STYLE>
</HEAD>
<BODY>
<P class="exemple23">Cette phrase utilise la classe de style "exemple23".</P>
</BODY>
...

Exemple : Cette phrase utilise la classe de style "exemple23".

La feuille de style complète en cours de page HTML, en utilisant l'instruction STYLE : cette méthode permet d'uniformiser la présentation graphique de la page concernée, et elle seule.
```
...
<BODY>
<P style="font-family: 'MS sans-serif', sans-serif; font-size: 11pt;
    font-weight: bold; color: #CC9900; background-color: transparent">Cette phrase utilise
    l'instruction STYLE.</P>
</BODY>
...
```
Exemple : Cette phrase utilise l'instruction STYLE.
La feuille de style en dehors de la page HTML, par l'appel d'un fichier dont l'extension est .css (Cascading Style Sheets) : cette troisième méthode permet d'uniformiser toutes les pages en même temps, ce qui est particulièrement pratique pour modifier la présentation graphique de l'ensemble de votre site, le jour où vous le déciderez. Le fichier exemple24.css contient :
```

```
La page HTML contient :
```
...
</HEAD>
<LINK rel="stylesheet" type="text/css" href="exemple24.css">
</HEAD>
<BODY>
<P class="exemple24">Cette phrase utilise la feuille de style externe "exemple24.css".</P>
</BODY>
...
```
Exemple : Cette phrase utilise la feuille de style externe "exemple24.css".

Et maintenant, quelles sont les instructions de styles ? Ce qui suit n'est qu'un résumé de ce que vous pourrez trouver, de manière plus détaillée, à cette adresse.

Propriétés des polices :

font-family           <nom>,<famille>
font-style            normal | italic | oblique
font-variant          normal | small-caps
font-weight           normal | bold | bolder | lighter |
                          100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size             xx-small | x-small | medium | large | x-large | xx-large |
                          smaller | larger | <taille> | <pourcentage>
font                  font-style || font-variant ||
                          font-weight, font-size/line-height font-family

Propriétés des couleurs et fonds :

color                 <couleur>
background-color      <couleur> | transparent
background-image      <url(image)> | none
background-repeat     repeat | repeat-x | repeat-y | no-repeat
background-attachment scroll | fixed
background-position   <pourcentage> | <longueur> {1,2} |
                          top | center | bottom || left | center | right
background            background-color || background-image || backround-repeat ||
                          background-attachment || background-position

Propriétés du texte :

word-spacing          normal | <longueur>
letter-spacing        normal | <longueur>
text-decoration       none | underline || overline || line-through || blink
vertical-align        baseline | sub | super | top | text-top |
                          middle | bottom | text-bottom | <pourcentage>
text-transform        none | capitalize | uppercase | lowercase
text-align            left | right | center | justify
text-indent           <longueur> | <pourcentage>
line-height           normal | <nombre> | <longueur> | <pourcentage>

Propriétés des boîtes :

margin-top            <longueur> | <pourcentage> | auto
margin-right          <longueur> | <pourcentage> | auto
margin-bottom         <longueur> | <pourcentage> | auto
margin-left           <longueur> | <pourcentage> | auto
margin                <longueur> | <pourcentage> | auto {1,4}
padding-top           <longueur> | <pourcentage>
padding-right         <longueur> | <pourcentage>
padding-bottom        <longueur> | <pourcentage>
padding-left          <longueur> | <pourcentage>
padding               <longueur> | <pourcentage> {1,4}
border-top-width      thin | medium | thick | <longueur>
border-right-width    thin | medium | thick | <longueur>
border-bottom-width   thin | medium | thick | <longueur>
border-left-width     thin | medium | thick | <longueur>
border-width          thin | medium | thick | <longueur> {1,4}
border-color          <couleur> {1,4}
border-style          none | dotted | dashed | solid | double |
                          groove | ridge | inset | outset {1,4}
border-top            border-top-width || border-style || <couleur>
border-right          border-right-width || border-style || <couleur>
border-bottom         border-bottom-width || border-style || <couleur>
border-left           border-left-width || border-style || <couleur>
border                border-width || border-style || <couleur>
width                 <longueur> | <pourcentage> | auto
height                <longueur> | auto
float                 left | right | none
clear                 none | left | right | both

Propriétés de classification :

display               block | inline | list-item | none
white-space           normal | pre | nowrap
list-style-type       disc | circle | square | decimal | none |
                          lower-roman | upper-roman | lower-alpha | upper-alpha
list-style-image      <url> | none
list-style-position   inside | outside
list-style            list-style-type || list-style-position || <url>

Unités :

Unités relatives      em (taille de l'élément FONT)
                      ex (taille de la lettre x)
                      px (pixel)
Unités absolues       in (pouce : 1=2,54cm)
                      cm (centimètre : 1=10mm)
                      mm (millimètre)
                      pt (point : 1=1/72in)
                      pc (pica : 1=12pt)
Pourcentages          +<valeur>% ou -<valeur>%
Couleurs              aqua, black, blue, fuchsia, gray, green, lime, maroon,
                          navy, olive, purple, red, silver, teal, white, yellow
                      #RRGGBB
                      #RGB
                      RGB(<valeur>,<valeur>,<valeur>)
                      RGB(<valeur>%,<valeur>%,<valeur>%)
Adresse URL           url(image.png)
                      url(http://chemin/image.png)
                      url( image.png )
                      url("image.png")
                      url(\"image\".png)

Lorsque vous aurez terminé la réalisation de vos fichiers CSS, pensez à faire une vérification de vos pages. Pour ce faire, insérez dans ces dernières, un lien (que vous pourrez enlever ensuite) qui sera rédigé comme suit :

<A href="http://jigsaw.w3.org/css-validator/validator?uri=votre_url target='_blank'">Vérif</A>

Exemple : Vérif