Listes CSS— un ensemble de propriétés responsables de la conception des listes. L'utilisation de listes HTML est très courante lors de la création de barres de navigation de sites Web. Les éléments de liste représentent une collection d’éléments de bloc.

En utilisant les propriétés CSS standard, vous pouvez changement apparence marqueur de liste, ajouter une image pour le marqueur, et changer l'emplacement du marqueur. La hauteur du bloc marqueur peut être définie avec la propriété line-height.

Concevoir des listes à l'aide de styles CSS

1. Type de marqueur de liste list-style-type

La propriété change le type de marqueur ou supprime le marqueur pour les listes à puces et numérotées. Hérité.

Syntaxe

Ul (type de style de liste : aucun ;) ul (type de style de liste : carré ;) ol (type de style de liste : aucun ;) ol (type de style de liste : alpha inférieur ;)
Riz. 1. Exemple de conception de listes à puces et numérotées

2. Images pour les éléments de la liste list-style-image

Vous pouvez utiliser des images et des remplissages dégradés comme marqueurs d’éléments de liste. Hérité.

Syntaxe

Ul (liste-style-image : url("images/romb.png");) ul (liste-style-image : linéaire-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Riz. 2. Concevez une liste à puces à l'aide d'une image Riz. 3. Concevez une liste à puces en utilisant un dégradé

3. Position de style liste

Cette propriété offre la possibilité de placer le marqueur à l'extérieur ou à l'intérieur du contenu de l'élément de liste. Hérité.

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.

  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 jetons peuvent accepter l'un des trois types: cercle plein (par défaut), cercle ouvert et carré. Pour sélectionner le type de marqueur, utilisez la propriété list-style-type ou la propriété universelle list-style (exemple 1). Les valeurs suivantes s'appliquent :

  • disque - marqueurs en forme de cercle rempli;
  • cercle - marqueurs en forme de cercle ouvert;
  • carré - marqueurs carrés.

  Exemple 1 : Modification de l'apparence d'un marqueur

  • Sépulki
  • Sépulcaire
  • Sépulnation
  
  
  

  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 à

• 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
• Nous ajoutons notre propre personnage en utilisant le pseudo-élément ::before. Dans l'exemple 2, un tel marqueur est un triangle.

  Exemple 2 : Utilisation de ::avant

  • 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 tirés, par exemple, de Écrivain LibreOffice(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 relative ou chemin absoluÀ fichier graphique, comme le montre l'exemple 3.

  Exemple 3 : Utiliser une image comme marqueur

  • Sépulki
  • Sépulcaire
  • Sépulnation
  
  
  

  Il est préférable de choisir un petit dessin afin de ne pas 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 ;
  • La position de l'image par rapport au texte peut différer selon les navigateurs.

  Ces défauts peuvent être évités en utilisant la propriété background, elle définit image de fond. Pour chaque élément de la liste

• nous supprimons les marqueurs d'origine et définissons image de fond pas de répétition. 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 marqueurs sont placés à l'extérieur 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

  • 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.

  

  - 4,5 sur 5 basé sur 2 votes

  Souvent certaines informations sur le site doivent être présentés sous forme de listes.

  Les listes vous permettent d'organiser et de systématiser diverses informations et le présenter au visiteur de manière pratique.

  Les listes HTML se déclinent en trois variétés : les listes à puces, les listes numérotées et les listes de définitions. Voyons comment les créer dans l'ordre.

  Liste à puces.

  Ce type de liste est le plus souvent utilisé. La liste à puces en HTML est créée à l'aide de balises

  • . Dans ce cas, un marqueur est ajouté en face de chaque élément de la liste ; par défaut, il s'agit d'un marqueur en forme de cercle. A l'aide de balises, un conteneur est créé, à l'intérieur duquel se trouvent les éléments de la liste : .

    Le code de la liste à puces ressemblera à ceci :

    • Cette option est
    • Cette option
    • Option comme celle-ci

    Vous pouvez essayer de créer une page HTML en utilisant ce code et vous obtiendrez la liste suivante :

    

    Comme vous pouvez le voir, chaque élément de la liste est positionné avec nouvelle ligne, tandis que certains retraits sont créés à gauche, en haut et en bas. Chaque élément de la liste commence par un marqueur ; le marqueur peut être un cercle rempli (utilisé par défaut), un cercle ou un carré. À l'étiquette

    Il existe un attribut type, qui est utilisé pour définir le style du marqueur. Cet attribut a les significations suivantes :
    • disque - cercle;
    • cercle - cercle;
    • carré - carré.

    La valeur du disque est la valeur par défaut.

    Un exemple de création d'une liste à puces avec des marqueurs de cercle :

    • Cette option est
    • Cette option
    • Option comme celle-ci

    En conséquence, la liste prendra la forme suivante :

    

    Création d'une liste à puces avec des marqueurs carrés :

    • Cette option est
    • Cette option
    • Option comme celle-ci

    La liste ressemblera à :

    

    L'attribut type peut être appliqué à plus qu'une simple balise

    , mais aussi au tag
    • . De cette façon, vous pouvez créer une liste avec une variété de puces.
      • Cette option est
      • Cette option
      • Option comme celle-ci

      Le résultat sera le suivant :

      

      Listes numérotées.

      Les listes numérotées en HTML sont des listes dans lesquelles chaque élément possède un numéro de série ; les listes numérotées sont créées à l'aide d'une balise.

      et imbriqué dans ses balises

      1. 1. Première ligne
         2. Deuxième ligne
         3. Troisième ligne

         La liste ressemble à ceci :

         

         Par défaut, la numérotation est en chiffres arabes. Mais l'étiquette

         Il existe un attribut de type, à l'aide des valeurs dont vous pouvez effectuer une numérotation en majuscules (type="A") ou minuscules (type="a") en lettres latines, en chiffres romains en majuscules (type="I" ) et le registre inférieur (type="i" ).

         Vous trouverez ci-dessous des versions abrégées du code et le type de numérotation qui peut être dans un cas ou un autre.

         Vue liste :

         Vue liste :

         

         Numérotation en lettres minuscules de l'alphabet latin :

         Vue liste :

         

         Vue liste :

         

         Vue liste :

         

         Liste des définitions en HTML.

         Un type particulier de liste est celui des listes de définitions. Ils diffèrent en ce que chaque élément de liste se compose de deux éléments, un terme et un texte qui révèle sa signification. Ces listes sont créées à l'aide de balises

         . Étiqueter

         crée un conteneur pour la liste, balise

         définit le terme et la balise

         description ou définition d'un terme.

         Enregistré cette liste de la manière suivante :

         Terme 1

         Définition 1

         Terme 2

         Définition du terme 2

         Terme 3

         Définition 3

         Le résultat sera la liste suivante :

         

         Comme vous pouvez le constater, cela crée une indentation appropriée pour le terme et le texte de définition.

         Listes imbriquées ou multi-niveaux en HTML.

         Parfois, il est nécessaire d'imbriquer une autre liste dans un élément d'un certain type de liste. HTML vous permet d'intégrer de manière illimitée certaines listes dans des éléments d'autres listes.

         Par exemple, voici du code qui imbrique des listes numérotées dans des éléments de liste à puces.

         • Cette option est
           1. Première ligne
           2. Deuxième ligne
           3. Troisième ligne
         • Cette option
           1. Première ligne
           2. Deuxième ligne
           3. Troisième ligne
         • Option comme celle-ci
           1. Première ligne
           2. Deuxième ligne
           3. Troisième ligne

         AVEC en utilisant CSS Vous pouvez créer des listes à puces et numérotées, ou utiliser une image appropriée comme marqueur.

         Dans le tableau 1 répertorie les propriétés des éléments destinés à la création et à la modification de listes.

         Tableau 1. Propriétés CSS pour contrôler la vue de la liste

         Propriété	Signification	Description	Exemple
         type de style de liste	disque cercle carré décimal bas-romain roman supérieur alpha inférieur alpha supérieur aucun	Type de marqueur. Les trois premiers sont utilisés pour créer une liste à puces et les trois autres sont utilisés pour créer une liste numérotée.	LI (type-style-liste : cercle) LI (type de style de liste : alpha supérieur)
         image de style de liste	aucun URL	Définit n’importe quelle image comme symbole de marqueur.	LI (liste-style-image : url(check.gif))
         position-style-liste	dehors à l'intérieur	Sélection de la position du marqueur par rapport au bloc de lignes de texte.	LI (liste-style-position : à l'intérieur)
         style de liste		Une propriété universelle qui inclut simultanément toutes les propriétés ci-dessus.

         Depuis l'étiquette

         hérite des propriétés de style de la balise

         ou
         qui fait office de parent, vous pouvez styliser à la fois le sélecteur UL et le sélecteur LI. Ainsi, dans l'exemple 1, le sélecteur UL est utilisé et les paramètres de style sont définis pour celui-ci.

         Exemple 1 : Créer une liste à puces

         
         
         

         Le résultat de cet exemple est présenté sur la Fig. 1. Des marqueurs carrés sont utilisés ainsi que leur placement externe par rapport au texte.

         Riz. 1. Vue liste modifiée à l'aide de styles

         Pour installer votre propre image La propriété list-style-image est utilisée comme marqueur, comme le montre l'exemple 2.

         Exemple 2 : Utiliser des images comme marqueurs

         • Le titre doit être plus court que trois lignes.
         • Lorsque vous nommez les sections, utilisez des termes déjà établis, tels que livre d'or, chat, lien, page d'accueil et d'autres.
         • Avant d’utiliser un terme ou un mot technique, décidez s’il sera compris par le lecteur.
         
         
         

         Le résultat de cet exemple est présenté sur la Fig. 2. Une petite image est utilisée comme marqueur.

         

         Riz. 2. Les images comme marqueurs

         Quelques exemples de création de diverses listes sont donnés dans le tableau. 2.

         Tableau 2. Types de listes possibles

         Code HTML	Exemple
         	Tous les liens fonctionnent soutien différents navigateurs lisibilité du texte
         	Éléments à prendre en compte lors du test d'un site : Tous les liens fonctionnent prise en charge de différents navigateurs lisibilité du texte
         	Éléments à prendre en compte lors du test d'un site : Tous les liens fonctionnent prise en charge de différents navigateurs lisibilité du texte
         	Liste numérotée avec chiffres arabes : d'abord deuxième troisième
         	Liste numérotée avec chiffres romains minuscules : d'abord deuxième troisième
         	Liste numérotée avec chiffres romains majuscules : d'abord deuxième troisième
         	Liste numérotée avec lettres latines minuscules : d'abord deuxième troisième
         	Liste numérotée avec les majuscules de l'alphabet latin : d'abord deuxième troisième

         Listes HTML utilisé pour regrouper des informations liées. Il existe trois types de listes :

         liste à puces —

         - chaque élément de la liste
         • marqué d'un marqueur,
           liste numérotée —
           - chaque élément de la liste
           1. marqué d'un numéro
              liste de définitions- - se compose de paires de termes
              —
              définition.

              Chaque liste est un conteneur dans lequel se trouvent des éléments de liste ou des paires terme-définition. Les éléments de la liste se comportent comme éléments de bloc, situés les uns en dessous des autres et occupant toute la largeur du bloc conteneur. Chaque élément de la liste a bloc supplémentaire, situé sur le côté, qui ne participe pas à l'aménagement.

              Création de listes HTML

              1. Liste à puces

              Liste à puces est une liste non ordonnée (de la liste anglaise non ordonnée). Créé à l'aide d'une balise associée

              . Le marqueur d'un élément de liste est une étiquette, par exemple un cercle plein.

              Les navigateurs ajoutent par défaut le formatage suivant au bloc de liste :

              Chaque élément de liste est créé à l'aide d'une balise appariée

           2. (à partir de l'élément de liste anglais).
           disponible .
           • Microsoft
           • Google
           • Pomme
           Riz. 1. Liste à puces

           2. Liste numérotée

           Liste numérotée est créé à l’aide d’une balise appariée. Chaque élément de liste est également créé à l'aide de l'élément

         • . Le navigateur numérote automatiquement les éléments dans l'ordre, et si vous supprimez un ou plusieurs éléments d'une telle liste, les nombres restants seront automatiquement recalculés.

           Le bloc de liste a également des styles de navigateur par défaut :

         • L'attribut value est disponible, ce qui vous permet de modifier le numéro par défaut de l'élément de liste sélectionné. Par exemple, si pour le premier élément de la liste vous définissez
         • , alors la numérotation restante sera recalculée par rapport à la nouvelle valeur.

           Pour l'étiquette

           Les attributs suivants sont disponibles :
           Tableau 1. Attributs de balise

           Attribut	Description, valeur acceptée
           renversé	L'attribut reversed provoque l'affichage de la liste dans l'ordre inverse (par exemple, 9, 8, 7...).
           commencer	L'attribut start spécifie la valeur initiale à partir de laquelle la numérotation commencera, par exemple une construction le premier article recevra le numéro de série « 10 ». Vous pouvez également spécifier simultanément le type de numérotation, par exemple : .
           taper	L'attribut type spécifie le type de marqueur à utiliser dans la liste (lettres ou chiffres). Valeurs acceptées : 1 — valeur par défaut, numérotation décimale. A - numérotation de liste dans ordre alphabétique, lettres majuscules(A B C D). a — numérotation des listes par ordre alphabétique, minuscule(a B c d). I - numérotation en chiffres majuscules romains (I, II, III, IV). i — numérotation en chiffres romains minuscules (i, ii, iii, iv).

           1. Microsoft
           2. Google
           3. Pomme
           Riz. 2. Liste numérotée

           3. Liste des définitions

           Listes de définitions sont créés à l'aide d'une balise

           . Pour ajouter un terme, utilisez une balise
           , et pour insérer une définition - la balise
           .

           Le bloc de liste de définitions possède les styles de navigateur par défaut suivants :

           Pour les balises

           ,

           Et

           disponible .

           Directeur:

           Peter Tochiline

           Casting:

           Andreï Gaidulyan

           Alexeï Gavrilov

           Vitali Gogounski

           Maria Kojevnikova

           Riz. 3. Liste des définitions

           4. Liste imbriquée

           Souvent des opportunités listes simples manque, par exemple, lors de la création d'une table des matières, il n'y a aucun moyen de s'en passer éléments imbriqués. Le balisage de la liste imbriquée serait le suivant :

           • Paragraphe 1.
           • Point 2.
             • Sous-paragraphe 2.1.
             • Sous-paragraphe 2.2.
               • Paragraphe 2.2.1.
               • Paragraphe 2.2.2.
             • Sous-paragraphe 2.3.
           • Point 3.

           
           Riz. 4. Liste imbriquée

           5. Liste numérotée à plusieurs niveaux

           Une liste à plusieurs niveaux est utilisée pour afficher les éléments de la liste sur différents niveaux avec divers retraits. Le balisage d'une liste numérotée à plusieurs niveaux serait le suivant :

           1. paragraphe
           2. paragraphe
              1. paragraphe
              2. paragraphe
              3. paragraphe
                 1. paragraphe
                 2. paragraphe
                 3. paragraphe
              4. paragraphe
           3. paragraphe
           4. paragraphe

           Ce balisage par défaut créera une nouvelle numérotation pour chaque liste imbriquée, en commençant par un. Pour créer une numérotation imbriquée, vous devez utiliser les propriétés suivantes :
           counter-reset réinitialise un ou plusieurs compteurs, en spécifiant la valeur à réinitialiser ;
           counter-increment spécifie la valeur de l'incrément du compteur, c'est-à-dire dans quels incréments chaque élément suivant sera numéroté ;
           contenu - contenu généré, dans ce cas, il est responsable de l'affichage du numéro avant chaque élément de la liste.

           Ol ( /* supprime la numérotation standard */ list-style: none; /* Identifiez le compteur et donnez-lui le nom li. La valeur du compteur n'est pas spécifiée - par défaut elle est 0 */ counter-reset: li; ) li :before ( /* Nous définissons l'élément qui sera numéroté - li. Le pseudo-élément before indique que le contenu inséré à l'aide de la propriété content sera placé avant les éléments de la liste. Ici, nous définissons également la valeur de l'incrément du compteur (par défaut est 1). */ counter-increment: li; / * La propriété content affiche le numéro de l'élément de la liste. counters() signifie que le texte généré représente les valeurs de tous les compteurs portant ce nom. Un point entre guillemets ajoute un point de séparation entre les nombres, et un point avec un espace est ajouté avant le contenu de chaque élément de la liste */ content: counters(li,".") "."; )
           Riz. 5. Liste numérotée à plusieurs niveaux