SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style
Les mentions de feuilles de style concernent spécialement les repères HTML <ul> (
listes
énumératives) et <ol> ( listes
numérotées).
Vous pouvez à l'aide de mentions de feuilles de style imposer les mêmes
formatages qu'il est possible d'obtenir avec les repères HTML <ul>
et <ol> même à l'aide d'attributs complémentaires. L'avantage
de telles mentions de feuilles de style par rapport à la mention directe de
repères HTML réside avant tout quand vous les notez dans un fichier séparé
que vous pouvez ensuite incorporer dans des fichiers HTML de votre choix (voir
aussi: définir
des feuilles de style dans un fichier séparé). En outre il existe
quelques possibilités avancées pour le formatage de listes, par exemple la
possibilité de mettre les listes en retrait interne plutôt qu'externe ou
encore de définir un graphique personnel comme puce.
Les mentions de feuilles de style sur les tableaux concernent des
propriétés de tableau qui ne se laissent pas décrire par d'autres mentions de
feuilles de style par exemple celles concernant les cadres
et espaces intérieurs.
 
|
Type de représentation (list-style-type)Pour les listes énumératives, vous pouvez spécifier la forme de la puce. Pour les listes numérotées, vous pouvez avoir une influence sur la représentation des numéros.
<style type="text/css">
ul.rond { list-style-type:circle }
ul.rectangle { list-style-type:square }
ol.nombre { list-style-type:decimal }
ol.lettre { list-style-type:lower-alpha }
</style>
|
Avec list-style-type: vous pouvez contrôler l'apparence des signes d'une liste. Une des mentions suivantes est permise.
decimal = pour listes <ol> : numérotation 1.,2.,3.,4.
etc...
lower-roman = pour listes <ol> : numérotation i.,ii.,iii.,iv.
etc...
upper-roman = pour listes<ol> : numérotation I.,II.,III.,IV.
etc...
lower-alpha = pour listes<ol> : numérotation
a.,b.,c.,d. etc...
upper-alpha = pour listes<ol> : numérotation A.,B.,C.,D.
etc...
disc = pour listes<ul> : rond plein comme puce
circle = pour listes<ul>- : puce ronde
square = pour listes<ul> : puce rectangulaire
none = pas de puce, pas de numérotation
|
|
Retrait de la liste (list-style-position)Vous pouvez spécifier comment les puces ou la numérotation doivent se comporter avec le contenu des points de la liste en cas de retrait.
<ul style="list-style-position:inside"> <li>texte <li>texte </ul>texte |
Avec list-style-position: vous pouvez contrôler comment le retrait doit se faire. Une des mentions suivantes est permise.
inside = réduire le retrait.
outside = augmenter le retrait (réglage par défaut).
Netscape 4.0 n'interprète pas cette mention.
|
|
Graphismes de puces personnalisés (list-style-image)Vous pouvez spécifier votre propre graphique de puces personnalisé pour vos listes énumératives.
<style type="text/css">
ul { list-style-image:url(point.gif) }
</style>
|
Avec list-style-image:url([nom de fichier]) vous pouvez mentionner un graphique pour vos propres puces. Comme fichiers graphiques vous devez toujours utiliser des fichiers graphiques GIF ou JPG comme il est habituel en HTML.
Dans l'exemple, il est supposé que le fichier graphique se trouve dans le
même répertoire que le fichier HTML. Si le graphique se trouve dans un autre
répertoire, vous devez mentionner le chemin relatif ou absolu. Cela fonctionne
exactement comme pour incorporer
des graphiques en HTML.
Netscape 4.0 n'interprète pas cette mention.
|
|
Représentation de liste en général (list-style)Cette mention regroupe les différentes mentions possibles suivantes:
type de représentation (list-style-type)
retrait de la liste (list-style-position)
graphique de puce personnalisé (list-style-image)
<ol style="list-style:upper-roman outside;"> <li>texte <li>texte </ol> |
Avec list-style: vous pouvez faire des mentions résumées pour l'apparence des listes énumératives ou de listes numérotées. Notez les mentions pour le type de représentation, le retrait ainsi que le graphique de puce, séparées par des espaces, comme dans l'exemple ci-dessus. L'ordre dans lequel elles sont indiquées n'a pas d'importance. Il n'est pas indispensable de noter quelque chose pour toutes les mentions.
Netscape 4.0 n'interprète qu'une partie de ces mentions.
|
|
Étendre une cellule de tableau sur plusieurs colonnes (column-span)Vous pouvez étendre une cellule d'entête ou des cellules de données sur
plusieurs colonnes. La mention de feuille de style a le même effet que relier des cellules sur plusieurs colonnes
en HTML. À cette différence près pourtant que vous pouvez faire des mentions
globales à des sous-classes de cellules de tableau.
<style type="text/css">
td.deuxcol { column-span:2 }
td.troiscol { column-span:3 }
</style>
|
Avec column-span: vous pouvez mentionner le nombre de colonnes sur lequel une cellule de tableau (repère <td> ou <th>) doit s'étendre.
|
|
Étendre une cellule de tableau sur plusieurs lignes (row-span)Vous pouvez étendre une cellule d'entête ou des cellules de données sur
plusieurs colonnes. La mention de feuille de style a le même effet que relier des cellules sur plusieurs
lignes
en HTML. À cette différence près pourtant que vous pouvez faire des mentions
globales à des sous-classes de cellules de tableau.
<style type="text/css">
td.deuxcol { row-span:2 }
</style>
|
Avec row-span: vous pouvez mentionner le nombre de lignes sur lequel une cellule de tableau (repère <td> ou <th>) doit s'étendre
|
|
Position d'un titre
ou inscription de tableau (caption-side)Vous pouvez définir un titre ou une inscription de tableau pour des tableaux.
Avec la mention de feuille de style décrite ici vous pouvez fixer la position
du titre ou de l'inscription. La mention de feuille de style a le même effet
que titre
de tableau/inscription sous le tableau en HTML.
<table border"> <caption style="caption-side:top">titre du tableau</caption> <!-- contenu du tableau --> </table> |
Avec caption-side: vous pouvez spécifier la position du titre du tableau. La mention est conçue pour le repère HTML <caption>...</caption>. Les mentons suivantes sont permises:
top = en haut du tableau centré (titre du tableau).
topleft = en haut du tableau aligné à gauche (titre du tableau).
topright = en haut du tableau aligné à droite (titre du tableau).
bottom = sous le tableau centré (inscription du tableau).
bottomleft = sous le tableau aligné à gauche (inscription du tableau).
bottomright = sous le tableau aligné à droite (inscription du tableau).
|
|
Sortie vocale de tableau (speak-header-cell)Quand un tableau HTML n'est pas affiché ni imprimé, mais lu par un lecteur ou un système de reproduction vocale (par exemple pour les non voyants), surgit le problème qu'un espace en deux dimensions doit être lu dans le temps en une dimension. Avec la mention décrite ici vous pouvez décider pour ce cas si le contenu des cellules d'entête doit être reproduit pour chacune de ses cellules de données ou si le contenu des cellules d'entête ne doit être lu qu'une seule fois.
<table border"> <tr> <th style="speak-header-cell:always">cellule d'entête 1</th> <th style="speak-header-cell:once">cellule d'entête 2</th> </tr> <tr> <td>cellule de données 1</td> <td>cellule de données 2</td> </tr> <tr> <td>cellule de données 3</td> <td>cellule de données 4</td> </tr> </table> |
Avec speak-header-cell: vous pouvez spécifier comment le contenu des cellules d'entête doit être reproduit. Dans la spécification CSS 2.0 il n'est pas encore clair si la mention est prévue pour des cellules d'entête <th> ou pour leurs cellules de données <td>. L'exemple prévu ci-dessus suppose que la mention se trouve dans le repère des cellules d'entête. L'effet de l'exemple est que le cellule d'entête 1 sera répétée avant les cellules de données 1 et 3, tandis que la cellule d'entête 2 ne sera reproduite qu'une fois. Les mentions suivantes sont possibles:
always = répéter le contenu de la cellule d'entête avant chacune de
ses cellules de données.
once = reproduire une seule fois le contenu de la cellule d'entête (réglage
normal).
|
| |
après: |
Mentions de feuilles de style: pseudo-formats
|
avant: |
Mentions de feuilles de style: couleurs et images d'arrière plan
|
SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style
Serge François, 13405@free.fr
