Type de style de liste CSS

Une feuille de style en cascade contient le morceau de code responsable de l'ajout des effets et des propriétés au contenu développé par HTML. HTML et CSS sont utilisés pour créer une page Web statique ou un site Web dynamique. CSS contient plusieurs effets, l'un d'eux est une propriété de style qui est appliquée à la liste de HTML. Cette propriété vise à améliorer les éléments de la liste, c'est-à-dire très probablement du texte, en ajoutant les effets sur les balles. Aujourd'hui, notre discussion concerne le type de style de la liste. Dans l'article, nous mentionnons quelques exemples pour styliser les balles de la liste uniquement.

Un code HTML contient deux pièces de base: et . La partie de tête contient la balise de titre et la balise si nous utilisons un CSS interne. La balise contient les balises de tout le contenu que nous voulons créer sur la page Web. La balise de liste est également écrite à l'intérieur de la balise corporelle.

De même, le code CSS est classé comme CSS en ligne, interne et externe. L'effet écrit avec la balise à l'intérieur de la balise de contenu est le CSS en ligne. Celui qui est écrit à l'intérieur de la section HTML Head est le CSS interne. Et le troisième, le CSS externe, est déclaré dans le dossier d'un autre éditeur de texte avec un «.Extension CSS ».

Qu'est-ce qu'une liste HTML?

Le langage de balisage hypertexte crée un contenu pour former un site Web, y compris du texte, des images, des tables, des formes, des paragraphes, etc. Le texte est le bloc de construction de n'importe quel site Web. Cela peut être écrit de plusieurs manières et une approche est la «liste» HTML. La liste est la démonstration verticale d'un texte avec ou sans balles. La liste HTML apparaît de la même manière que nous créons une liste manuelle. Une liste est divisée en catégories supplémentaires. Lorsque le texte est représenté avec des nombres, il est fait par une liste ordonnée

. Si la représentation passe par un symbole ou une forme, c'est une liste non ordonnée
. La syntaxe utilisée pour créer une liste est mentionnée comme suit:


• objet 1


• item2



La syntaxe de liste non ordonnée est donnée dans l'exemple précédent. Les premières balises d'ouverture et de clôture pour la liste sont déclarées. Ces étiquettes extérieures décident si la liste est commandée ou non ordonnée. À l'intérieur des deux balises, le

• La balise est utilisée pour ajouter les noms d'élément que nous voulons faire partie de la liste.

  Liste de la propriété de style

  La propriété de style CSS List est les effets qui sont appliqués aux balles de liste. Il existe plusieurs types de propriétés de style des listes. Certains d'entre eux sont expliqués ici. La syntaxe de base est écrite comme:

  Mettons en œuvre et expliquons le fonctionnement de cette propriété.

  Type de style de liste pour la liste non ordonnée

  Tout d'abord, nous appliquons certains effets aux balles de la liste non ordonnée. Ces balles sont des symboles et des formes. Par exemple, cercles, carrés, disques, etc.

  Valeur de la propriété: disque

  Nous créons une page Web simple dans laquelle une rubrique est donnée à l'intérieur de la partie du corps. Nous utilisons une balise de paragraphe pour écrire du texte. Ensuite, une liste non ordonnée est créée comme nous l'avons décrit précédemment. La même syntaxe suit. À l'intérieur de

  Tag, nous déclarons le nom de classe qui appartient au CSS interne. Tous les effets mentionnés à l'intérieur de la classe sont appliqués à cette liste ici:

  À l'intérieur de la balise, trois éléments de la liste sont déclarés. Fermez la liste et la balise extérieure. Tout cela est de la section corporelle du code HTML.

  Maintenant, nous dirigeons vers la section Head. À l'intérieur de la tête, nous donnons un titre à la page. Ensuite, la balise de style CSS interne est déclarée. À l'intérieur, une classe «sub», le nom qui est utilisé à l'intérieur de la balise de liste non ordonnée, est déclaré. Tous les effets sont appliqués à l'intérieur de cette classe.

  Les ID et les classes sont créés pour utiliser collectivement les effets que vous souhaitez appliquer. Ensuite, utilisez ces noms à l'intérieur des balises où nous voulons appliquer ces effets.

  .sub
  Type de style liste: disque;
  

  Le style de liste utilisé ici est un disque. Si nous n'utilisons pas cette propriété dans la création de la liste, les balles par défaut formées sont en forme de disque.

  D'autres effets sont dans la rubrique. La couleur de la police est ajoutée à la tête. En plus du corps, la couleur d'arrière-plan et la couleur de la police sont appliquées.

  Enregistrez le code dans l'éditeur de texte avec une extension HTML pour créer une page Web à exécuter dans le navigateur. En utilisant cette extension, vous verrez que le symbole du fichier d'éditeur de texte que vous avez enregistré est transformé en l'icône du navigateur. C'est l'indication qu'il s'agit d'une page Web.

  Vous verrez sur l'exécution que la page Web créée contient la liste des noms des sujets et ces éléments sont déclarés via les balles disques.

  Valeur de la propriété: cercle

  Après avoir utilisé la valeur de balle disque par défaut, nous utilisons une autre forme pour styliser une liste non ordonnée. Cette fois, la propriété Style contient la classe avec le type de cercle de style liste. Tandis que le reste du code, que la partie tête ou la section du corps soit la même. Ne faites que des modifications du type de style pour voir les effets fonctionnels.

  Type de style liste: cercle;

  Code CSS:	Sortir:

  Fermez la balise de style et exécutez le code dans le navigateur. Vous verrez que les balles disques remplies sont remplacées à travers les balles en forme de cercle.

  Type de style de liste pour la liste commandée

  Maintenant, nous utilisons les valeurs numériques et alphabétiques pour appliquer les effets sur les balles de la liste ordonnée.

  Valeur de la propriété: décimal

  Quant à la création de la liste commandée, nous utilisons toute valeur numérique. Celui qui est normalement utilisé dans le comptage manuel ou la numérotation est la notation décimale. Nous irons d'abord pour la naissance décimale. L'ensemble du code HTML est le même et le code CSS n'est diverti que par le nom de balle qui est appelé «décimal». L'effet de type de style de liste mentionné dans la classe CSS est la décimale.

  Type de style liste: décimal;

  Code CSS	Sortir:

  Lors de l'exécution, vous verrez que les balles sont passées d'un cercle aux chiffres décimaux.

  Valeur de la propriété: inférieur-grec
  La propriété Style de liste est nommée dans le bas-grec inférieur pour appliquer cet effet et modifier la propriété Style de la liste de la liste.

  Code CSS	Sortir:

  Valeur de la propriété: aucun

  Nous pouvons également masquer les balles de liste en utilisant les mots clés «Aucun» dans la propriété de type style de liste.

  Code CSS	Sortir

  Valeur de la propriété: Géorgie

  La dernière mais non le moindre, la valeur utilisée est la valeur «géorgienne» qui est ajoutée aux balles de la liste.

  Code CSS	Sortir

  Conclusion

  La propriété de style CSS List est l'effet qui est appliqué sur les balles de la liste si la liste est commandée ou non ordonnée. Nous avons commencé avec une simple introduction des langues HTML et CSS, y compris leur déclaration d'étiquettes. Ensuite, nous avons élaboré la structure des listes HTML avec leurs types. La propriété de type de style liste est élaborée et nous avons mis en œuvre quelques styles pour voir comment fonctionne cette propriété. Nous avons utilisé quelques exemples pour les listes commandées et non ordonnées séparément.