Chapitre 1
Les listes
Il existe 3 types de listes :
- Les listes non ordonnées
- Les listes ordonnées
- Les listes de définitions
Liste non ordonnée
C'est la liste à puce la plus fréquemment employée. L'énumération des item est précédée d' un point (style par défaut) et que j'ai utilisé dans le paragraphe précédent. Il se rédige de cette manière :
<ul>
<li> premier item </li>
<li> deuxième item </li>
<li> troisième item </li>
</ul>
Avec le résultat suivant:
- premier document
- deuxième document
- troisième document
Les feuilles de style permettent de ersonnaliser la puce (en rond, en carré, une image) grâce à la propriété list-style + la valeur (circle, disc, square).
Liste ordonnée
Cette liste à propose une énumération hiérarchisée (1, 2, 3,...A, B, C,..). Voici la manière de la rédiger:
<ol>
<li> article 1 </li>
<li> article 2 </li>
<li> article 3 </li>
</ol>
Avec le résultat suivant:
- article 1
- article 2
- article 3
Dans les CSS, on précise si l'énumération est arabic (1, 2, 3, ...), upper-alpha (A, B, C, ...), lower-alpha (a, b, c, ...), upper-roman (I, II, III, IV,...), lower-roman (i, ii, iii, iv, ...)
Listes de définitions
Cette liste est employée dans les définitions :
<dl>
<dt> html </dt>
<dd>C'est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom.</dd>
<dt> CSS </dd>
<dd> (Cascading Style Sheets) : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). </dd>
</dl>
Avec le résultat suivant:
- html
- C'est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom.
- CSS
- (Cascading Style Sheets) : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Un peu de CSS2
Avec le pseudo élément :before
On ajoute des liste à puce avec des tirets :
li {list-style-type: none;} li:before { content: "- "; }
On peut insérer certains caractères complexes grâce à l'UTF-8 : (résultat sous le code) :
li {list-style-type: none;} li:before { content:"♥ "; color:red; } }
- amour
- amour
- amour