Numérotation correcte dans de nombreuses listes HTML avec CSS. Numérotation correcte dans de nombreuses listes HTML avec CSS Comment effectuer une liste numérotée dans CSS

Très souvent d'utiliser la numérotation: lors de la création de diverses listes, des listes, une conception de la table des matières ou du contenu, etc.

Dans CSS, des compteurs sont utilisés pour automatiser le processus de numérotation.

Pour commencer, nous donnons un exemple simple. Ensuite, plus complète - Créez une liste investie avec une numérotation automatisée de ses éléments et de ses sous-éléments.

Compteur d'identification

Tout d'abord, vous devez identifier le comptoir.

En utilisant la propriété contre-réinitialisation, le compteur est attribué un nom et une valeur initiale. Le nom peut être tout, mais ne peut pas commencer par les chiffres.

Fragment de code:

Cette entrée suggère que pour la balise Un mètre est installé avec le numéro de nom et la valeur initiale de 3.

Par défaut, la valeur initiale du compteur est 0.

L'incrément du comptoir

Pour ce faire, sert la propriété contre-incrémentation. Il est également utilisé pour spécifier les incréments du compteur - le nombre à laquelle la valeur du compteur augmentera.

Fragment de code:

corps (contre-réinitialisation: numéro 3;)
Corps P (contre-incraction: numéro 3 ; }

Ce fragment de code dit que les paragraphes ( étiqueter

) Dans le corps du document sera numéroté par le compteur de nombres avec incrémental égal à 3.

Le premier paragraphe sera au numéro 6, car la valeur initiale du compteur 3 et son incrément est 3.

Par défaut, la valeur des incréments du compteur est de 1.

Maintenant tout paramètres nécessaires Le compteur est défini: nom, valeur initiale, incrément et élément qui sera numéroté. Plus loin....

Compteur d'affichage

Maintenant, il est nécessaire d'afficher la valeur du compteur et de définir les règles de son emplacement. Ceci est fait en utilisant le contenu et le pseudooler avant et après.

La propriété de contenu insère le contenu ( avant que.) ou après ( après ) L'élément spécifié.

Fragment de code:

corps (contre-réinitialisation: numéro 3;)
Corps P: Après (contre-incraction: numéro 3 ; Contenu: "égal" compteur (nombre) "". ;)

Ainsi, au fragment de code précédent, nous avons ajouté la propriété Contenu, qui affiche le mot "égal", puis la valeur du numéro du nombre et du point "." . Tout cela est inséré dans la page après le contenu du paragraphe ( Étiqueter

) Quel est le pseudo-élément après.

Finalement...

Vous trouverez ci-dessous l'exemple décrit.

Fragment de code:

2 multiplier par 3

3 Multipliez par 3

4 Multipliez par 3

5 multiplier par 3

Résultat:

Listes imbriquées avec la numérotation automatique

Considérons un exemple d'application de compteurs pour automatiser les listes investies du processus de numérotation.

Vous devez déjà avoir déjà connu de HTML et lorsque les listes d'apprentissage de CSS, que les éléments de liste sont numérotés automatiquement. Mais cette numérotation est la plus simple.

Qu'en est-il de la numérotation automatique des alinéas de la forme 1.1, 1.2, 2.1, 2.2, etc.?

Cette tâche est résolue à l'aide de compteurs qui vous permettent d'automatiser le processus de numérotation de listes nominales.

Fragment de code:

Numérotation automatique en CSS

Première liste de liste

Premier alinéa du 1er point

Deuxième alinéa du 1er point

La deuxième liste de la liste

Premier alinéa 2nd point

Deuxième alinéa du 2e point

Troisième liste de liste

Premier alinéa 3ème

Deuxième alinéa 3ème

Troisième alinéa 3ème

Résultat:

C'est ainsi que l'automatisation des listes investies du processus de numérotation!

Prend en charge deux types de listes: numérotés et non numérotés. Les premiers sont utilisés pour des éléments énumérablement ordonnés, le second - créer une liste d'éléments équivalents. Il existe toujours des listes de définitions utilisées pour créer des blocs de définition-description, mais dans mon expérience, utilisées extrêmement rarement. Sur la façon de travailler avec ces listes vidéo pour les débutants où il est indiqué en détail comment travailler avec ces listes.

Ayant travaillé avec des listes HTML nounted standard, chacun plus tôt ou ultérieure en collision avec le problème de son imperfection. Le fait est que lorsque vous attachez une liste, la numérotation de la liste ci-jointe à nouveau et commence à nouveau avec une unité. Et au niveau de la nidification de trois et à la longueur de la liste, plus de dix commencent à résoudre la perception de l'élément imbriqué à quel élément parent appartient.

Considérez cette tâche sur exemple simple. Dans le code ci-dessous, les éléments se composent de ce que j'aimerais voir:

1.
2.
1. 2.1.
2. 2.2.
3. 2.3.
4. 2.4.
3.
4.
1. 4.1.
2. 4.2.
3. 4.3.
4. 4.4.

Toutefois, lorsque vous retirez un tel code HTML à l'écran, nous obtenons la sortie standard de la liste numérotée HTML, dans laquelle toutes les listes jointes commencent par 1.

Dans la figure ci-dessus, qu'est-ce qui est présenté au début des éléments de la liste (pas de texte audacieux) est la numérotation automatique de la liste.

Pour que la numérotation soit correcte, intuitivement compréhensible, il est nécessaire que chaque attachement de la liste commence par un chiffre indiquant son niveau de nidification. Et cela peut être fait simplement en utilisant CSS:

Ol (style de liste: aucune; contre-réinitialisation: LI;) LI: Avant (contre-augmentation: LI; contenu: comptoirs (LI, ".") ".";

Appliquer ce code CSS aux balises

La liste numérotée obtiendra ce dont vous avez besoin: Numéroter correctement Numéro de liste HTML:

La formation de la numérotation correcte dans la liste numérotée HTML utilisant CSS

Considérez plus en détail les propriétés de la liste numérotée HTML, qui peut être modifiée avec utiliser CSS..

style de liste: Aucun;
- annuler tous les styles de liste des éléments OL (s'ils ont déjà été attribués à) à l'aide de la propriété de style liste
contre-réinitialisation: LI;
- attribuez l'ID LI dans lequel l'élément d'élément OL sera stocké à l'aide de la propriété contre-réinitialisation.
contre-augmentation: LI;
- notez l'identifiant LI en tant que compteur qui comptera le nombre d'affichage des éléments OL sur la page et sera affiché à l'aide du contenu et de la propriété pseudo-élément: avant pour LI
contenu: Compteurs (Li, ".") "";
- définissez la séquence de sortie du compteur LI pour tous les éléments de la liste numérotée en OL.

Ainsi, en modifiant les quatre propriétés CSS de deux éléments OL et LI d'une liste numérotée, vous pouvez obtenir une liste HTML magnifiquement numérotée, ce qui est facilement perçu et plus familier pour nous, car il envoie clairement l'imbrication d'éléments et appartenant à la éléments parents de la liste.

Code HTML et CSS de la liste numérotée avec la numérotation correcte

Afin de comprendre facilement et d'appliquer les informations décrites ci-dessus, je cite un code HTML et CSS entièrement de travail d'une liste numérotée avec la numérotation correcte d'éléments imbriqués:

Numérotation correcte de nombreux éléments de liste dans HTML avec CSS

1.
2.
1. 2.1.
2. 2.2.
3. 2.3.
4. 2.4.
3.
4.
1. 4.1.
2. 4.2.
3. 4.3.
4. 4.4.

Merci pour l'attention! \u003d D.

P.s. Sur la manière de créer la numérotation correcte dans les listes de numéros mixtes et des étiquettes de HTML avec CSS, vous pouvez lire dans → cet article . Une solution universelle pour la création de propriétés CSS est donnée pour différents types Listes HTML.

Pour les listes, la création de laquelle le moyen HTML est décrit ici, les règles CSS suivantes sont fournies.

type de style de liste

Spécifie le marqueur ou la numérotation des listes au lieu de l'attribut Type dans le code HTML. Les valeurs de propriété pour les listes d'étiquettes peuvent être:

dISQUE. - Cercle, installé par défaut.
cercle - Cercle.
carré. - Carré.

Pour les listes numérotées, la propriété est généralement attribuée aux valeurs:

décimal - Nombres arabes, la valeur par défaut est définie.
romain - Petits chiffres romains.
haut-romain. - Nombre de capitaux romains.
alpha inférieur. - String Lettres latines.
haut-alpha. - lettres latines capitales.

Également pour tout type de liste, la propriété Type de liste de liste, vous pouvez spécifier la valeur de l'Aucun, qui supprimera en toute sécurité le marqueur.

D'autres valeurs sont disponibles pour les listes numérotées, par exemple, cJK-idéographique Spécifie la numérotation idéographique Arménien. - Arménien traditionnel, et décimal-nul-zéro Il fixera la numérotation des nombres romains, mais avec zéro au début: 01, 02, 03 ... 09, cependant, dans la pratique et les valeurs comme elles sont extrêmement rarement utilisées.

L'exemple ci-dessous affiche trois listes: numérotés avec la numérotation arménienne traditionnelle, marquée d'un cercle et d'éléments numérotés, dont les éléments sont numérotés idéographiquement.

Listes CSS

Premier point
Deuxième point
Troisième point

Premier point
Deuxième point
Troisième point

Premier point
Deuxième point
Troisième point

Résultat.

La couleur des marqueurs coïncide avec la couleur du texte de la liste spécifiée par la propriété couleur.

image-style-image

Vous permet d'installer votre propre image en tant que marqueur. Par exemple, si le fichier contient la page contient le fichier marker.png.Ce que vous voulez utiliser, le code de conception sera comme suit:

Ul (liste-style-image: URL ("marqueur.png");)

liste de style

Spécifie la position du marqueur: Soit elle est transférée à l'étranger élément de la liste ( position de style de liste: à l'extérieur), ou le texte est renforcé ( liste-style-position: à l'intérieur).

L'exemple ci-dessous montre la différence entre ces valeurs. Dans le premier cas, le marqueur dans la liste, dans le second cas, il est fait au-delà de ses limites.

liste de style

Vous venez de regarder ce que l'intérieur diffère de l'extérieur.
Dans le cas de l'intérieur, le marqueur s'inscrit dans la liste, sans aller au-delà de ses limites et n'interfère pas la couche. Le texte renforce cela, le marqueur est comme à l'intérieur.
La valeur de l'extérieur fait un marqueur en dehors de la liste.

En conséquence, une page est créée:

style de liste.

Vous permet de réduire le code en écrivant les trois propriétés répertoriées avec une ligne. Les règles sont enregistrées dans l'espace:

Ul (style de liste: carré à l'intérieur;)

Considérons un exemple d'une page avec trois listes. Le premier numéro est numéroté au format 01, 02, le second est marqué d'un modèle personnalisé (le fichier Marker.png dans le dossier avec la page), le marqueur de la troisième liste est désactivé.

Le code HTML est présenté ci-dessous.

style de liste.

Premier point
Deuxième point
Troisième point

Premier point
Deuxième point
Troisième point

Premier point
Deuxième point
Troisième point

Le navigateur affichera la page suivante.

Bonne journée!

Dans cet article, vous apprendrez de toutes les fonctionnalités des listes, vous comprendrez comment effectuer une liste numérotée, Master Tags qui aidera à rendre une liste marquée simple plus intéressante et perceptible avec des marqueurs arbitraires. Après avoir passé la leçon, vous comprendrez une compréhension de l'endroit où les listes s'appliquent et dans quelles circonstances peuvent-elles être utilisées.

Cet article est le troisième dans ce petit parcours sur les bases de HTML. Avant de lire cette leçon, je recommande de passer les deux précédents:

Seul l'article a commencé et vous pouvez déjà remarquer l'utilisation d'une liste marquée standard. Sur mon site, il a l'air assez simple: à gauche, il y a un petit indent avec la ligne et un marqueur carré. En outre, dans l'article, nous examinerons en détail les marqueurs, comment faire des chiffres, ainsi que comment faire votre propre marqueur.

Dans chaque partie de l'article, la création de certaines listes sera accompagnée d'explications détaillées sur l'insertion d'une liste.

1. Listes marquées dans HTML

Ce type de liste est utilisé pour énumérer l'ensemble d'éléments similaires à ceux de l'ensemble. Il peut s'agir d'une liste de références associées à un sujet, explication détaillée Pour des parties individuelles du texte. Mais voyons comment les playlists ressemblent au code:

Mais on dirait dans le navigateur:

Figure. 1.1. Vue standard d'une liste HTML non mesurée marquée dans le navigateur

1.1 Marqueurs standard pour une liste marquée

Dans l'image ci-dessus (figure 1.1.), Vous pouvez remarquer les cercles au début de chaque élément de menu. Ceci est un marqueur. Par défaut, il se trouve dans le navigateur sous la forme d'un cercle peint. Il existe plusieurs types de marqueurs dans HTML: un cercle, un cercle vide et un carré. Ils ne nécessitent pas que CSS soit connectant des images tierces:

1.2 Marqueur de liste sous la forme d'un cercle vide

Attribut Valeurs que vous connaissez et voyons maintenant comment créer une liste HTML marquée dans le code. Dans la table ci-dessus, nous avons choisi la deuxième valeur "cercle" pour l'attribut de type et le définissez dans notre liste marquée:

<hTML\u003e <tête\u003e <titre\u003eUn exemple d'une liste marquée avec un marqueur sous la forme d'un cercle vide</ titre\u003e </ Tête\u003e <corps\u003e <p\u003eÉtoiles:</ P\u003e <ul type \u003d "cercle"\u003e <li\u003eSirius</ Li\u003e <li\u003eArctur.</ Li\u003e <li\u003ePollux</ Li\u003e <li\u003eBethelgeuse</ Li\u003e <li\u003eLe soleil</ Li\u003e </ ul\u003e. </ Corps\u003e </ Html\u003e

Regardez immédiatement la façon dont ce code regardera dans le navigateur:

Figure. 1.2. Vue du marqueur de la liste sous la forme d'un cercle dans le navigateur

1.3 Marqueur de liste sous la forme d'un carré

Voyons également le dernier exemple avec un marqueur carré pour la liste HTML:

Faites attention au marqueur, il est devenu carré:

Figure. 1.3. Vue du marqueur de la liste sous la forme d'un carré dans le navigateur

Note importante: Maintenant, cette façon n'est plus utilisée pour créer des styles avec des listes marquées. Il existe une division claire de CSS (qu'est-ce que la lecture CSS) et HTML. HTML - Pour marquage et CSS - pour créer une apparence attrayante.

Le code contenant cet attribut lors de la spécification du type de document actuel en tant que HTML5 (""), Je vais donner une erreur lorsque la validation. Si vous n'avez pas entendu quelle validation est, alors vous êtes ici.

L'erreur sera la suivante:

Figure. 1.4. Erreur sur le validateur lors de l'utilisation de l'attribut "Type" de la liste

Avec des listes marquées énoncées. Nous passons maintenant à la numérotation en nombre, puis envisagez des listes sous-zones et plusieurs exemples prêts à l'emploi les plus souvent utilisés dans des sites réels.

2. Listes numérotées dans HTML

Contrairement au type de liste précédent, il existe une caractéristique importante dans les listes numérotées: elles apposent automatiquement la numérotation. Ceci est utile lorsque vous devez numéroter une grande liste. Manuel Il faudra beaucoup de temps, alors que vous pouvez toujours vous perdre. La liste numérotée est définie à l'aide de la balise. Comment ça regarde dans la pratique:

Un exemple de liste numérotée:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<hTML\u003e <tête\u003e <titre\u003eUn exemple de liste numérotée standard</ titre\u003e </ Tête\u003e <corps\u003e <p\u003eDe un à cinq:</ P\u003e <ol\u003e <li\u003eD'abord</ Li\u003e <li\u003eDeuxième</ Li\u003e <li\u003eLe troisième</ Li\u003e <li\u003eQuatrième</ Li\u003e <li\u003eCinquième</ Li\u003e </ ol\u003e </ Corps\u003e </ Html\u003e

Cela ressemble à une liste numérotée avec paramètres standard Dans le navigateur:

Figure. 2.1. Liste numérotée dans le navigateur avec paramètres standard

Comme son prédécesseur (liste marquée), il a ses propres styles pour produire des chiffres. La numérotation normale n'est pas la seule forme de marqueurs dans une liste numérotée dans HTML.

2.1 Marqueurs standard pour la liste numérotée

Ici, nous avons le choix entre trois types de marqueurs, mais à partir de cinq:

Marqueur de nom	La valeur de l'attribut "type"	Liste d'exemples
Marqueurs sous forme de chiffres arabes	1	Badminton Base-ball
Marqueurs sous la forme de lettres latines minuscules	uNE.	Jomolungma Chechrie. Kanchenjanga
Marqueurs sous la forme de lettres latines capitales	UNE.	Sommet chute. Tantrum Alley. Insano.
Marqueurs sous la forme de nombres romains dans les minuscules	jE.	Mer Philippine Mer arabe mer de Corail
Marqueurs sous forme de chiffres romains dans les majuscules	JE.	rouge Vert Bleu

2.2 Numérotation propre dans la liste HTML

En plus de la sortie habituelle d'une liste numérotée, nous pouvons également commencer votre numérotation à partir de n'importe quel chiffre. Pour ce faire, vous devez définir un attribut «Démarrer» supplémentaire. Un tel numérotage fonctionne sur tous les types de marqueurs dans des listes numérotées. Comment ça regarde dans la pratique:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<hTML\u003e <tête\u003e <titre\u003eNumérotation arbitraire pour une liste numérotée</ titre\u003e </ Tête\u003e <corps\u003e <p\u003eNous commençons à numéroter à partir de douze:</ P\u003e <type OL \u003d "A" Démarrer \u003d "12"\u003e <li\u003eDouze</ Li\u003e <li\u003eTreize</ Li\u003e <li\u003eQuatorze</ Li\u003e <li\u003eQuinze</ Li\u003e <li\u003eSeize</ Li\u003e </ ol\u003e </ Corps\u003e </ Html\u003e

Voici comment il sera affiché sur le site réel:

Figure. 2.2. Numérotation d'un numéro arbitraire dans une liste numérotée

Dans l'image ci-dessus, nous avons numéroté une liste à partir de douze, alors qu'il y avait des marqueurs sous forme de lettres latines minuscules. Maintenant, je pense qu'il est devenu évident comment utiliser ces attributs dans vos projets.

Eh bien, passons maintenant aux listes HTML imbriquées.

3. Comment faire une liste multi-niveaux (intégrée) dans HTML

Les listes multi-niveaux sont utilisées sur le site dans la construction du menu. Ce menu ressemble le plus souvent à (CO Leçon) ou en tombant à gauche ou à droite. De tels menus vous permettent de stocker d'autres éléments de menu sous une forme compacte.

Sur l'exemple des modèles de voitures, nous créerons une liste multi-niveaux dans HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<hTML\u003e <tête\u003e <titre\u003eListe des étiquettes imbriquées HTML</ titre\u003e </ Tête\u003e <corps\u003e <ul\u003e <li\u003eCitroen<ul\u003e <li\u003eBerlingo.</ Li\u003e <li\u003eC1.</ Li\u003e <li\u003eC2.</ Li\u003e <li\u003eC3 Picasso.</ Li\u003e <li\u003eC4 Grand Picasso.</ Li\u003e </ ul\u003e. </ Li\u003e <li\u003eKia.</ Li\u003e <li\u003eToyota.</ Li\u003e <li\u003eAudi.</ Li\u003e <li\u003eLexus.</ Li\u003e </ ul\u003e. </ Corps\u003e </ Html\u003e

Veuillez noter comment la liste multi-niveaux dans le navigateur ressemble à:

Figure. 3.1. Un exemple de liste multi-niveaux dans HTML

Nous avons fait une liste multi-niveaux à l'aide d'une étiquette (étiquette

Mais nous pouvons combiner des listes multi-niveaux avec numérotées et étiquetées comme suit:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<hTML\u003e <tête\u003e <titre\u003eListes numérotées, étiquetées et multi-niveaux dans HTML</ titre\u003e </ Tête\u003e <corps\u003e <ul\u003e <li\u003ePremier groupe de tulipes<ol\u003e <li\u003ePremière année<ul\u003e <li\u003eTulipes précoces simples</ Li\u003e </ ul\u003e. </ Li\u003e <li\u003eSeconde classe<ul\u003e <li\u003eTerry Tulips</ Li\u003e </ ul\u003e. </ Li\u003e </ ol\u003e </ Li\u003e </ ul\u003e. </ Corps\u003e </ Html\u003e

Dans l'exemple ci-dessus, nous avons la double imbrication (niveau 2). Premièrement, la liste de deux classes de tulipes est investie, il est numéroté. Ensuite, une liste marquée est investie dans chacun des éléments de la liste numérotée.

Nous examinons sa vue dans le navigateur:

4. Matériel utile sur les listes HTML

Voici les informations pour lesquelles la compréhension des propriétés CSS est nécessaire. Pour ce faire, je recommande d'explorer les leçons suivantes :. Tous les exemples seront immédiatement avec code source Et divisé en onglets HTML (structure), CSS (styles) et résultat.

4.1 Comment faire une liste de HTML dans une chaîne

Rendre la liste HTML dans la chaîne peut être nécessaire lors de la création d'un menu horizontal. Rendez-le très simple:

4.2 Comment faire une liste de HTML sans icône

Pour cela correspond à la propriété de type de style de liste dans CSS (plus):

4.3 Comment faire une liste dans HTML au centre

L'élément de liste est Élément de blocPar conséquent, dans le centre, il doit être aligné sur des retraites externes. Mais il y en a un moment important - Nous devons spécifier explicitement la largeur afin que l'alignement fonctionnait:

4.4 Comment faire une liste dans HTML avec des images

Juste une seule propriété de style liste CSS-style. À l'intérieur de l'URL indiquent l'adresse à l'icône. Je veux juste remarquer que l'image est préférable de ramasser petit immédiatement, car la hauteur de la ligne de liste dépend de celui-ci:

4.5 Liste de la liste HTML marquée Votre marqueur

Dans ce cas, il est nécessaire de connecter des icônes de police à l'avance (par exemple, fontawesome). Ensuite, vous pouvez faire une icône au lieu d'un marqueur standard:

4.6 Comment faire une liste dans HTML dans plusieurs colonnes

Pour faire une liste de plusieurs colonnes, nous utiliserons propriété CSS Colum-Count (la propriété est prise en charge uniquement dans les navigateurs suivants: c'est-à-dire 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Vous devez également définir la hauteur de la liste pour voir la partition dans plusieurs colonnes:

5. Liste HTML combinée

Faire une liste combinée dans HTML mieux Utilisation totale des polices d'icône. Par exemple, Flaticon ou Fontaweomeome.

Ces informations sont déjà avancées, il sera donc nécessaire pour un début.

6. Travailler avec les listes

Sur la vidéo ci-dessous, vous pouvez voir tout le travail avec des listes HTML dans la pratique:

Pour sécuriser les informations reçues, je recommande toutes les actions à faire manuellement. Essayez différents marqueurs pour les listes, créez des listes numérotées et après avoir déménagé à des listes multi-niveaux (ci-jointes) et expérimentalez-les.

À ce sujet, les listes finissent et passez à la prochaine leçon sur les images.

Si vous avez besoin de plus que des bases des bâtiments de site, et que vous voulez maîtriser la profession Développeur frontal, faites attention au cours de la Netologie de l'école en ligne - «» et l'école de compétences en ligne et le parcours »».

Le cours dure longtemps, mais la connaissance que vous recevrez structurée, avec laquelle vous pouvez immédiatement obtenir un emploi si vous êtes intéressé par cette direction.