Exemples de style élégant des listes CSS ul li. Comment organiser les éléments de liste horizontalement ? La balise ol spécifie
Bonjour chers lecteurs du site du blog. Aujourd'hui, dans cette rubrique, je veux parler d'une variété de listes HTML qui peuvent être créées sur la base des balises spécialement conçues UL, OL, LI et DL. À l'aide de la paire UL et LI, des listes à puces sont créées, à l'aide de OL et LI - numérotées, et à l'aide des éléments DL, DT et DD, des listes de définitions sont créées. Nous examinerons également brièvement les principes de création de structures imbriquées.
Je tiens à vous rappeler que nous avons déjà réussi, réussi à parler des bases du moderne, ainsi que de la disposition des tables (). De plus, nous avons abordé les bases, eh bien, nous avons appris à travers.
Listes à puces basées sur les balises UL et LI
La balise UL est utilisée pour créer des listes à puces, et OL est utilisé pour créer des listes numérotées. Ces balises sont appariées et bloquées, tout comme l'élément LI.
Des éléments de liste séparés sont situés entre les balises d'ouverture et de fermeture, qui à leur tour sont enfermées dans un élément LI d'ouverture et de fermeture. En haut et en bas des listes HTML, le navigateur ajoute une indentation d'une ligne, similaire à l'indentation créée par une balise de paragraphe.
Voyons, par exemple, une variante à puces qui pourrait ressembler à ceci :
- Première ligne
- La deuxième
- Le dernier élément
À l'intérieur des balises UL d'ouverture et de fermeture, seuls les éléments LI peuvent être, et déjà à l'intérieur de ces éléments (éléments) eux-mêmes, vous pouvez insérer n'importe quel contenu (texte, images, titres, paragraphes, liens et même d'autres listes).
Celles. UL sert uniquement à organiser une liste à puces (non ordonnée), et tout ce que vous verrez sur une page Web à l'intérieur est implémenté en utilisant le contenu des éléments LI.
Pour UL, vous pouvez modifier le type de marqueur en y écrivant différentes valeurs pour l'attribut "Type". Si "Type" (contrôle de l'apparence des marqueurs) n'est pas spécifié pour l'élément UL, alors le type de marqueur par défaut sera affiché (disque - un cercle rempli de la couleur du texte) :
- - cercle plein (par défaut) ;
- - cercle ouvert ;
- - carré
Dans les exemples ci-dessus, nous avons écrit l'attribut "Type" dans l'élément UL, en appliquant ce type de marqueurs à tous les éléments. Mais l'attribut "Type" peut être attribué à chaque balise LI individuelle en définissant son propre type de marqueur pour cet élément.
Exemple liste à puces avec différents types marqueur pour chaque élément :
- Un marqueur en forme de disque rempli
- Marqueur sous la forme d'un disque non peint
- Carré
Listes numérotées en HTML basées sur la balise OL
Pour créer une liste numérotée, des balises OL sont utilisées, à l'intérieur desquelles, encore une fois, les éléments LI seront situés. OL et LI, comme je l'ai déjà mentionné, sont des blocs (c'est-à-dire qu'ils ont tendance à occuper tout l'espace qui leur est disponible en largeur) et à l'intérieur d'OL, il ne sera pas possible de placer autre chose que des éléments LI.
Il s'avère que OL et UL sont des balises de service qui ne sont nécessaires que pour indiquer au navigateur le type de liste que nous générons (à puces ou numérotée). Dans le cas d'un numéroté, à gauche de chaque élément, nous ne verrons pas un marqueur, mais un numéro et un point derrière :
- Première ligne
- Deuxième point
- Troisième ligne
Comme je l'ai mentionné juste au-dessus, les éléments UL, OL et LI ont la possibilité d'utiliser l'attribut TYPE. Il vous permet de personnaliser le type de puce ou de spécifier quels nombres ou lettres seront numérotés dans la liste. Pour une liste numérotée, les paramètres de cet attribut peuvent prendre les valeurs suivantes :
- - la numérotation sera effectuée en chiffres arabes ordinaires (la même option sera utilisée par défaut, en l'absence de l'attribut « Type ») ;
- — lettres majuscules comme numérotation ;
- - minuscules;
- - les chiffres romains majuscules ;
- - les chiffres romains minuscules ;
Un exemple de liste numérotée avec différents types de numérotation pour chaque élément :
- avec numérotation en gros chiffres romains
- Numérotation en petites lettres latines
- Petits chiffres romains
Lors de la création de listes numérotées, il est également possible de commencer la numérotation non pas à partir d'un, mais à partir du numéro spécifié dans l'attribut START. Par exemple:
- Le premier élément dont le numéro est spécifié dans la balise OL par l'attribut start = "23"
- L'élément suivant, avec un numéro un plus élevé
- Encore un de plus
Pour OL, vous pouvez également commencer une nouvelle numérotation à partir de n'importe quelle valeur, à partir de n'importe quel élément, en écrivant l'attribut VALUE avec le numéro requis dans le LI d'ouverture de cet élément. Par exemple:
- Premier élément avec le numéro un
- Cet élément recevra le numéro spécifié dans l'attribut value = "32"
- Article avec un grand nombre
Listes de style en CSS (feuilles de style)
Mais généralement maintenant apparence les marqueurs ne sont pas définis via l'attribut TYPE, mais pour lesquels les propriétés correspondantes sont attribuées.
Ici, je vais juste donner un exemple de différentes puces pour les listes non numérotées, dont l'apparence est définie via un fichier séparé avec des feuilles de style en cascade.
- Premier point
- Seconde
- Durer
Mais nous en parlerons dans les articles suivants. C'est ainsi que l'apparence des marqueurs UL sur ce blog est définie. Les images sont utilisées comme marqueurs : pour les éléments ordinaires d'une liste non numérotée -, pour les éléments imbriqués d'une liste non numérotée -.
Listes spéciales et imbriquées en code Html
Le troisième et dernier type est appelé "listes de définitions" et ils sont spécifiés à l'aide de trois balises - DL, DT et DD. Le DL indique au navigateur qu'une liste de définitions suivra.
Habituellement, ce type est utilisé (enfin, ou il a été supposé qu'il sera utilisé) pour écrire des entrées de dictionnaire, constituées de termes (inclus dans des balises DT) et de leurs descriptions (incluses dans des balises DD).
- Premier mandat
- La description
- Deuxième mandat
- sa description
Si vous regardez l'exemple ci-dessus, vous remarquerez que l'élément DD (description du terme) est décalé (de 40 pixels) par rapport à l'élément DT (terme lui-même).
En général, DL, DT et DD sont des balises de bloc, et seul le contenu avec des balises en ligne peut être inséré à l'intérieur d'un élément DT (il s'avère que les éléments de bloc de titre et de paragraphe ne peuvent pas être utilisés à l'intérieur d'une DT). Et à l'intérieur des balises DD, vous pouvez insérer n'importe quel élément, à la fois en ligne et en bloc.
Liste imbriquée en HTML, il est créé par analogie avec un simple, mais à l'intérieur de la liste principale, certains des éléments sont à nouveau enfermés dans les balises d'ouverture et de fermeture UL ou OL.
Veuillez noter que le LI de fermeture de l'élément dans lequel l'élément imbriqué sera créé n'est placé qu'après tout le code de la liste imbriquée (cela est très important pour son affichage correct sur la page Web). La liste imbriquée peut ressembler à ceci :
- Le premier paragraphe du principal numéroté
- Deuxième point
- Le premier élément de la puce imbriquée
- Seconde
- Le troisième et dernier paragraphe intitulé
- Troisième article numéroté
Bonne chance à toi! A bientôt sur les pages du site du blog
Vous pouvez être intéressé
Comment insérer un lien et une image (photo) en HTML - Balises IMG et A Select, Option, Textarea, Label, Fieldset, Legend - Balises HTML du formulaire déroulant et de la zone de texte 
Formulaires HTML pour le site - balises Form, Input et Select, Option, Textarea, Label et autres pour créer des éléments de formulaires Web 
Comment les couleurs sont définies dans le code Html et CSS, sélection des nuances RVB dans les tableaux, Yandex et autres programmes 
Intégrer et objet - Balise HTML et pour afficher du contenu multimédia (vidéo, flash, audio) sur des pages Web 
Balises et attributs d'en-tête H1-H6, ligne horizontale Hr, saut de ligne Br et paragraphe P selon la norme Html 4.01 
Tableaux en Html - Balises Table, Tr et Td, ainsi que Colspan, Cellpadding, Cellspacing et Rowspan pour les créer 
Qu'est-ce que le langage de balisage hypertexte Html et comment afficher une liste de toutes les balises dans le validateur W3C 
Les balises Font (Face, Size et Color), Blockquote et Pre sont des mises en forme de texte héritées en HTML pur (pas de en utilisant CSS)
Iframe et Frame - que sont-ils et comment utiliser au mieux les cadres en HTML 
Img - Balise HTML pour insérer une image (Src), l'aligner et l'envelopper avec du texte (align), ainsi que définir un arrière-plan (background)
La seule différence est que cette balise est strictement destinée aux listes de numérotation. Le nom de la balise vient de l'abréviation anglaise "Ordered List" - liste numérotée.
Syntaxe des balises
- Objet 1
- Article # 2
- Article # 3
- ...
Où l'attribut type = "value" peut prendre les valeurs suivantes
- A - définit des marqueurs sous forme de lettres latines majuscules (A, B, C ..);
- a - définit des marqueurs sous forme de lettres latines minuscules (a, b, c ..);
- I - fixe des repères sous forme de gros chiffres romains (I, II, III, IV ..);
- i - spécifie les marqueurs sous forme de petits chiffres romains (i, ii, iii, iv ..);
- 1 (par défaut) - spécifie les marqueurs sous forme de chiffres arabes (1, 2, 3 ..);
L'attribut start = "value" définit la valeur initiale (valeur de début) du rapport.
L'attribut reversed spécifie un décompte inversé (si nécessaire).
Étiqueter
- nécessite l'utilisation obligatoire d'une balise de fin
Une balise appariée est utilisée pour former des éléments de liste
Noter
Dans la liste, vous pouvez modifier le compte en votre propre compte. Pour cela, il existe un attribut spécial value = "" pour la balise
- Objet 1
- Article # 2
- Article # 3
Exemples avec des listes numérotées en html ( )
Exemple 1. Liste html numérotée sous forme de lettres latines
Exemple avec des majuscules
- Objet 1
- Article # 2
- Article # 3
- Objet 1
- Article # 2
- Article # 3
Exemple avec des lettres minuscules
- Article # 10
- Article # 11
- Article # 12
Voici à quoi cela ressemble sur la page :
- Objet 1
- Article # 2
- Article # 3
Exemple 2. Liste html numérotée en lettres romaines
Exemple avec des majuscules
- Objet 1
- Article # 2
- Article # 3
Voici à quoi cela ressemble sur la page :
- Objet 1
- Article # 2
- Article # 3
Exemple avec des lettres minuscules
- Objet 1
- Article # 2
- Article # 3
Voici à quoi cela ressemble sur la page :
- Objet 1
- Article # 2
- Article # 3
Exemple 3. Liste html numérotée des différentes positions de départ
Un exemple qui montre les capacités de l'attribut start, qui vous permet de définir la valeur de départ du compteur.
- Objet 1
- Article # 2
- Article # 3
Voici à quoi cela ressemble sur la page :
- Objet 1
- Article # 2
- Article # 3
Exemple 4. Changement de compte dans les listes html numérotées
Vous trouverez ci-dessous un exemple avec la possibilité de modifier les valeurs du compteur à l'aide de l'attribut value lors de l'affichage de nouveaux éléments dans les balises
- Objet 1
- Article # 2
- Article # 3
- Article # 4
Voici à quoi cela ressemble sur la page :
- Objet 1
- Article # 2
- Article # 3
- Article # 4
Exemple 5. Liste numérotée réversible en html
Vous trouverez ci-dessous un exemple de liste numérotée à l'envers (en comptant dans l'ordre inverse).
- Objet 1
- Article # 2
- Article # 3
- Article # 4
Voici à quoi cela ressemble sur la page :
- Objet 1
- Article # 2
- Article # 3
- Article # 4
Si vous avez déjà essayé de changer les styles CSS des numéros de ligne (chiffres) dans des listes ordonnées
- , alors, à coup sûr, rencontré des problèmes. Il est impossible d'accéder aux styles de ces éléments à l'aide des sélecteurs CSS. Mais assez souvent, la conception de l'interface implique de changer sa couleur, son arrière-plan, sa taille, etc.
- Planter un arbre
- Pour construire une maison
- Élever un fils
- 1 Planter un arbre
- 2 Pour construire une maison
- 3Élever un fils
- Planter un arbre
- Pour construire une maison
- Élever un fils
- li :: avant- crée un pseudo-élément à l'intérieur de la liste qui remplace le premier enfant.
- réinitialisation du compteur : monCompteur ;- réinitialise le compteur css myCounter à l'intérieur de chaque
- .
- contre-incrément : monCompteur ;- incrémente le compteur css myCounter pour chaque :: avant pseudo-élément.
- contenu : compteur (myCounter) ;- affiche la valeur courante du compteur myCounter à l'intérieur du pseudo-élément :: avant.
- marqué d'un marqueur,
liste numérotée —- - chaque élément de la liste
- marqué d'un numéro,
liste de définitions- - se compose de paires de termes- —
- définition.
Chaque liste est un conteneur qui contient des éléments de liste ou des paires terme-définition. Les éléments de liste se comportent comme des éléments de bloc, s'empilant les uns sous les autres et occupant toute la largeur du bloc conteneur. Chaque élément de la liste a bloc supplémentaire situé du côté qui ne participe pas à l'aménagement.
Génération de listes HTML
1. Liste à puces
Liste à puces est une liste non ordonnée (à partir de la liste anglaise non ordonnée)... Créé à l'aide d'une balise appariée
... Le marqueur d'un élément de liste est une étiquette, par exemple, un cercle plein.Les navigateurs ajoutent par défaut la mise en forme suivante à la zone de liste :
Chaque élément de liste est créé à l'aide d'une balise de paire
- (à partir de l'élément de liste anglais).
- disponible.
- Microsoft
- 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 la liste est également créé à l'aide de l'élément
- marqué d'un numéro,
- ... Le navigateur numérote les éléments dans l'ordre automatiquement, et si vous supprimez un ou plusieurs éléments d'une telle liste, alors le reste des nombres sera automatiquement recalculé.
La zone 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 que vous définissez
- , le reste de la numérotation sera recalculé par rapport à la nouvelle valeur.
Pour l'étiquette
- les attributs suivants sont disponibles :
- Microsoft
- Pomme
- et
- disponible.
- Réalisateur:
- Petr Tochiline
- Jeter:
- Andrey Gaidulyan
- Alexeï Gavrilov
- Vitaly Gogunsky
- Mariya Kojevnikova
Riz. 3. Liste des définitions4. Liste imbriquée
Souvent, les capacités des listes simples ne suffisent pas, par exemple, lors de la création d'une table des matières, vous ne pouvez pas vous en passer éléments imbriqués... Le balisage de la liste imbriquée serait le suivant :
- Paragraphe 1.
- Point 2.
- Paragraphe 2.1.
- Paragraphe 2.2.
- Paragraphe 2.2.1.
- Paragraphe 2.2.2.
- Paragraphe 2.3.
- Point 3.
Riz. 4. Liste imbriquée5. Liste numérotée à plusieurs niveaux
Une liste en couches est utilisée pour afficher les éléments de la liste à différents niveaux avec des retraits différents. Le balisage d'une liste numérotée à plusieurs niveaux serait le suivant :
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
- paragraphe
Ce balisage par défaut créera une nouvelle numérotation basée sur un pour chaque liste imbriquée. Pour effectuer une numérotation imbriquée, vous devez utiliser les propriétés suivantes :
counter-reset réinitialise un ou plusieurs compteurs, en définissant une valeur à réinitialiser ;
counter-increment spécifie la valeur de l'incrément du compteur, c'est-à-dire avec quelle étape chaque élément suivant sera numéroté ;
content - le contenu généré, dans ce cas il est chargé d'afficher le numéro avant chaque élément de la liste.Ol (/ * supprime la numérotation standard * / list-style: none; / * Identifie le compteur et donne-lui le nom li. La valeur du compteur n'est pas spécifiée - par défaut c'est 0 * / counter-reset : li;) li : avant (/ * On définit l'élément à numéroter - li. Le pseudo-élément avant spécifie que le contenu inséré à l'aide de la propriété content apparaîtra avant les éléments de la liste. C'est aussi la valeur d'incrémentation du compteur (la valeur par défaut est 1). * / Counter-increment: li; / * La propriété content affiche le nombre de compteurs d'éléments de liste () signifie que le texte généré est la valeur 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
Tableau 1. Attributs de balise
Attribut Description, valeur acceptée renversé L'attribut reversed spécifie l'affichage de la liste dans l'ordre inverse (par exemple, 9, 8, 7 ...). début L'attribut start définit la valeur initiale à partir de laquelle la numérotation commencera, par exemple, la construction - le premier article se verra attribuer un numéro de série « 10 ». Vous pouvez également définir le type de numérotation en même temps, par exemple,
- .
taper L'attribut type spécifie le type de marqueur à utiliser dans la liste (sous forme de lettres ou de chiffres). Valeurs acceptées :
1 - valeur par défaut, numérotation décimale.
A - numérotation de la liste par ordre alphabétique, en lettres majuscules (A, B, C, D).
a - numérotation de la liste par ordre alphabétique, lettres minuscules (a, b, c, d).
I - numérotation en chiffres romains majuscules (I, II, III, IV).
i - numérotation en chiffres romains minuscules (i, ii, iii, iv).3. Liste des définitions
Listes de définitions sont créés à l'aide de la balise
La zone de liste de définitions a les styles de navigateur par défaut suivants :
Pour les balises
- ,
Voici l'exemple le plus simple d'une liste sans style :
html
Examinons plusieurs façons de résoudre le problème ci-dessus.
Manière traditionnellement maladroite.
La façon traditionnelle de résoudre ce problème est de masquer les numéros de ligne qui ont été automatiquement placés par le navigateur. Cela utilise la propriété list-style : none; ...
css
li (list-style : aucun ;) .num (couleur : blanc ; arrière-plan : # 2980B9 ; affichage : inline-block ; text-align : center ; margin : 5px 10px line-height : 40px ; width : 40px; height : 40px ;)html
D'accord, cela semble redondant et pas flexible. Nous masquons les nombres ordinaux placés automatiquement et les remplaçons manuellement par les valeurs spécifiées, nous obstruons la mise en page, etc.
Voyons comment vous pouvez obtenir le même résultat sans encombrer la mise en page et en utilisant le pseudo-élément :: before et les propriétés css content, counter-increment, counter-reset.
Manière agréable et correcte.
Tout d'abord, nous fournirons le code et la démo, puis nous découvrirons ce que c'est.
css
ol (réinitialisation du compteur : monCompteur ;) li (style de liste : aucun ;) li : avant (incrément de compteur : monCompteur ; contenu : compteur (monCompteur ); couleur : blanc ; arrière-plan : # 2980B9 ; affichage : bloc en ligne ; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px;)html
Comme vous pouvez le voir, le code html reste propre et beau. Dans ce cas, tous les styles des éléments de la liste sont transférés en css.
Décomposons-le point par point :
plus de détails sur les compteurs css peuvent être trouvés dans
listes HTML sont utilisés pour regrouper des informations connexes. Il existe trois types de listes :
liste à puces —
- - chaque élément de la liste