Un autre nom pour les listes. Listes numérotées. Types de marqueurs de liste à puces
Les listes à puces vous permettent de diviser un texte volumineux en blocs distincts, chacun commençant par une puce - généralement un petit point. Cela attire l'attention du lecteur sur le texte et augmente sa lisibilité.
Avec élément
- Les fonctionnalités suivantes sont associées :
- à l'endroit où cela se produit
- , le navigateur ajoute automatiquement un saut de ligne ;
- la liste comporte des retraits en haut et en bas ;
- Par défaut, les marqueurs sont affichés sous forme de cercle plein ;
- Chaque élément de la liste est décalé vers la droite par rapport au texte principal.
- disque - marqueurs en forme de cercle rempli;
- cercle - marqueurs en forme de cercle ouvert;
- carré - marqueurs carrés.
- Sépulki
- Sépulcaire
- Sépulnation
- Cela ne fonctionnera pas, vous devrez donc contourner ce problème. Pour cela, masquez les marqueurs de liste à l'aide de la propriété list-style avec la valeur none et dans le texte avant le contenu
- ajoutez le vôtre propre caractère en utilisant le pseudo-élément ::before. Dans l'exemple 2, un tel marqueur est un triangle.
Exemple 2 : Utilisation de ::avant
Listes - Sépulki
- Sépulcaire
- Sépulnation
Résultat cet exemple montré sur la fig. 2. Étant donné que l'utilisation de la propriété list-style avec la valeur none ne supprime pas du tout les marqueurs, mais les masque uniquement, la liste apparaît décalée vers la droite. Pour supprimer cette fonctionnalité, l'exemple ajoute une propriété text-indent avec une valeur négative. Sa tâche est de déplacer le texte vers la gauche d'un caractère.
Riz. 2. Marqueurs arbitraires dans la liste
Il n'est pas nécessaire que le caractère soit au format hexadécimal ; il peut être inséré directement dans le texte. L'essentiel est d'enregistrer le document en encodage UTF-8 et que l'éditeur le prenne en charge. Les caractères eux-mêmes et leurs codes peuvent être extraits, par exemple, de LibreOffice Writer (Fig. 3).
Riz. 3. Sélection d'un symbole dans LibreOffice
Liste avec des marqueurs dessinés à la main
Les styles vous permettent de définir n'importe quelle image appropriée comme marqueur via la propriété list-style-image. La valeur est un chemin relatif ou absolu vers fichier graphique, comme le montre l'exemple 3.
Exemple 3 : Utiliser une image comme marqueur
Listes - Sépulki
- Sépulcaire
- Sépulnation
Le dessin est préférable de choisir petite taille pour éviter de transformer les éléments de la liste en légendes. En figue. La figure 4 montre le résultat d'un exemple d'utilisation de petites images comme marqueurs.
Riz. 4. Dessiner comme marqueur
L'utilisation de list-style-image présente certains inconvénients :
- le motif ne peut pas être déplacé vers le haut ou vers le bas ;
- V différents navigateurs La position de l'image par rapport au texte peut différer.
Ces défauts peuvent être évités en utilisant la propriété background, elle définit l'image d'arrière-plan. Pour chaque élément de la liste
- nous supprimons les marqueurs d'origine et définissons l'image d'arrière-plan sans répéter. Et pour que le texte n'apparaisse pas en haut de l'image, on le décale vers la droite en utilisant padding-left (exemple 4).
Exemple 4 : Utilisation de l'arrière-plan
Ul ( marge gauche : -1em ; ) li ( style de liste : aucun ; arrière-plan : url(images/bullet.png) no-repeat 0 2px ; padding-left : 20px ; )
Position du texte et de la puce
Il existe deux manières de placer un marqueur par rapport au texte : le marqueur est déplacé en dehors de la bordure des éléments de la liste ou enroulé autour du texte (Fig. 5).
à l'intérieur dehors Riz. 5. Placement des marqueurs par rapport au texte
Pour contrôler la position des marqueurs, utilisez la propriété list-style-position. Il a deux significations : à l'extérieur - les puces sont placées à l'extérieur du bloc de texte (c'est la valeur par défaut) et à l'intérieur - les puces font partie du bloc de texte et sont affichées dans l'élément de liste (exemple 5).
Exemple 5 : Changer la position des marqueurs
Listes - Avant de commencer, vérifiez que le matériel fourni avec le kit 3BM est bien inclus.
- En l'absence d'un ou plusieurs périphériques Vous devez immédiatement contacter le personnel technique des VT.
- Après avoir inspecté visuellement votre zone de travail, vous pouvez soigneusement mettre le 3BM sous tension.
Le résultat de cet exemple est présenté sur la Fig. 6.
L'un des types de listes implémentés en HTML est la liste à puces. Sinon, les listes de ce type sont dites non numérotées ou non ordonnées. Le nom de famille est souvent utilisé comme traduction formelle du nom de la balise correspondante.
- , à l'aide duquel des listes de ce type sont organisées en documents HTML (UL - Unordered List, liste non ordonnée).
- (LI - Élément de liste, élément de liste). Étiqueter
- ne nécessite pas de balise de fermeture correspondante, bien que sa présence ne soit en principe pas interdite. Les navigateurs commencent généralement chaque nouvel élément de liste sur une nouvelle ligne lors de l'affichage d'un document.
Les informations fournies sont suffisantes pour construire une liste à puces de base. Donnons un exemple de document HTML utilisant une liste à puces, dont l'affichage par le navigateur est illustré à la Fig. 2.1.
Exemple de liste à puces Signes du zodiaque:
- Bélier
- Taureau
- Jumeaux
- Vierge
- Balance
- Scorpion
- Sagittaire
- Capricorne
- Verseau
- Poisson
Riz. 2.1. Affichage du navigateur de la liste à puces
Notez qu'en plus des éléments de liste marqués de la balise
- , d'autres éléments HTML peuvent être présents. Dans l'exemple ci-dessus, l'un de ces éléments est du texte brut, qui n'est pas un élément de liste, mais fait office de titre.
Note
Certains manuels sur le langage HTML indiquent qu'une balise conteneur doit être utilisée pour définir le titre de la liste.
(LH - En-tête de liste, en-tête de liste). Cette balise n'est actuellement reconnue par aucun navigateur courant et ne fait pas partie de la spécification HTML. Ainsi, son utilisation devient inutile, même si elle n’entraînera aucune erreur. Dans la balise
- deux paramètres peuvent être spécifiés : COMPACT et TYPE.
- .
Exemple d'entrée :
- .
Note
Les navigateurs interprètent différemment la spécification du type de puce pour un élément de liste individuel. Le navigateur Netscape modifie l'apparence du marqueur pour celui-ci et tous les suivants jusqu'à ce que la prochaine redéfinition de l'apparence du marqueur soit rencontrée. Navigateur Internet L'Explorateur modifie l'apparence du marqueur uniquement pour cet élément.
Marqueurs de liste graphiques
Vous pouvez utiliser des images graphiques comme puces de liste, ce qui est largement utilisé pour créer des documents HTML attrayants et bien conçus. En fait, une telle opportunité n'est pas offerte directement Langage HTML, mais est implémenté de manière quelque peu artificielle. Cela ne signifie pas que cela n'est pas recommandé ou répréhensible, mais seulement qu'aucune construction spéciale du langage HTML ne sera utilisée ici.
Pour comprendre l'idée, vous devez comprendre le mécanisme d'implémentation des listes sur les pages HTML. Il s'avère que la balise list
- (comme d'ailleurs les balises de liste d'autres types, discutées ci-dessous) effectue une seule tâche - elle indique au navigateur que toutes les informations situées après cette balise doivent être affichées décalées vers la droite (en retrait) d'un certain montant. Mots clés
- , indiquant éléments individuels list, fournit la sortie des marqueurs d’éléments de liste standard.
Si nous devons créer une liste avec des marqueurs graphiques, nous pouvons alors nous passer complètement de balises
- . Il suffira d'insérer ce que vous voulez avant chaque élément de la liste image graphique. Le seul problème à résoudre est de séparer les éléments de la liste les uns des autres. Vous pouvez utiliser des balises de paragraphe pour cela
Ou forcer un saut de ligne
. Un exemple de mise en œuvre d'une liste avec des marqueurs graphiques dont l'affichage est illustré à la Fig. 2.2 est présenté ci-dessous :qui ne sera transmis qu'une seule fois. La taille des fichiers d'une petite image est également extrêmement petite.
Note
Les méthodes de création de listes avec des puces graphiques sont abordées tour à tour au chapitre 8.
Les listes numérotées sont une collection d'éléments avec leur Numéros de série. Le type et le type de numérotation dépendent des paramètres de l'élément
- , qui est utilisé pour créer la liste. Les valeurs suivantes peuvent servir d'éléments de numérotation :
- Chiffres arabes (1, 2, 3, ...) ;
- Chiffres arabes avec un zéro non significatif pour les nombres inférieurs à dix (01, 02, 03, ...,10) ;
- lettres majuscules latines (A, B, C, ...) ;
- lettres latines minuscules (a, b, c, ...) ;
- chiffres romains majuscules (I, II, III, ...) ;
- chiffres romains minuscules (i, ii, iii, ...) ;
- Numérotation arménienne ;
- Numérotation géorgienne.
- . La valeur est n’importe quel entier positif. Le type de numérotation défini n'a pas d'importance, même si des lettres latines sont utilisées comme liste. Si les attributs start et value sont appliqués à une liste en même temps, alors ce dernier est prioritaire et la numérotation est affichée à partir du nombre spécifié par value , comme le montre l'exemple 1.
Exemple 1 : Modification de la numérotation de la liste
Listes - Vous devez prendre bien soin de votre lieu de travail.
- Réglez l'éclairage de la pièce de manière à ce que la source lumineuse soit située sur le côté ou derrière l'opérateur.
- Pour éviter les complications médicales, il est recommandé de choisir une chaise avec une assise moelleuse.
Le premier élément de la liste dans cet exemple commencera par le chiffre romain IV, puisque l'attribut start="4" est spécifié, puis vient le numéro V, et le dernier élément sort dans le désordre et se voit attribuer le numéro X (Figure 1).
Riz. 1. Chiffres romains dans la liste
Écrire des chiffres
Par défaut, une liste numérotée a une certaine apparence : il y a d'abord un chiffre, puis un point, et ensuite le texte est affiché séparé par un espace. Cette forme d'écriture est visuelle et pratique, mais certains développeurs préfèrent voir une manière différente de concevoir la numérotation des listes. À savoir, de sorte qu'au lieu d'un point, il y ait un crochet fermant, comme le montre la Fig. 2 ou quelque chose de similaire.
Riz. 2. Vue de liste numérotée avec parenthèse
Les styles vous permettent de modifier le type de numérotation des listes à l'aide des propriétés de contenu et de contre-incrément. Tout d'abord, le sélecteur ol doit être réglé sur counter-reset : item , cela est nécessaire pour que la numérotation dans chaque nouvelle liste recommence. Sinon, la numérotation continuera et au lieu de 1,2,3 vous verrez 5,6,7. La valeur de l'article est un identifiant unique pour le compteur, nous le choisissons nous-mêmes. Ensuite, vous devez masquer les marqueurs d'origine via la propriété de style list-style-type avec la valeur none .
La propriété content fonctionne généralement en conjonction avec les pseudo-éléments ::after et ::before. Ainsi, la construction li::before dit qu'un certain contenu doit être ajouté avant chaque élément de la liste (exemple 2).
Exemple 2. Création de votre propre numérotation
Li::avant ( contenu : compteur(élément) ") "; /* Ajoute une parenthèse aux nombres */ counter-increment: item; /* Définit le nom du compteur */ )
La propriété content avec la valeur counter(item) affiche un nombre ; En ajoutant une parenthèse, comme le montre cet exemple, nous obtenons le type de numérotation requis. un contre-incrément est nécessaire pour augmenter le numéro de liste de un. Notez que le même identifiant, nommé item , est utilisé partout. Le code final est présenté dans l'exemple 3.
Exemple 3 : Modification de l'affichage de la liste
Listes - D'abord
- Deuxième
- Troisième
- Quatrième
En utilisant la méthode ci-dessus, vous pouvez créer n'importe quel type de liste numérotée, par exemple prendre un nombre dans crochets, une seule ligne dans les styles changera.
Contenu : "[" compteur (élément) "] " ;
Liste avec des lettres russes
Il existe une liste numérotée avec des lettres latines, mais il n'y a pas de lettres russes pour la liste. Ils peuvent être ajoutés artificiellement en utilisant la technique ci-dessus. Puisque la numérotation se fait par styles, la liste elle-même reste originale, seule la classe sélectionnée y est ajoutée, appelons-la cyrilique (exemple 4).
Exemple 4 : Code pour créer une liste
- Un
- Deux
- Trois
L'ajout de lettres se fait à l'aide du pseudo-élément ::before et de la propriété content. Puisque chaque ligne doit avoir sa propre lettre, nous utiliserons la pseudo-classe :nth-child(1) , avec le numéro de la lettre écrit entre parenthèses. La première lettre est bien entendu A, la deuxième est B, la troisième est C, etc. Cet ensemble complet est ajouté au sélecteur li comme suit (exemple 5).
Exemple 5 : Utilisation de la pseudo-classe :nth-child
Cyrilique li:nth-child(1)::before ( contenu : "a)"; ) .cyrilic li:nth-child(2)::avant ( contenu : "b)"; ) .cyrilic li:nth-child(3)::before ( contenu : "at)"; )
Dans cet exemple, chaque lettre est suivie d'une parenthèse, toutes les lettres sont en minuscules. Vous pouvez définir votre propre type de numérotation de liste, elle peut par exemple contenir lettres majuscules avec un point, avec une ou deux parenthèses, ou juste des lettres. Contrairement à la numérotation standard, nous sommes libres de faire ici ce que nous voulons. Une liste de dix lettres devrait suffire pour presque toutes les situations, mais si cela s'avère soudainement insuffisant, rien ne nous empêche d'élargir notre liste pour inclure au moins toutes les lettres de l'alphabet russe.
Nous ajustons enfin l'alignement et la position des lettres, spécifions éventuellement la taille de la police, la couleur et d'autres paramètres (exemple 6).
Exemple 6. Liste avec des lettres russes
Liste - Bortsch
- Escalopes de brochet
- Kulebyaka
- Champignons à la crème sure
- Crêpes au caviar
- Kvas
Le résultat de cet exemple est présenté sur la Fig. 3.
Les listes constituent une partie importante du contenu car elles aident à organiser les informations. Le texte des listes est mieux perçu et plus facile à retenir.
Le plus simple est que devant chacun de ses éléments se trouve un marqueur - un cercle, un carré ou un cercle. L’ordre des éléments dans une liste à puces n’a pas d’importance.
Pour le créer, vous ne devez utiliser que deux balises :
Liste à puces - Pierre
- Ciseaux
- Papier
Par défaut, le marqueur de liste est un cercle noir ( disque). En ajoutant à la balise
Il diffère de marqué en ce que l'ordre des éléments qu'il contient est important et, par conséquent, au lieu d'un marqueur, des chiffres ou des lettres séquentiels sont utilisés ici. Il n'y a pas lieu de se soucier de l'ordre dans la liste : le navigateur se charge de cette tâche. Si vous modifiez la liste (supprimez ou ajoutez un élément dans le désordre), le navigateur la recalculera et l'affichera correctement.
Les balises sont utilisées pour créer des listes numérotées
Liste numérotée - Pierre
- Ciseaux
- Papier
Puisque les choses ne sont pas toujours aussi simples avec les listes numérotées, pour le tag
1. taper. Cet attribut vous permet de numéroter la liste non seulement avec des chiffres arabes, mais également avec des chiffres romains ou des lettres latines de casse différente. taper prend en charge les valeurs 1 (par défaut), a, A, i, I (essayez de les expérimenter vous-même).
2. commencer. La numérotation ne doit pas toujours commencer par un. Cet attribut vous permet de définir valeur initiale- numéro du premier élément de la liste. Vous pouvez y spécifier que le rapport commence, par exemple, par le chiffre 100 ou la lettre K.
3. renversé. Si la liste ne doit pas aller de 1 à 10, mais de 10 à 1, alors cet attribut doit être utilisé. Si cela est précisé, la numérotation sera inversée.
Afin d'attribuer un numéro arbitraire à un élément au milieu de la liste, vous devez utiliser dans la balise
- Le quarante-cinquième élément après le trente-huitième
- - balise de terme.
- - balise de définition
- Descripteur
- L'unité de base du langage de balisage, connue de tous sous le nom de « Tag ».
- Attribut
- Une propriété d'une balise qui lui donne caractéristiques supplémentaires Mise en forme du texte.
- Étiquette
- Une seule balise qui n’a pas besoin d’être fermée.
- De construction
- Pascal
- Obéron
- Limbo
- Orienté objet
- Java
- Fonctionnel
- Zézayer
- Python
D'un point de vue pratique, les principes d'affichage des éléments dans une liste à puces peuvent être appliqués de la même manière qu'une liste numérotée. Mais étant donné qu’il s’agit d’une énumération, certaines caractéristiques seront discutées plus en détail.
Numérotation des listes
Il est permis de démarrer la liste à partir de n'importe quel numéro ; l'attribut start de l'élément est utilisé à cet effet
- ou valeur de l'élément
En modifiant le numéro d'un élément au milieu de la liste, vous modifierez la numérotation de tous les éléments qui le suivent - le rapport commencera par la valeur dans l'attribut value. Par exemple, si vous avez attribué à l'élément 18 le numéro 35, alors les éléments qui le suivent porteront les numéros non pas 19, 20, 21, mais 36, 37, 38.
Liste des définitions
Un type de liste qui n’est pas aussi connu que ceux évoqués ci-dessus. Se compose de termes et de leurs définitions. Créé à l'aide de balises :
Le champ d'application des listes de définitions concerne les glossaires, les ouvrages de référence, les tests, les dictionnaires et autres listes volumineuses de type « Terme - explication ».
Voici un exemple de liste de définitions :
Liste des définitions 
Une liste composée de listes imbriquées les unes dans les autres. Peut inclure des listes différents types. La difficulté de création réside dans le maintien de l'imbrication correcte des balises, car il est facile de se perdre dans une structure multi-niveaux.
Voici un exemple de liste à plusieurs niveaux :
Liste à plusieurs niveaux Les langages de programmation sont divisés en :
- , indiquant éléments individuels list, fournit la sortie des marqueurs d’éléments de liste standard.
Le paramètre COMPACT est écrit sans valeur et permet d'indiquer au navigateur que cette liste doit être présenté sous une forme compacte. Par exemple, la police ou la distance entre les lignes de liste, etc. peuvent être réduites.
Note
Actuellement, la présence du paramètre COMPACT dans la balise
- n'affecte en rien l'affichage des listes dans les principaux navigateurs. C'est pourquoi la demande ce paramètre n'a aucun sens, d'autant plus que son utilisation n'est pas recommandée par la spécification HTML 4.0.
Le paramètre TYPE peut prendre les valeurs suivantes : disque, cercle et carré. Ce paramètre permet de forcer l'apparition des puces de liste. Le type exact de marqueur dépendra du navigateur que vous utilisez. Les options d'affichage typiques sont les suivantes :
TYPE = disque - les marqueurs sont affichés sous forme de cercles pleins ; TYPE = cercle - les marqueurs sont affichés sous forme de cercles ouverts ; TYPE = carré - les marqueurs sont affichés sous forme de carrés remplis. Exemple d'entrée :
- .
La valeur par défaut est TYPE = disque. Pour les listes à puces imbriquées, la valeur par défaut est le disque au premier niveau, le cercle au deuxième niveau, le carré au troisième niveau et au-delà. C'est exactement ce qui se fait dans dernières versions Navigateurs Netscape et Internet Explorer. Veuillez noter que d'autres navigateurs peuvent afficher les marqueurs différemment. Par exemple, dans la spécification HTML 4.0, le type de marqueur affiché lorsque TYPE = carré est spécifié sous la forme d'un contour carré.
Le paramètre TYPE avec les mêmes valeurs peut être utilisé pour spécifier le type de marqueurs pour les éléments individuels de la liste. Pour ce faire, le paramètre TYPE avec la valeur correspondante peut être spécifié dans la balise de l'élément de liste
- .
Une liste à puces utilise Symboles spéciaux, appelés marqueurs de liste (souvent appelés puces, qui est la prononciation formelle du terme anglais bullet). L'apparence des marqueurs de liste est déterminée par le navigateur, et lors de la création de listes imbriquées, les navigateurs diversifient automatiquement l'apparence des marqueurs à différents niveaux d'imbrication.
Mots clés
- Et
Pour créer une liste à puces, vous devez utiliser une balise conteneur, à l'intérieur de laquelle se trouvent tous les éléments de la liste. Les balises de liste d'ouverture et de fermeture fournissent un saut de ligne avant et après la liste, séparant ainsi la liste du contenu principal du document, il n'est donc pas nécessaire d'utiliser des balises de paragraphe ici.
.Chaque élément de la liste doit commencer par une balise
La figure 1 montre le résultat de l'exemple, illustrant les caractéristiques ci-dessus de la liste à puces.
Riz. 1. Vue liste à puces
Type de marqueur
Les marqueurs peuvent prendre l’une des trois formes suivantes : cercle plein (par défaut), cercle ouvert et carré. Pour sélectionner le type de marqueur, utilisez propriété de type style-liste ou style de liste universelle (exemple 1). Les valeurs suivantes s'appliquent :
Exemple 1 : Modification de l'apparence d'un marqueur
L'exemple montre comment créer une liste à puces en utilisant un petit carré de couleur unie comme icône de puce. Bien que le nombre de valeurs soit limité à trois, cela ne signifie pas que nous disposons de seulement trois types de marqueurs. Il existe de nombreux caractères spéciaux qui peuvent servir avec succès d’icône de marqueur. Vissez-les directement à