Un autre nom de liste. Listes numérotées. Types de marqueurs de liste à puces

Les listes à puces vous permettent de diviser un texte volumineux en blocs séparés, 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

associé aux fonctionnalités suivantes :
• à l'endroit où il se rencontre
  , le navigateur ajoute automatiquement un saut de ligne ;
  • la liste comporte des retraits en haut et en bas ;
  • les marqueurs sont affichés par défaut sous la forme d'un cercle plein ;
  • chaque élément de la liste est décalé vers la droite par rapport au corps du texte.

  La figure 1 montre le résultat de l'exemple, illustrant les caractéristiques ci-dessus de la liste à puces.

  Riz. 1. Vue de la liste à puces

  Type de marqueur

  Les marqueurs peuvent prendre l'une des trois formes suivantes : cercle plein (par défaut), cercle vide et carré. Pour sélectionner le type de marqueur, utilisez la propriété list-style-type ou le list-style générique (exemple 1). Les valeurs suivantes s'appliquent :

  • disque - marqueurs sous la forme d'un cercle plein;
  • cercle - marqueurs sous la forme d'un cercle non rempli;
  • carré - marqueurs carrés.

  Exemple 1 - Modifier l'apparence du marqueur

  • sépulki
  • Sépulcaires
  • Sépulénie

  L'exemple montre comment créer une liste à puces qui utilise 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 n'avons que trois types de marqueurs à notre disposition. Il existe de nombreux caractères spéciaux qui peuvent agir avec succès comme une icône de marqueur. "Vissez-les" directement sur

• ne fonctionnera pas, vous devez donc contourner. Pour cela, masquez les marqueurs de liste avec propriétés de style liste avec une valeur de none et dans le texte avant le contenu
• Ajoutez votre propre caractère en utilisant le pseudo-élément ::before. Dans l'exemple 2, un triangle agit comme un tel marqueur.

  Exemple 2 : Utiliser :: avant

  • sépulki
  • Sépulcaires
  • Sépulénie

  Résultat cet exemple illustré à 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 est décalée vers la droite. Pour se débarrasser de cette particularité, l'exemple ajoute la 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

  Le caractère n'a pas besoin d'être au format hexadécimal, il peut également être inséré directement dans le texte. L'essentiel est d'enregistrer le document en encodage UTF-8 et que l'éditeur le supporte. Les caractères eux-mêmes et leurs codes peuvent être extraits, par exemple, de LibreOffice Writer (Fig. 3).

  

  Riz. 3. Sélection de symboles dans LibreOffice

  Liste avec des puces dessinées

  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 : Utilisation d'une image comme marqueur

  • sépulki
  • Sépulcaires
  • Sépulénie

  Il est préférable de choisir une image de petite taille afin de ne pas transformer les éléments de la liste en légendes de figures. Sur la fig. 4 montre le résultat de l'exemple d'action pour utiliser de petites images comme marqueurs.

  

  Riz. 4. Dessiner comme marqueur

  List-style-image a quelques inconvénients :

  • le motif ne peut pas être déplacé vers le haut ou vers le bas ;
  • dans différents navigateurs la position de l'image par rapport au texte peut différer.

  Ces problèmes peuvent être évités en utilisant la propriété background, qui 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 ne s'affiche pas en haut de l'image, on le décale vers la droite grâce à padding-left (exemple 4).

  Exemple 4 Utilisation de l'arrière-plan

  Ul ( margin-left : -1em ; ) li ( list-style : aucun ; arrière-plan : url(images/bullet.png) no-repeat 0 2px ; padding-left : 20px ; )

  Position du texte et des puces

  Il existe deux manières de placer un marqueur par rapport au texte : le marqueur est placé à l'extérieur de la bordure des éléments de la liste ou entouré de texte (Fig. 5).

  à l'intérieur	à l'extérieur

  Riz. 5. Placer des marqueurs par rapport au texte

  La propriété list-style-position est utilisée pour contrôler la position des marqueurs. 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. Modifier la position des marqueurs

  • Avant de commencer les travaux, vérifiez la disponibilité des équipements inclus dans le kit 3BM.
  • En l'absence d'un ou plusieurs périphériques vous devez contacter immédiatement le personnel technique du VC.
  • Après avoir inspecté visuellement votre zone de travail, vous pouvez mettre le 3BM sous tension avec précaution.

  Le résultat de cet exemple est montré sur la Fig. 6.

  

  L'un des types de listes implémentées en HTML est la liste à puces. Sinon, les listes de ce type sont appelées non ordonnées ou non ordonnées. Le nom de famille est souvent utilisé comme traduction formelle du nom de balise correspondant.

  , à l'aide desquelles des listes de ce type sont organisées dans des documents HTML (UL - Unordered List, liste non ordonnée).

  Dans une liste à puces, pour mettre en évidence ses éléments, utilisez Symboles spéciaux, appelés marqueurs de liste (souvent appelés puces, qui est l'expression formelle du terme anglais puce). 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 de 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 des sauts 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

  • (LI - Élément de liste, élément de liste). Étiquette
  • n'a pas besoin d'une balise fermante 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 ci-dessus sont suffisantes pour construire une liste à puces élémentaire. Voici un exemple de document HTML utilisant une liste à puces, dont le rendu du navigateur est illustré à la Fig. 2.1.

    Signes du zodiaque:

    • Bélier

    • veau

    • Jumeaux

    • Vierge

    • Balance

    • Scorpion

    • Sagittaire

    • Capricorne

    • Verseau

    • Des poissons

    Riz. 2.1. Affichage du navigateur d'une 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 joue le rôle de son en-tête.

    Noter

    Dans certains manuels sur le langage HTML, il y a une indication que la 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 des navigateurs courants et ne fait pas partie de la spécification HTML. Ainsi, son utilisation perd tout son sens, bien qu'elle ne conduise à aucune erreur.

    Dans la balise

    deux paramètres peuvent être spécifiés : COMPACT et TYPE.

    Le paramètre COMPACT est écrit sans valeur et est utilisé pour indiquer au navigateur que la liste donnée doit être affichée sous forme compacte. Par exemple, la police ou l'espacement entre les lignes d'une liste peuvent être réduits, etc.

    Noter

    Actuellement, la présence du paramètre COMPACT dans la balise

    n'affecte pas l'affichage des listes par les principaux navigateurs. Par conséquent, la candidature paramètre donné vide de sens, d'autant plus que son utilisation est obsolète 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 marqueurs de liste. L'aspect exact du 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 vides ; TYPE = carré - les marqueurs sont affichés sous forme de carrés pleins. Exemple d'enregistrement :

    .

    La valeur par défaut est TYPE = disque. Pour les listes à puces imbriquées, la valeur par défaut est disque au premier niveau, cercle au deuxième niveau et carré au troisième niveau. C'est exactement ce qui se fait dans dernières versions les navigateurs Netscape et Internet Explorer. Notez 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é comme 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 de liste individuels. Pour ce faire, le paramètre TYPE avec la valeur correspondante est autorisé à être spécifié dans la balise d'élément de liste

    • .

      Exemple d'enregistrement :

    • .

      Noter

      Les navigateurs interprètent différemment l'indication du type de marqueur 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 pour cet élément uniquement.

      Lister les marqueurs graphiques

      Vous pouvez utiliser des images graphiques comme marqueurs de liste, ce qui est largement utilisé pour créer des documents HTML attrayants et magnifiquement conçus. En fait, cette possibilité n'est pas fournie directement. Langage HTML, mais est implémenté quelque peu artificiellement. Cela ne signifie pas qu'il n'est pas recommandé ou répréhensible de le faire, mais seulement qu'aucune construction spéciale du langage HTML ne sera utilisée ici.

      Pour comprendre l'idée, vous devez comprendre comment les listes sont implémentées dans les pages HTML. Il s'avère que la balise list

      (ainsi que les balises de liste d'autres types, décrites ci-dessous) effectue la seule tâche - elle indique au navigateur que toutes les informations situées après cette balise doivent être affichées avec un décalage vers la droite (retrait) d'une certaine quantité. Mots clés
      • pointant vers éléments individuels list, fournit la sortie des marqueurs d'éléments de liste standard.

        Si nous devons construire une liste avec des marqueurs graphiques, nous pouvons nous passer de balises du tout

      • . Il suffira d'insérer le désiré avant chaque élément de la liste image graphique. La seule tâche à résoudre dans ce cas est de séparer les éléments de la liste les uns des autres. Vous pouvez utiliser des balises de paragraphe pour cela.

        Ou saut de ligne forcé
        . Un exemple de mise en œuvre d'une liste avec des marqueurs graphiques dont l'affichage est illustré à la fig. 2.2 est illustré ci-dessous :

        qui ne sera transmis qu'une seule fois. La taille d'un fichier contenant une petite image est également extrêmement petite.

        Noter

        Les méthodes de création de listes avec des marqueurs 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 zéro en tête pour les chiffres inférieurs à dix (01, 02, 03, ..., 10) ;
        • lettres latines majuscules (A, B, C, ...);
        • lettres latines minuscules (a, b, c, ...);
        • Chiffres romains en majuscules (I, II, III, ...);
        • Chiffres romains en minuscules (i, ii, iii, ...);
        • numérotation arménienne ;
        • Numérotation géorgienne.

        D'un point de vue pratique, les principes d'affichage des éléments d'une liste à puces s'appliquent de manière similaire à une liste numérotée. Mais étant donné qu'il s'agit d'une énumération, il y a certaines caractéristiques, qui seront discutées plus loin.

        Numérotation des listes

        Il est permis de commencer la liste par n'importe quel nombre ; l'attribut start de l'élément est utilisé à cette fin

        ou valeur sur l'élément
        1. . La valeur est n'importe quel entier positif. Peu importe le type de numérotation défini, même si des lettres latines sont utilisées comme liste. Si les deux attributs start et value sont appliqués à la liste, ce dernier a priorité et la numérotation commence à partir du nombre spécifié par value , comme illustré dans l'exemple 1.

           Exemple 1 - Modifier la numérotation de la liste

           4. Vous devez prendre soin de votre lieu de travail.
           5. Réglez l'éclairage de la pièce de manière à ce que la source lumineuse se trouve sur le côté ou derrière l'opérateur.
           10. Pour éviter les complications médicales, il est recommandé de choisir une chaise avec une assise souple.

           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 le chiffre V, et le dernier élément, dans le désordre, se voit attribuer le chiffre X (Fig. 1).

           Riz. 1. Chiffres romains dans la liste

           Écrire des nombres

           Par défaut, une liste numérotée a une certaine forme : il y a d'abord un nombre, puis un point, et après cela, 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 autre façon de numéroter les listes. A savoir, pour remplacer le point par une parenthèse fermante, comme le montre la Fig. 2 ou quelque chose de similaire.

           

           Riz. 2. Type de liste numérotée avec parenthèse

           Les styles vous permettent de modifier la numérotation des listes à l'aide des propriétés de contenu et de contre-incrémentation. Tout d'abord, le sélecteur ol doit être réglé sur counter-reset : item , ceci 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 de compteur unique, nous le choisissons nous-mêmes. Ensuite, vous devez masquer les marqueurs d'origine via la propriété de style list-style-type avec une valeur de none .

           La propriété content fonctionne généralement en conjonction avec les pseudo-éléments ::after et ::before. Ainsi, la construction li::before indique qu'avant chaque élément de la liste, du contenu doit être ajouté (exemple 2).

           Exemple 2. Création de votre propre numérotation

           Li::before (contenu : compteur(élément) ") " ; /* Ajouter des parenthèses aux nombres */ counter-increment: item; /* Définir le nom du compteur */ )

           La propriété content avec la valeur counter(item) génère un nombre ; en ajoutant une parenthèse, comme le montre cet exemple, on obtient le type de numérotation souhaité. 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

           1. Première
           2. Deuxième
           3. Troisième
           4. Quatrième

           De la manière ci-dessus, vous pouvez créer n'importe quel type de liste numérotée, par exemple, prendre un nombre entre crochets, dans ce cas, une seule ligne changera dans les styles.

           Contenu : "[" compteur(item) "] " ;

           Liste avec 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. Comme 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

           1. Un
           2. Deux
           3. Trois

           Les lettres sont ajoutées à l'aide du pseudo-élément ::before et de la propriété content . Comme chaque ligne doit avoir sa propre lettre, nous utiliserons la pseudo-classe :nth-child(1), le numéro de la lettre est écrit entre parenthèses. La première lettre, bien sûr, est A, la seconde est B, la troisième est C, etc.. Cet ensemble entier 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)::before (contenu : "b)" ; ) .cyrilic li:nth-child(3)::before (contenu : "à)" ; )

           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, par exemple elle peut contenir majuscules avec un point, avec une ou deux parenthèses, ou seulement des lettres. Contrairement à la numérotation standard, nous sommes libres de faire ce que nous voulons ici. 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

           1. Bortsch
           2. Escalopes de brochet
           3. Kulebyak
           4. Champignons à la crème sure
           5. Crêpes au caviar
           6. Kvas

           Le résultat de cet exemple est montré sur la Fig. 3.

           Les listes sont une partie importante du contenu car elles aident à organiser les informations. Le texte des listes est mieux perçu et plus facile à mémoriser.

           Le plus simple - avant chacun de ses éléments, il y a 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 n'avez besoin d'utiliser que deux balises :

           et
           • .
             est un conteneur contenant une liste dont les éléments sont donnés par la balise
             • .
               • Un rocher
               • Les ciseaux
               • Papier

               Par défaut, un cercle noir est utilisé comme marqueur de liste ( disque). En ajoutant à la balise

               attribut taper et lui donnant valeur correspondante, le marqueur peut être remplacé par un cercle ( cercle) ou carré noir ( carré).

               Il diffère de celui 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 consécutifs sont utilisés ici. Inutile de vous 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 hors service), le navigateur la recalculera et l'affichera correctement.

               Les balises sont utilisées pour créer des listes numérotées.

               et
               1. . Récipient
                  définit le début et la fin de la liste, tag
                  1. définit le début et la fin de son élément - tout, comme dans une liste à puces, uniquement
                     changé en
                     .
                     1. Un rocher
                     2. Les ciseaux
                     3. Papier

                     

                     Comme ce n'est pas toujours aussi simple avec des listes numérotées, pour la balise

                     créé les attributs suivants (note : ci-dessous n'est qu'une liste numérotée) :

                     1. taper. Cet attribut vous permet de numéroter la liste non seulement avec l'arabe, mais aussi 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. début. La numérotation ne doit pas toujours commencer à partir de un. Cet attribut vous permet de définir valeur initiale- numéro du premier élément de la liste. Dans celui-ci, vous pouvez 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é. S'il est défini, la numérotation sera inversée.

                     Afin de définir un nombre arbitraire pour un élément au milieu de la liste, vous devez utiliser dans la balise

                     1. attribut :

                     2. Le quarante-cinquième élément après le trente-huitième

                     En changeant le numéro d'un élément au milieu de la liste, vous changerez également la numérotation de tous les éléments qui le suivent - le rapport commencera à partir de la valeur dans l'attribut value. Par exemple, si vous avez attribué le numéro 35 à l'élément 18, les éléments qui le suivent n'auront pas les numéros 19, 20, 21, mais 36, 37, 38.

                     Liste des définitions

                     Type de liste pas aussi connu que mentionné ci-dessus. Contient des termes et leurs définitions. Créé à l'aide de balises :

                     - le conteneur contenant la liste.

                     - étiquette terminologique.

                     - étiquette de définition

                     La portée des listes de définitions est constituée de glossaires, d'ouvrages de référence, de tests, de dictionnaires et d'autres énumérations volumineuses du type "Terme - explication".

                     Voici un exemple de liste de définitions :

                     Descripteur

                     L'unité de base du langage de balisage, connue de tous sous le nom de "Tag".

                     Attribut

                     Une propriété de 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.

                     

                     Une liste composée de listes imbriquées les unes dans les autres. Peut inclure des listes différents types. La complexité de la création réside dans l'observation de l'imbrication correcte des balises, car il est facile de s'embrouiller dans une structure à plusieurs niveaux.

                     Voici un exemple de liste à plusieurs niveaux :

                     Les langages de programmation sont divisés en :

                     • De construction
                     1. Pascal
                     2. Obéron
                     1. Limbo
                     • Orienté objet
                     1. Java
                     • Fonctionnel
                     1. Zézayer
                     2. Python