Liste de la liste CSS

Une feuille de style en cascade est une langue utilisée pour améliorer le contenu actuel créé via la langue HTML. Les deux langues travaillent ensemble pour former une page Web. HTML s'intéresse à la création et CSS conçoit tous les éléments de HTML. HTML a de nombreux contenus qui aident à créer une page Web. Dans chacun d'eux, le texte est le contenu de base utilisé par chaque page Web pour afficher toute sorte d'informations. L'un des contenus utilisés pour afficher le texte est les listes. Dans cet article, nous parlerons des listes qui ont une propriété de texte et comment cette propriété fonctionne sur la liste.

Listes CSS:

La démonstration verticale des données HTML sous une forme ordonnée ou non ordonnée est représentée via un contenu HTML spécial appelé listes. Le contenu écrit dans la liste est mentionné avec les balles. Finalement, les listes sont divisées en deux types principaux: une liste ordonnée et non ordonnée. Si nous voulons donner la numérotation aux données, il s'agit d'une liste commandée

. Les données avec tout type de balle sans chiffres sont une liste non ordonnée
. Ces deux
et
sont seulement responsables de l'affichage du type de liste. La syntaxe simple utilisée pour créer une liste:


• données



C'est un extrait d'une page Web ayant une liste non ordonnée. Vous pouvez voir que toutes les données sont représentées formant une petite liste avec des balles qui montrent qu'il s'agit d'une liste non ordonnée.

Propriété et liste CSS INDENT:

Ceci est la propriété appliquée au contenu HTML, principalement sur le texte. Il est utilisé pour déplacer le texte de son point d'origine à un endroit spécifique. Cette propriété est utilisée pour demander l'attention de l'utilisateur sur un contenu spécifique. Vous avez peut-être vu certains sites Web avec un paragraphe à partir d'une distance par rapport à la rubrique, ce qui le rend plus important devant le spectateur. La syntaxe utilisée pour appliquer cette propriété est simple. Nous ajoutons uniquement un paramètre de longueur à cette propriété en pixels ou avec des unités en pourcentage.

Texte-indent: longueur;

Exemple 1:
Cet exemple traite de l'affichage d'une liste d'éléments générés comme une liste normale et également une deuxième liste qui contient des éléments déplacés de leur position d'origine. Voyons le code corporel HTML pour créer une liste.
Une rubrique est ajoutée à la page Web en utilisant

étiquette de tête. Ensuite, nous avons utilisé une liste ordonnée.



1. article


2. article



Cette liste commandée créera des chiffres de numérotation par défaut avec les éléments dans les balises de liste. Un autre titre est déclaré suivi à nouveau d'une liste ordonnée. Une classe de CSS est déclarée à l'intérieur de la seconde

.

Ce n'est que le nom de la classe CSS, il est déclaré dans la section tête du code HTML. Chaque fois que ce nom de classe est utilisé dans une balise, tous les filtres ou effets mentionnés dans cette classe dans l'instruction Style sont appliqués.

À l'intérieur de la tête, un titre est donné à la page. Une balise de style est utilisée pour appliquer les effets. Ce type de style est connu sous le nom de CSS interne.

Une classe personnalisée est déclarée. À l'intérieur de la description de la classe, nous n'avons pas utilisé directement la propriété Text-Indent. En fait, nous pouvons tirer les éléments de liste en utilisant la propriété de rembourrage dans n'importe quelle dimension. Ainsi, comme nous voulons que la liste soit affichée avec son contenu dans la bonne direction, nous utiliserons la propriété de rembourrage à gauche pour mettre le texte à partir de la position gauche vers la bonne direction.

La propriété de rembourrage est la distance du contenu HTML de la bordure spécifiée du contenu extérieur ou de la page HTML.

Fermez toutes les balises sur la tête. Enregistrez le fichier avec l'extension HTML pour créer une page Web dans le navigateur chaque fois que ce fichier est ouvert avec un navigateur. Et lorsque nous l'ouvrirons dans l'éditeur de texte, il affichera le code uniquement.

Vous verrez qu'une liste simple s'affiche sans aucun effet de retrait car nous n'avons pas appliqué le nom de la classe CSS. Mais la deuxième liste avec un titulaire personnalisé est traînée vers la bonne position. C'est à cause de la propriété de rembourrage.

Exemple 2:
Dans cet exemple, nous utilisons le même exemple mais avec différentes propriétés CSS pour mettre le texte dans la liste. À l'intérieur de la balise de style, la classe CSS a une propriété de marge. Cette marge est la distance du contenu de la frontière de la page. Dans ce cas, nous avons du texte HTML, donc le texte à l'intérieur de la liste sera déplacé en fonction de la valeur.

.CustoFustIndent
Marge-gauche: -15px;

Dans cet exemple, nous voulons que la liste soit avec la marge gauche. Donc, nous avons pris la valeur de la marge vers le côté gauche. La valeur est prise dans un signe négatif pour reculer. Si la distance a été prise avec un signe positif, la liste sera sur le côté droit de la page.

Ce style est à nouveau appliqué à la deuxième liste que nous avons créée avec une classe d'index personnalisée.

Maintenant, nous allons exécuter la page Web pour voir le résultat. Vous verrez que la liste ordonnée est bloquée sur le côté gauche de la page.

Exemple 3:
Cet exemple traite de l'utilisation d'une liste non ordonnée sur la page Web. À l'intérieur de la liste, nous avons pris 4 rangées d'articles. Dans cet exemple, nous n'utiliserons pas le style CSS via une classe. Nous n'appliquerons pas la propriété texte de retrait à toute la liste. La ligne unique de la liste sera effectuée via la propriété Text-Indent. Cela se fera en utilisant une autre propriété CSS qui est une propriété «premier de type».

Cette propriété traite de la sélection de la toute première occurrence d'un élément dans le même contenu HTML. Par exemple, cette propriété n'affectera que la première ligne de la ligne, sans mentionner le nom d'une liste ou de la classe à l'intérieur de la balise.

Lors de la rédaction de l'instruction Style dans la section Head du code, nous utiliserons le

1. Comme nous voulons appliquer l'effet sur le Li.
   Li: premier de type
   Texte-indent: 50px;
   Style de type liste: Star;
   

   Le premier élément sera déplacé vers la droite avec une distance spécifiée mentionnée ci-dessus. Et aussi, nous avons donné un numéro à cet élément pour la discrimination.

   Lors de l'exécution, vous observerez que le premier élément de la liste est déplacé dans la bonne direction et que la balle est également appelée numéro décimal.

   Conclusion

   Cet article vise à décrire l'objectif et l'utilisation de la propriété de retrait dans la liste du contenu HTML. Nous commençons par une brève explication des listes et de leurs types. La propriété d'empreinte peut être appliquée à l'un des types de liste. Après cela, nous avons utilisé trois exemples de base, notamment l'effet de rembourrage, la marge et la propriété à impact texte en utilisant la propriété CSS première de type. Tous ces exemples montrent l'indentation de toute la liste et une seule ligne de la liste également.