Cours de (X)HTML / CSS

Les éléments de listes

Les éléments de liste sont tous de type bloc.

Les styles de liste.

N.B. : Les listes peuvent être imbriquées. Dans ce cas, la sous-liste doit être contenue dans l'élément de liste <li> parent (et non pas le suivre). Exemple

<ul>

Liste non ordonnée.

Exemple :

<p>Liste d'ingrédients</p>
<ul>
	<li>Farine</li>
	<li>Beurre</li>
	<li>Sucre</li>
	<li>Cacao</li>
</ul>

Rendu à l'affichage :

Liste d'ingrédients

  • Farine
  • Beurre
  • Sucre
  • Cacao
Haut de page

<ol>

Liste ordonnée.

Exemple :

<p>Ordre d'arrivée</p>
<ol>
	<li>Pierre</li>
	<li>Paul</li>
	<li>Jacques</li>
</ol>

Rendu à l'affichage :

Ordre d'arrivée

  1. Pierre
  2. Paul
  3. Jacques
Haut de page

<li>

Elément de liste.

Exemple :

<p>Liste d'ingrédients</p>
<ul>
	<li>Farine</li>
	<li>Beurre</li>
	<li>Sucre</li>
	<li>Cacao</li>
</ul>

Rendu à l'affichage :

Liste d'ingrédients

  • Farine
  • Beurre
  • Sucre
  • Cacao
Haut de page

<dl>

Encadre une liste de définitions.

<dt>

Terme de défintion.

<dd>

Description de définition.

Exemple :

<dl>
	<dt>Hacker</dt>
	<dd>Informaticien qui aime explorer les systèmes des autres. </dd>
	
	<dt>Pirate</dt>
	<dd>Personne qui dérobe, détourne ou détruit des données informatiques protégées.</dd>
</dl>

Rendu à l'affichage :

Hacker
Informaticien qui aime explorer les systèmes des autres.
Pirate
Personne qui dérobe, détourne ou détruit des données informatiques protégées.
Haut de page

Les styles de liste

Les styles de liste sont définis par les propriétés CSS suivantes :

list-style-type

Valeurs possibles pour une liste non ordonnée <ul> : square (puces carrées), circle (puces rondes creuses), disc (puces rondes pleines), none.
Valeurs possibles pour une liste ordonnée <ol> : decimal (1. 2. 3. 4. 5...), decimal-leading-zero (Numérotation décimale sur 2 digits : 01. 02. 03. 04. 05), lower-roman (i. ii. iii. iv. v...), upper-roman (I. II. III. IV. V...), lower-alpha ou lower-roman (a. b. c. d. e...), upper-alpha ou upper-latin (A. B. C. D. E...), lower-greek (α,β,γ,δ,ε...). Plus quelques autres plus exotiques (hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha).

list-style-image

Valeurs possibles : none, url(image).
Définit l'image utilisée comme puce.

list-style-position

Valeurs possibles : inside, outside (par défaut).
Avec inside, lors d'un retour à la ligne automatique, le texte s'aligne au début de la puce.
Avec outside, lors d'un retour à la ligne automatique, le texte s'aligne à la fin de la puce.

list-style

Cette propriété rassemble les 3 précédentes. En combinant type et url(image), on offre une alternative en cas d'indisponibilité de l'image. La syntaxe est de la forme :
list-style:type position url(image)

Exemple

<ul class="disque">
	<li>Synopsis</li>
	<li>Personnages
		<ul class="carre">
			<li>Pim</li>
			<li>Pam</li>
			<li>Poum</li>
		</ul>
	</li>
	<li>Livret
		<ol class="capromain">
			<li>Acte I
				<ol class="decim">
					<li>Scène 1</li>
					<li>Scène 2</li>
					<li>Scène 3</li>
				</ol>
			</li>
			<li>Acte II
				<ol class="decim">
					<li>Scène 1</li>
					<li>Scène 2</li>
					<li>Scène 3</li>
					<li>Scène 4</li>
				</ol>
			</li>
			<li>Acte II
				<ol class="decim">
					<li>Scène 1</li>
					<li>Scène 2</li>
					<li>Scène 3</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>Historique</li>
</ul>

Style :

<style type="text/css">
	.disque{
		list-style:disc;
	}
	.carre{
		list-style:square;
	}
	.decim{
		list-style:decimal;
	}
	.capromain{
		list-style:upper-roman;
	}
</style>

Rendu à l'affichage :

  • Synopsis
  • Personnages
    • Pim
    • Pam
    • Poum
  • Livret
    1. Acte I
      1. Scène 1
      2. Scène 2
      3. Scène 3
    2. Acte II
      1. Scène 1
      2. Scène 2
      3. Scène 3
      4. Scène 4
    3. Acte II
      1. Scène 1
      2. Scène 2
      3. Scène 3
  • Historique
Haut de page