Exemples de conception élégante de listes CSS ul li. Comment placer les éléments d’une liste horizontalement ? Les éléments HTML ol ul sont utilisés pour créer
Si vous avez déjà essayé de modifier les styles CSS des numéros de ligne (chiffres) dans les listes ordonnées
- , alors vous avez probablement rencontré des problèmes. Il est impossible d'accéder aux styles de ces éléments à l'aide des sélecteurs CSS. Mais bien souvent, la conception de l’interface implique de changer sa couleur, son arrière-plan, sa taille, etc.
- Planter un arbre
- Construire une maison
- Élever un fils
- 1 Planter un arbre
- 2 Construire une maison
- 3Élever un fils
- Planter un arbre
- Construire une maison
- Élever un fils
- li::avant– crée un pseudo-élément à l'intérieur de la liste, qui prend la place du premier enfant.
- compteur-réinitialisation:myCounter;– réinitialise le compteur CSS myCounter à l’intérieur de chaque
- .
- contre-incrément : myCounter ;– incrémente le compteur css myCounter pour chaque pseudo-element::before .
- contenu:compteur(monCompteur);– imprime la valeur actuelle du compteur myCounter à l’intérieur du pseudo-élément ::before.
- A - lettres latines majuscules ;
- a - lettres latines minuscules ;
- I - chiffres romains majuscules ;
- i - chiffres romains minuscules ;
- 1 - Chiffres arabes
- 1 élément de liste numéroté
- 2 éléments de liste numérotée
- 3ème élément d'une liste numérotée
- 1 élément de liste numéroté
- 2 éléments de liste numérotée
- 3ème élément d'une liste numérotée
- 1 élément de liste numéroté
- 2 éléments de liste numérotée
- 3ème élément d'une liste numérotée
- 1 élément de liste numéroté
- 2 éléments de liste numérotée
- 3ème élément d'une liste numérotée
- 1 élément de liste numéroté
- 2 éléments de liste numérotée
- 3ème élément d'une liste numérotée
- 1 élément de liste numéroté
- 2 éléments de liste numérotée
- 3ème élément d'une liste numérotée
- 1 élément de liste numéroté
- 2 éléments de liste numérotée
- 3ème élément d'une liste numérotée
- 1 élément de liste numéroté
- 2 éléments de liste numérotée
- 3ème élément d'une liste numérotée
- 1 élément de liste numéroté
- 2 éléments de liste numérotée
- 3ème élément d'une liste numérotée
- Première ligne
- Deuxième
- Dernier élément
- — cercle plein (par défaut) ;
- - cercle vide ;
- - carré
- Marqueur en forme de disque rempli
- Marqueur en forme de disque non peint
- Carré
- Première ligne
- Deuxième point
- Troisième ligne
- — la numérotation sera effectuée en chiffres arabes réguliers (la même option sera utilisée par défaut, en l'absence de l'attribut « Type ») ;
- — les majuscules comme numérotation ;
- - les lettres minuscules ;
- - les chiffres romains majuscules ;
- - chiffres romains minuscules ;
- numéroté avec de grands chiffres romains
- Numérotation en petites lettres latines
- Numérotation avec de petits chiffres romains
- Le premier élément dont le numéro est précisé dans la balise OL avec l'attribut start="23"
- L'élément suivant, avec un numéro un plus haut
- Encore un de plus
- Premier point avec le numéro un
- Cet élément recevra le numéro spécifié dans l'attribut value="32"
- Article avec un grand nombre
- Premier point
- Deuxième
- Dernier
- Premier mandat
- Description
- Deuxième mandat
- Sa description
- Le premier paragraphe du principal numéroté
- Deuxième point
- Premier élément d'une puce imbriquée
- Deuxième
- Troisième et dernier point
- Troisième élément numéroté
- Combiner des informations en une seule structure pour créer une apparence lisible.
- Description de processus complexes étape par étape.
- Une disposition des informations sous forme de table des matières, avec des paragraphes pointant vers les sections pertinentes du document.
- (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 - Bélier
- Taureau
- Jumeaux
- Cancer
- Lion
- Vierge
- Balance
- Scorpion
- Sagittaire
- Capricorne
- Verseau
- Poisson
Signes du zodiaque :
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 pour tous les suivants jusqu'à ce que la prochaine redéfinition de l'apparence du marqueur soit rencontrée. Internet Explorer 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, cette possibilité n'est pas offerte directement par le langage HTML, mais est implémentée 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. Balises
- , qui pointent vers des éléments de liste individuels, fournissent 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 l'image graphique souhaitée avant chaque élément de la liste. 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 :Liste à puces Signes du zodiaque :
Bélier
Riz. 2.2. Liste à puces avec puces graphiques
Dans l'exemple donné, le fichier graphique Green_ball.gif est utilisé comme marqueur d'élément de liste. Notez que l'utilisation de graphiques sur les pages HTML peut augmenter considérablement la quantité d'informations transmises. Cependant, dans ce cas, cette augmentation est extrêmement insignifiante. Ici le même fichier est utilisé pour tous les marqueurs,
qui ne sera transmis qu'une seule fois. La taille des fichiers d'une petite image est également extrêmement petite.
Note
Les techniques de création de listes avec des puces graphiques sont abordées tour à tour au chapitre 8.
Liste numérotée
Un autre type de liste implémenté en HTML est la liste numérotée. Sinon, les listes de ce type sont dites 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 (OL - Ordered List, liste ordonnée).
- .
Voici un exemple de document HTML utilisant une liste numérotée : affichage dont navigateur est illustré à la Fig. 2.3.
Exemple de liste numérotée - Sirius
- Kanopus
- Arcturus
- Alpha Centaure
- Véga
- K appella
- Rigel
- Procyon
- Achernar
- Bêta Centaure
- Wetelgeuse
- Aldébaran
. . .- Mizar
. . .- Polaire
Les étoiles les plus brillantes visibles depuis la Terre :
Riz. 2.Z. Liste numérotée
Dans la balise
- Les paramètres suivants peuvent être spécifiés : COMPACT, TYPE et START.
- .
Exemple d'entrée :
- .
Paramètre de balise START
- vous permet de commencer à numéroter la liste à partir de quelque chose d'autre qu'un. La valeur du paramètre START doit toujours être un nombre naturel, quel que soit le type de numérotation de liste. Voici un exemple :
- pour les listes numérotées, permet l'utilisation des paramètres TYPE et VALEUR. Le paramètre TYPE peut prendre les mêmes valeurs que pour la balise
- .
- .
Note
Les navigateurs interprètent différemment le type de numérotation d’un élément de liste individuel. Le navigateur Netscape modifie l'apparence de la numérotation de cet élément et de tous les éléments suivants jusqu'à ce que le prochain remplacement soit rencontré. Internet Explorer modifie l'apparence du numéro uniquement pour cet élément.
Zvaleur du paramètre de la balise VALUE
- - vous permet de modifier le numéro d'un élément de liste donné. Cela modifie la numérotation de tous les éléments suivants. Une application typique est celle des listes avec certains éléments manquants. Un exemple d'une telle liste a été donné ci-dessus (Fig. 2.3). Il donne une liste ordonnée des étoiles les plus brillantes, dans laquelle les 58e et 75e places sont des étoiles clairement visibles à nos latitudes (Mizar est l'étoile la plus brillante de la constellation de la Grande Ourse et Polaris est l'étoile la plus brillante de la constellation de la Petite Ourse) .
Donnons un autre exemple original d'utilisation de différents types de numérotation. Le code HTML ci-dessous contient trois listes avec une numérotation différente. Pour faciliter la visualisation, chacune des listes est placée dans une cellule distincte du tableau. Les trois listes sont identiques et ne diffèrent que par le type de numérotation : dans la première colonne du tableau se trouvent des chiffres arabes, dans la seconde des chiffres romains et dans la troisième la numérotation est en lettres latines. Veuillez noter que les éléments de la liste sont vides, c'est-à-dire après n'importe quelle balise
- il n'y a pas de données. Un exemple de ce genre peut être utilisé comme table de correspondance entre l'écriture des nombres en chiffres arabes et romains. Il s'avère que n'importe quel navigateur prenant en charge les listes peut être utilisé comme générateur d'un tel tableau (Fig. 2.4), il vous suffit de taper le code HTML donné. La numérotation en chiffres romains fonctionne correctement jusqu'à la valeur 3999. En étudiant la colonne de droite, vous pourrez comprendre comment se fait la numérotation en lettres romaines. Une fois la numérotation à une lettre (de A à Z) épuisée, le premier numéro à deux lettres est pris comme numéro suivant - AA, etc.
Utiliser différents types de numérotation dans les listes -
. . .
-
. . .
-
. . .
Riz. 2.4. Différents types de numérotation de listes HTML
Liste des définitions
Les listes de définitions, également appelées dictionnaires de définitions, constituent un type particulier de liste. Contrairement aux autres types de listes, chaque élément d'une liste de définitions se compose toujours de deux parties. La première partie de l'élément de liste contient le terme en cours de définition et la deuxième partie contient du texte sous la forme d'une entrée de dictionnaire qui révèle la signification du terme.
Les listes de définitions sont spécifiées à l'aide d'une balise conteneur
- (Liste de définitions). À l'intérieur du conteneur avec une étiquette
- (Terme de définition) le terme en cours de définition est marqué et l'étiquette
- (Description de la définition) - un paragraphe avec sa définition. Pour les balises
- Et
- Vous pouvez omettre les balises de fermeture correspondantes.
De manière générale, la liste des définitions s'écrit comme suit :
- Terme
- Définition du terme
Dans le texte après la balise
- les éléments de niveau bloc tels que les balises de paragraphe ne peuvent pas être utilisés
Ou des en-têtes
-
. En règle générale, le texte du terme défini doit être situé sur une seule ligne. Le texte contenant la définition du terme s'affiche à partir de la ligne suivante (ou chaque ligne pour certains navigateurs) après la définition du terme, en retrait vers la droite. Dans les informations placées après le tag
- , les éléments au niveau du bloc peuvent être localisés. Il s'ensuit notamment que des listes de définitions peuvent être imbriquées.
Dans la balise
- un paramètre COMPACT peut être spécifié, dont le but est similaire aux autres listes décrites ci-dessus.
- Personne flegmatique
- Passif, très travailleur, lent à s'adapter ;
humeur stable, peu sensible aux influences extérieures;
léthargie des réactions émotionnelles et lenteur de l'activité volontaire
- Sanguine
- Actif, énergique, adaptable, -
vivacité et mobilité des réactions émotionnelles, rapidité et force des manifestations volitives
- Colérique
- Actif, très énergique, persistant ;
impétuosité et force des réactions émotionnelles, manifestations violentes de la volonté
- Mélancolique
- Passif, facilement fatigué, difficile à adapter, -
faiblesse des manifestations volitives et prédominance de l'humeur dépressive, doute de soi - Zempya
- Lune
- Carte
- Phobos
- Déimos
- Uranus
- Ariel
- Parapluie
- Titanie
- Obéron
- Miranda
- Neptune
- Triton
- Néréide
Continuons nos conversations sur les débuts du HTML. Dans cet article, je souhaite expliquer comment créer des paragraphes, des listes et des titres dans le texte. Et aussi sur les balises simples
Et
.Je vous conseille fortement de lire la première leçon de cette série, ainsi que l'article d'introduction sur la façon de commencer à étudier le HTML pour ceux qui ne les connaissent pas encore.
Nous allons maintenant continuer à étudier les balises. Je suppose que le lecteur est déjà familier avec le contenu des articles ci-dessus.
Comme toujours, plan de travail :
- Paragraphes
- Sauts de ligne
- Listes et éléments de liste
- Rubriques
- Règles horizontales
Paragraphes
Le texte est presque toujours constitué de paragraphes. Un paragraphe est un élément de texte qui véhicule une pensée complète.
En HTML, un paragraphe, comme le montre son titre, est désigné par . La lettre « p » est tirée du mot « paragraphe », qui signifie simplement « paragraphe ».
Regardons un exemple :
Le texte du premier paragraphe. Il contient une pensée. Mais maintenant, cette réflexion est terminée.
Une autre réflexion a déjà commencé et nous l'écrivons dans un autre paragraphe.
Comme vous pouvez le constater, l’utilisation des paragraphes est très simple et ne nécessite aucun commentaire particulier. Si nous regardons ce code dans un navigateur, nous verrons deux lignes avec une ligne vide entre elles. Dans les textes russes, il est d'usage de séparer un paragraphe non pas par une ligne vide, mais en décalant la première ligne vers la droite. Mais c'est exactement le formatage qui est souvent utilisé sur Internet, il est donc souvent laissé dans les textes en russe. Cependant, si vous n'aimez pas ce comportement, vous pouvez le modifier à l'aide de CSS.
Sauts de ligne
Parfois, vous devez traduire une ligne sans terminer une pensée ni fermer un paragraphe. Autrement dit, accédez simplement à une nouvelle ligne. Il y a une seule balise pour cela
. Voici un exemple de son utilisation :Le vent souffle joyeusement
Et le bateau accélère
Il court dans les vagues
Avec les voiles relevées.Ce fragment d'un poème d'A.S. Pouchkine nous a aidé à illustrer l'action du tag
. J'ai spécifiquement placé les deux dernières lignes de ce quatrain dans une seule ligne de code pour montrer que les lignes sont transférées vers une nouvelle ligne non pas parce que nous avons placé des sauts de ligne, mais parce que nous avons placé des balises.
. Cette balise est très simple et ne nécessite pas d’explications détaillées, nous arrêterons donc d’en discuter ici.listes,
- et lister les éléments
Parfois, vous devez énumérer quelque chose dans le texte. A cet effet, trois balises sont utilisées : ul, ol, li. Toutes ces balises sont des balises de conteneur, mais la balise est toujours contenue dans l'un des conteneurs ou et n'a aucune signification en dehors d'eux. Le conteneur ul est utilisé lorsque nous ne nous soucions pas de l'ordre des éléments répertoriés et que nous ne voulons pas nous concentrer sur l'ordre dans lequel ils apparaissent. La balise ol, au contraire, concentre l'attention sur la séquence des éléments, en numérotant automatiquement chaque ligne. Regardons un exemple :
- Chignon
- Tarte
- Miche de pain
- Tarte
Sur l'écran du navigateur, ce code ressemblera à ceci :
- Chignon
- Tarte
- Miche de pain
- Tarte
Si on remplace simplement la balise ul par la balise ol, on obtient une liste numérotée :
- Chignon
- Tarte
- Miche de pain
- Tarte
Maintenant, cela ressemble à ceci :
- Chignon
- Tarte
- Miche de pain
- Tarte
Personne n'interdit d'imbriquer une liste dans une autre, en formant des listes imbriquées avec des sous-listes :
- Scie
- Tournevis
- Droit
- Croix
- Percer
Outils:
Vous devez expérimenter un peu ces listes pour vous habituer à les utiliser. Il existe un autre type de liste, mais elle est rarement utilisée, je n'en parlerai donc pas maintenant. Peut-être dans un autre article.
Bien entendu, comme tout le reste, l’apparence de ces éléments peut être modifiée de manière méconnaissable à l’aide de CSS.
Rubriques
Bien entendu, les paragraphes aident à structurer les documents. Mais afin de diviser un texte volumineux en parties logiques plus petites, vous pouvez nommer chacune d'elles. Chaque partie peut contenir d'autres sous-parties, avec leurs propres titres de niveau inférieur, et ainsi de suite. Pour définir le titre, utilisez des balises
, où « x » est un nombre compris entre 1 et 6. Plus le nombre est élevé, plus le titre est bas. Autrement dit, le titre de niveau supérieur sera appelé h1 et le titre de niveau inférieur sera appelé h6. Par défaut, le texte de ces titres est affiché en gros caractères et en retrait. Ce texte est affiché sur toute la ligne, c'est-à-dire que les balises hx sont des balises de bloc. La balise h1 a la police la plus grande et la balise h6 a la police la plus petite. En règle générale, il y a une, au maximum deux balises h1 de niveau supérieur sur une page. À mesure que le niveau diminue, le nombre de balises augmente. Mais il est rare qu’un webmaster soit capable de fragmenter le texte au point de nécessiter des titres de niveau 5 ou 6. Même le niveau 4 est rarement utilisé. Moins de mots, plus d'action !
Voici un exemple de document HTML utilisant une liste de définitions :
Exemple de liste de définitions Classification des tempéraments humains typiques,
basésur les vues d'Hippocrate
L'affichage du document HTML donné dans le navigateur est illustré à la Fig. 2.5.
Riz. 2.5. Liste de définitions (ressemble à un groupe d'entrées dans un dictionnaire)
Type de listes
Et - .
Ces types de listes ont été initialement conçus pour être plus compacts que les listes à puces classiques. Selon les règles d'écriture des éléments de ces listes, il n'était pas autorisé d'y utiliser des éléments de bloc, ce qui signifie qu'il était impossible de mettre en œuvre l'imbrication de listes de ce type. Chaque élément de la liste était une ligne de texte.
Pour des listes comme
il était prévu d'introduire une limite sur la « longueur du texte d'un élément de liste (24 caractères). Une telle restriction nous permettrait de déduire des listes comme
sous une forme similaire à la sortie d'une liste de répertoires dans les systèmes d'exploitation UNIX et MS-DOS lors de l'utilisation de la touche /W (en plusieurs colonnes). De plus, les marqueurs n'étaient pas affichés pour les éléments de liste de ce type. Actuellement, tous ces plans n'ont pas été mis en œuvre, car l'utilisation ultérieure de listes de ce type n'est pas recommandée. Les versions modernes des navigateurs affichent les listes de ces types exactement de la même manière que les listes comme
- .
Listes imbriquées
Il arrive parfois que vous deviez inclure une liste entière du même type ou un autre dans un élément de liste d'un type. Cela créera des listes à plusieurs niveaux ou imbriquées. HTML permet l'imbrication arbitraire de différents types de listes, mais il faut être prudent lors de leur organisation.
Vous trouverez ci-dessous le code HTML d'un document avec des listes imbriquées, dont l'affichage est illustré à la Fig. 2.6. Dans cet exemple, chaque élément de la liste à puces contient sa propre liste numérotée.
Exemple de liste imbriquée Satellites de certaines planètes
- , les éléments au niveau du bloc peuvent être localisés. Il s'ensuit notamment que des listes de définitions peuvent être imbriquées.
-
P. exemple d'entrée :
- .
- .
Cette entrée détermine la numérotation de la liste commençant par la lettre latine majuscule « E ». Pour les autres types de numérotation, l'entrée START=5 définira la numérotation, respectivement, à partir du chiffre "5", du chiffre romain "V", etc.
La modification du type de numérotation de la liste et des valeurs numériques peut être effectuée pour n'importe quel élément de la liste. Étiqueter
- pour les listes numérotées, permet l'utilisation des paramètres TYPE et VALEUR. Le paramètre TYPE peut prendre les mêmes valeurs que pour la balise
Le paramètre COMPACT a la même signification que les listes à puces. Le paramètre TYPE est utilisé pour spécifier le type de numérotation des listes. Peut prendre les valeurs suivantes :
TYPE = A - définit des marqueurs sous forme de lettres latines majuscules ;
TYPE = a - définit des marqueurs sous forme de lettres latines minuscules ;
TYPE = I - définit des marqueurs sous la forme de grands chiffres romains ;
TYPE = i - définit des marqueurs sous la forme de petits chiffres romains ;
TYPE = 1 - définit des marqueurs sous forme de chiffres arabes.
La valeur par défaut est toujours TYPE = 1, c'est-à-dire une numérotation en chiffres arabes. Cela s'applique également aux listes numérotées imbriquées. Ici, contrairement aux listes à puces, les navigateurs par défaut ne rendent pas la numérotation différente selon les niveaux d'imbrication des listes. Notez qu'après le numéro de l'élément de la liste, il y a toujours un signe « point » supplémentaire.
Le paramètre TYPE avec les mêmes valeurs peut être utilisé pour spécifier le style de numérotation des é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
Les listes de ce type sont généralement une séquence ordonnée d'éléments individuels. La différence avec les listes à puces est que dans une liste numérotée, chaque élément est automatiquement précédé d'un numéro de série. Le type de numérotation dépend du navigateur et peut être défini par les paramètres des balises de liste. Sinon, la mise en œuvre de listes numérotées est très similaire à la mise en œuvre de listes à puces.
Balises
- Et
Pour créer une liste numérotée, 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.
Comme pour une liste à puces, chaque élément d'une liste numérotée doit commencer par la balise
- , qui pointent vers des éléments de liste individuels, fournissent des marqueurs d'éléments de liste standard.
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 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. L'utilisation de ce paramètre est donc inutile, 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 les dernières versions des 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
- .
Voici l’exemple le plus simple d’une liste sans style :
HTML
Examinons plusieurs façons de résoudre le problème ci-dessus.
Traditionnellement, une manière maladroite.
La manière traditionnelle de résoudre ce problème consiste à masquer les numéros de ligne automatiquement attribués par le navigateur. Dans ce cas, la propriété list-style: none; est utilisée. .
css
li( style de liste : aucun ; ) .num( couleur : blanc ; arrière-plan : #2980B9 ; affichage : bloc en ligne ; alignement du texte : centre ; marge : 5 px 10 px ; hauteur de ligne : 40 px ; largeur : 40 px ; hauteur : 40px)HTML
D'accord, cela semble redondant et rigide. Nous masquons les numéros de séquence attribués automatiquement et les remplaçons par des valeurs spécifiées manuellement, encombrons la mise en page, etc.
Voyons comment nous pouvons obtenir le même résultat sans encombrer la mise en page et en utilisant le pseudo-element::before et les propriétés CSS content , counter-increment , counter-reset .
Une manière belle et correcte.
Nous fournirons d’abord le code et la démo, puis nous découvrirons de quoi il s’agit.
css
ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); couleur: blanc; arrière-plan: #2980B9; display: inline-block; alignement du texte : marge : 5px 10px ; hauteur de la ligne : 40px ;HTML
Comme vous pouvez le constater, le code HTML reste propre et beau. Dans ce cas, tout le style des éléments de la liste est transféré en CSS.
Regardons point par point :
Plus de détails sur les compteurs CSS peuvent être trouvés dans
Bonjour, chers lecteurs ! Aujourd'hui, dans la continuité de la série d'articles de la section « HTML Basics », je souhaite vous présenter l'algorithme de création listes HTML avec l'aide tags ul et li (liste à puces), ol et li (liste numérotée), dl, dt, dd (liste de définitions).
Je vais maintenant continuer à vous présenter les balises HTML les plus couramment utilisées, qui sont utilisées pour créer des listes sur les pages d'un site Web. Si quelqu'un ne sait pas de quoi il s'agit, après les informations reçues ci-dessous, il comprendra sûrement immédiatement de quoi nous parlons, car cette forme de présentation du matériel est très courante.
Listes à puces HTML - balises ul et li
La liste à puces sera définie par la balise ul. Entre les balises ul d'ouverture et de fermeture se trouvent des éléments de liste dont le contenu doit, à son tour, être situé entre les balises li d'ouverture et de fermeture. Permettez-moi de noter tout de suite que la balise ul est appariée (présence d'une balise d'ouverture et de fermeture), et également au niveau du bloc, c'est-à-dire qu'elle forme un conteneur qui comprend des éléments (lignes) formés à chaque fois par la balise li. En conséquence, la balise li est appariée et en minuscules.
L'apparence par défaut d'un marqueur est un cercle plein. Cependant, vous pouvez modifier son apparence en utilisant l'attribut type, qui a les valeurs suivantes : disque, cercle, carré. La valeur du disque (qui détermine l'apparence du marqueur sous forme de cercle rempli) est la valeur par défaut. Autrement dit, si l'attribut type n'est pas spécifié, l'apparence du marqueur ressemblera à un cercle plein. Si nous ajoutons ces attributs à la balise ul, nous obtenons les options suivantes :
Naturellement, chaque marqueur d'un élément individuel d'une liste à puces peut avoir sa propre apparence en spécifiant les valeurs appropriées pour l'attribut type.
Listes HTML numérotées - balises ol et li
Voyons maintenant comment une liste numérotée est formée à l'aide de balises ol (une balise block et pair similaire à ul). La balise li est également utilisée ici comme balise qui définit les éléments d'une liste numérotée en HTML. Une liste numérotée est une collection d'éléments numérotés. Le type de numérotation est déterminé par l'attribut type, qui peut prendre les valeurs suivantes :
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Vous pouvez également fournir une liste numérotée où les éléments sont numérotés dans l'ordre inverse, par exemple : 3, 2, 1. Cela se fait en utilisant l'attribut reserve de la balise ol.
Il existe également la possibilité de démarrer une liste à puces à partir de n'importe quel nombre autre que 1. Pour ce faire, vous pouvez utiliser l'attribut start, et la valeur définie pour l'attribut type n'a pas d'importance. Voir un exemple d'utilisation de l'attribut name en conjonction avec différentes valeurs d'attribut de type (1 et I) :
Listes de définitions HTML - balises dl, dd, dt
Un autre type de liste HTML est une liste de définitions. Il est formé de la manière suivante. Le contenu de cette liste se situe entre les balises dl d'ouverture et de fermeture, qui forment le conteneur. La balise dt définit un terme et la balise dd décrit ce terme.
Comme vous pouvez le constater, le contenu de la balise dt, qui est un terme, est décalé vers la gauche, et le contenu de la balise dd, qui est la définition de ce terme, est écrit en italique. Tout cela est réalisé grâce à l'utilisation de différents styles CSS, dont nous parlerons certainement dans les prochaines publications.
À propos, les réalités modernes sont telles que le langage HTML ne peut être considéré isolément. Par conséquent, afin de ne pas manquer ces documents importants, abonnez-vous aux mises à jour du blog via le flux RSS ou par e-mail. Ceci conclut le sujet de l'article d'aujourd'hui ; si vous avez reçu les informations nécessaires, ne refusez pas d'utiliser les boutons des réseaux sociaux.
Bonjour, chers lecteurs du site blog. Aujourd'hui, dans le cadre de cette section, je souhaite parler d'une variété de listes HTML qui peuvent être créées sur la base de balises UL, OL, LI et DL spécialement conçues. Les paires UL et LI créent des listes à puces, les paires OL et LI créent des listes numérotées et les éléments DL, DT et DD créent des listes de définitions. Nous examinerons également brièvement les principes de création de structures imbriquées.
Je voudrais vous rappeler que nous avons déjà réussi à parler des bases de la mise en page moderne ainsi que de la mise en page tabulaire (). De plus, nous avons abordé les bases et appris jusqu’au bout.
Listes à puces basées sur les balises UL et LI
La balise UL est utilisée pour créer des listes à puces et la balise OL est utilisée pour créer des listes numérotées. Ces balises sont des balises par paires et bloquent, tout comme l'élément LI.
Entre les balises d'ouverture et de fermeture se trouvent des éléments de liste individuels, qui à leur tour sont enfermés dans un élément LI d'ouverture et de fermeture. Le navigateur ajoute des retraits d'une ligne en haut et en bas des listes HTML, similaires à l'indentation créée par une balise de paragraphe.
Regardons, par exemple, une option à puces qui pourrait ressembler à ceci :
Seuls les éléments LI peuvent se trouver à l'intérieur des balises UL d'ouverture et de fermeture, et dans ces éléments (clauses) eux-mêmes, vous pouvez insérer n'importe quel contenu (texte, images, titres, paragraphes, liens et même d'autres listes).
Ceux. L'UL sert uniquement à organiser une liste à puces (non ordonnée), et tout ce que vous voyez 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 spécifiant différentes valeurs pour l'attribut « Type ». Si le « Type » (contrôle de l'apparence des marqueurs) pour l'élément UL n'est pas spécifié, alors l'apparence par défaut du marqueur sera affichée (disque - un cercle rempli de la couleur du texte) :
Dans les exemples ci-dessus, nous avons spécifié l'attribut « Type » dans l'élément UL, en utilisant ce type de marqueur pour tous les éléments. Mais l'attribut « Type » peut également être spécifié pour chaque balise LI individuelle, définissant son propre type de marqueur pour cet élément.
Exemple de liste à puces avec différents types de puces pour chaque élément :
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, dans lesquelles les éléments LI seront à nouveau situés. OL et LI, comme je l'ai déjà mentionné, sont basés sur des blocs (c'est-à-dire qu'ils ont tendance à occuper tout l'espace dont ils disposent en largeur) et rien d'autre que les éléments LI ne peut être placé à l'intérieur d'OL.
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 créons (à puces ou numérotées). Dans le cas d'un élément numéroté, à gauche de chaque élément nous verrons non pas un marqueur, mais un numéro et un point derrière lui :
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 configurer le type de marqueur ou de spécifier quels chiffres ou lettres seront utilisés pour numéroter les éléments de la liste. Pour une liste numérotée, les paramètres de cet attribut peuvent prendre les valeurs suivantes :
Un exemple de liste numérotée avec différents types de numérotation pour chaque élément :
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:
Pour OL, vous pouvez également démarrer 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:
Concevoir l'apparence des listes en CSS (feuilles de style)
Mais, en règle générale, l'apparence des marqueurs n'est désormais pas définie via l'attribut TYPE, mais pour lequel les propriétés correspondantes sont spécifiées.
Ici, je vais simplement donner un exemple de divers marqueurs pour listes non numérotées, dont l'apparence est définie via un fichier séparé avec des feuilles de style en cascade.
Mais nous en reparlerons dans les articles suivants. C’est ainsi que se définit l’apparence des marqueurs UL sur ce blog. Les images sont utilisées comme marqueurs : pour les éléments normaux 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 est spécifié à l'aide de trois balises : DL, DT et DD. DL indique au navigateur que ce qui suit est une liste de définitions.
Généralement, ce type est utilisé (ou était destiné à être utilisé) pour écrire des entrées de dictionnaire composées de termes (enfermés dans des balises DT) et de leurs descriptions (enfermées dans des balises DD).
Si vous regardez l'exemple ci-dessus, vous remarquerez que l'élément DD (la description du terme) est décalé (de 40 pixels) par rapport à l'élément DT (le 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 des titres et des paragraphes ne peuvent pas être utilisés dans 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 éléments sont à nouveau enfermés dans la balise d'ouverture et de fermeture UL ou OL.
Attention, le LI de fermeture de l'élément dans lequel l'élément imbriqué sera créé n'est placé qu'après l'intégralité du code de la liste imbriquée (ceci est très important pour son affichage correct sur la page web). La liste imbriquée pourrait ressembler à ceci :
Bonne chance à vous ! A bientôt sur les pages du site blog
Vous pourriez ê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 pour le formulaire de listes déroulantes et de champs de texte 
Formulaires HTML pour le site - balises Form, Input et Select, Option, Textarea, Label et autres pour créer des éléments de formulaire Web 
Comment les couleurs sont définies dans le code HTML et CSS, sélection des nuances RVB dans les tableaux, sortie Yandex et autres programmes 
Intégrer et objet - Balises HTML pour afficher du contenu multimédia (vidéo, flash, audio) sur des pages Web 
Balises et attributs des rubriques 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 
Police (visage, taille et couleur), balises Blockquote et Pre - formatage de texte existant en HTML pur (aucun CSS utilisé) 
Iframe et Frame - que sont-ils et comment utiliser au mieux les frames en HTML 
Img - Balise HTML pour insérer une image (Src), aligner et enrouler le texte autour d'elle (align), ainsi que définir l'arrière-plan (background)
HTML fournit un ensemble spécial de balises pour présenter des informations sous forme de listes. Les listes sont l’une des formes de présentation de données les plus couramment utilisées, tant dans les documents électroniques qu’imprimés. Nous rencontrons des listes presque tous les jours - il peut s'agir d'une liste d'achats nécessaires dans un magasin, d'élèves dans une classe ou simplement de choses à faire. La possibilité d'organiser des structures de liste est disponible dans de nombreux éditeurs de texte, en particulier le puissant traitement de texte Microsoft Word dispose d'outils pratiques pour formater des listes de différents types (les possibilités de création de listes HTML à l'aide de Microsoft Word sont discutées au chapitre 8). Voici un certain nombre de cas pour lesquels l'utilisation de listes est assez pratique :
Notez que les points ci-dessus sont précisément organisés sous la forme d’une structure de liste.
HTML fournit les principaux types de listes suivants : liste à puces, numérotée et liste de définitions. Les balises suivantes sont utilisées pour implémenter des listes de différents types :
- ,
- ,
- ,
- , à l'aide duquel des listes de ce type sont organisées en documents HTML (UL - Unordered List, liste non ordonnée).
Dans une liste à puces, des caractères spéciaux appelés marqueurs de liste sont utilisés pour mettre en évidence ses éléments (ils sont 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.
Balises Et<LI >
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