BiBBleFREE

Listes à puces ou numérotées en HTML.

mardi 20 juillet 2010 par musteray

Type de puce ou de numérotation

La propriété list-style-type indique quel type générique de puce ou quel mode de numérotation il faut utiliser pour la liste concernée.

Propriété list-style-type
Exemples ul { list-style-type: square; }
ol { list-style-type: upper-roman; }
Valeurs possibles — Liste à puces : disc (cercle plein - valeur par défaut),circle (cercle vide), square (carré plein).
— Liste numérotée : decimal (1, 2...- valeur par défaut), decimal-leading-zero (01, 02...), lower-roman (i,ii...), upper-roman (I,II...), georgian, armenian, lower-latin = lower-alpha (a, b, c...), upper-latin = upper-alpha (A, B, C...), lower-greek (α, β,γ ...).
— Pas de puce ni de numéro : none.
Héritage Propriété héritée. Retour à la valeur initiale : disc ou decimal.

Utilisation d’une image comme puce

Propriété list-style-image
Exemples ul { list-style-image: url(image/puce.gif); }
li { list-style-image:url(http://www.cocone.org/logo.gif);}
Valeurs possibles url (nom d’image avec chemin relatif ou absolu) ou none : aucune image (valeur par défaut).
Héritage Propriété héritée. Pour retrouver la valeur initiale, utiliser none.

Position de la puce

Outside / Inside {PNG}

Propriété list-style-position
Exemples ul { list-style-position: outside; }
ol { list-style-position: inside; }
Valeurs possibles outside : la puce est dans la marge (valeur par défaut) ;
inside : la puce fait partie de la première ligne du paragraphe.
Héritage Propriété héritée. Retour à la valeur initiale avec outside.

Raccourci pour toutes les propriétés de liste

Propriété list-style
Exemple li { list-style: circle inside; }
Valeurs possibles Toutes les valeurs (facultatives) de list-style-type, list-style-image et list-style-position.
Héritage Cette propriété est héritée, comme chacune des propriétés dont elle est un raccourci.

Un sous-élément d’un élément HTML

On peut décrire un sous-élément d’un élément HTML. La syntaxe est la suivante si l’on souhaite que tous les items d’une liste soient décalés d’un centimètre entre eux :

La liste {PNG}

Si on veut juste décaler les items de la liste principale, il faut écrire :

Liste principale {PNG}


Site en travaux

Site en travaux

Attention : un problème technique (serveur SQL) empêche l'accès à cette partie du site. Merci de votre compréhension.
Accueil du site | Contact | Plan du site | | Statistiques du site | Visiteurs : 186 / 0

Suivre la vie du site fr  Suivre la vie du site Internet.  Suivre la vie du site HTML  Suivre la vie du site CSS

© 2007 -2012 BiBBleFREE