SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
 |
Formatage de listes |
|
|
 | |
Les mentions de formatage de listes des feuilles de style concernent spécialement les repères HTML ul, pour (
définir des listes énumératives) et ol, pour ( définir des 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> à l'aide d'attributs complémentaires. Les attributs correspondants sont pourtant en HTML 4.0 tous classés "en cours d'abandon" donc indésirables à l'avenir. À la place, les propriétés CSS décrites ici doivent être employées pour formater ces listes. Outre les possibilités offertes par HTML, existent aussi des possibilités avancées pour formater les listes, par exemple la possibilité de les afficher avec un retrait à gauche aussi bien qu'à droite, ou de définir ses graphiques personnels comme puce pour l'énumération.
 |
list-style-type (Type de représentation)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.
<html><head><title>list-style-type</title> </head><body bgcolor="FFFFFF" text="#000000"> <h4>Liste énumérative <ul> avec type de représentation <i>disk</i></h4> <ul style="list-style-type:disk"> <li>L'expérience fait la science </li> <!--etc...--> </ul> <h4>Liste énumérative <ul> avec type de représentation <i>circle</i></h4> <ul style="list-style-type:circle"> <li>L'expérience fait la science</li> <!--etc...--> </ul> <!--usw.--> <h4>Liste numérotée <ol> avec type de représentation <i>decimal</i></h4> <ol style="list-style-type:decimal"> <li>Ordre du jour</li> <!--etc...--> </ol> <h4>Liste numérotée <ol> avec type de représentation <i>lower-roman</i></h4> <ol style="list-style-type:lower-roman"> <li>Ordre du jour</li> <!--etc...--> </ol> <!--etc...--> </body></html> |
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...
lower-latin = pour listes ol: numérotation a.,b.,c.,d. etc... y compris le jeu de caractères latin étendu
upper-latin = pour listes ol: numérotation A.,B.,C.,D. etc... y compris le jeu de caractères latin étendu
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
Les mentions suivantes plus récentes sont également possibles mais ne sont cependant jusqu'alors interprétées que par Netscape à partir de la version 6.1:
lower-greek = pour listes ol: numérotation avec l'alphabet grec: α., β., γ., δ. etc...
hebrew = pour listes ol: numérotation avec l'alphabet hébreu
decimal-leading-zero = pour listes ol: numérotation avec un 0 qui précède: 01.,02.,03.,04., ... 98.,99. etc...
cjk-ideographic = pour listes ol: numérotation avec des idéogrammes
hiragana = pour listes ol: numérotation en japonais (a, i, u, e, o, ka, ki, ... )
katakana = pour listes ol: numérotation en japonais (A, I, U, E, O, KA, KI, ... )
hiragana-iroha = pour listes ol: numérotation en japonais (i, ro, ha, ni, ho, he, to, ... )
katakana-iroha = pour listes ol: numérotation en japonais (I, RO, HA, NI, HO, HE, TO, ... )
|
|
list-style-position (Retrait des listes)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.
<html><head><title>list-style-position</title> </head><body bgcolor="FFFFFF" text="#000000"> <h4>Liste numérotée <ol> avec retrait de la liste <i>inside</i></h4> <ol style="list-style-position:inside"> <li>Ordre du jour<br> en deux lignes</li> <!--etc...--> </ol> <h4>Liste numérotée <ol> avec retrait de la liste <i>outside</i></h4> <ol style="list-style-position:outside"> <li>Ordre du jour<br> en deux lignes</li> <!--etc...--> </ol> </body></html> |
Avec list-style-position: vous pouvez contrôler comment le retrait doit se faire. Une des mentions suivantes est permise.
inside = puces et numérotation dans le corps de la liste.
outside = retrait à gauche des puces et numérotation (réglage par défaut).
Netscape 4.x n'interprète pas encore cette mention.
|
|
list-style-image (Graphiques de puces personnalisés)Vous pouvez spécifier votre propre graphique de puces personnalisées pour vos listes énumératives.
<html><head><title>list-style-image</title> </head><body bgcolor="FFFFFF" text="#000000"> <h4>Listes énumératives <ul> avec puces personnalisées</h4> <ul style="list-style-image:url(list_style_image.gif)"> <li> <a href="../../../html/index.htm"><b>HTML/XHTML</b></a><br> Le langage du Web</li> <!--etc...--> </ul> </body></html> |
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.x n'interprète pas encore cette mention.
|
|
list-style (Représentation de liste en général)Cette mention regroupe les différentes mentions possibles suivantes:
list-style-type (Type de représentation)
list-style-position (Retrait des listes)
list-style-image (Graphiques de puces personnalisés)
<html><head><title>list-style</title> </head><body bgcolor="FFFFFF" text="#000000"> <h4>Liste numérotée <ol> avec les mentions <i>lower-roman inside</i></h4> <ol style="list-style:lower-roman inside"> <li>passer voir Annie<br> et passer le bonjour à Eug&ecute;nie </li> <!--etc...--> </ol> </body></html> |
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.x n'interprète qu'une partie de ces mentions.
|
| |
 |
Formatage de tableaux
|
 |
Couleurs et images d'arrière plan
|
| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
