Comment utiliser au mieux les listes CSS?

Cet article vous présentera les listes CSS et, en cours de processus, vous aidera à comprendre comment le style de liste CSS fonctionne avec une démonstration.

Les listes CSS sont très utiles pour atteindre un ensemble de points numérotés ou à puces. Cet article vous montrera comment contrôler le type, la position, le style de en utilisant CSS. Les pointeurs suivants seront traités ici,



Alors commençons alors,



Listes CSS

Propriétés CSS

Il existe cinq propriétés CSS différentes dans lesquelles vous pouvez l'utiliser pour contrôler les listes:

  • List-style-type: Cela nous permet de contrôler la forme ou l'apparence du marqueur.
  • List-style-position: Il spécifie qu'un point long est nécessaire pour passer à une deuxième ligne ou doit s'aligner avec la première ligne ou commencer par le marqueur.
  • List-style-image: Il spécifie qu'une image pour le marqueur doit être ajoutée ou rendue plus attrayante plutôt que les puces ou les points numérotés.
  • Style de liste: il montre le raccourci vers les propriétés précédentes.
  • Décalage du marqueur: il spécifie la distance entre le marqueur et le texte entré dans la liste.

Ici, les listes couramment utilisées sont: type-style-liste et position-style-liste. Il est expliqué ci-dessous



importation sqoop depuis oracle vers hdfs

Continuez avec cet article sur les listes CSS

La propriété de type liste-style

Dans la propriété de type de style de liste, il vous permet de contrôler la forme et le style des puces ou du marqueur dans la casse de liste non ordonnée. Dans le cas d'une liste ordonnée, il s'agit de numéroter des caractères.

Tableau ci-dessous représentant pour les listes non ordonnées:



Valeur La description
Aucun N / A
Disque Il est rempli dans le cercle (par défaut)
Cercle C'est un cercle vide.
Carré Il est rempli dans le carré.

Tableau ci-dessous représentant pour les listes ordonnées:

Valeur La description Exemple
Décimal C'est un nombre1,4,3
Décimal de début zéro 0 avant le nombre réel01, 04, 03
Alpha inférieur Il s'agit de caractères alphanumériques minuscules.a B c d
Alpha supérieur Il s'agit de caractères alphanumériques majuscules.A B C D
Bas-romain Il s'agit de chiffres romains minuscules.i, ii, iii, iv, v
Romain supérieur Il s'agit de chiffres romains majuscules.I, II, III, IV, V
Bas-grec Le marqueur est en grec inférieuralpha, gamma
Bas-latin Le marqueur est en bas-latina B c d
Latin supérieur Le marqueur est en latin supérieurA B C D

Continuez avec cet article sur les listes CSS

Listes CSS: exemple de programme

 
  • Java
  • Python
  • Angulaire
  • Java
  • Python
  • Angulaire
  1. Java
  2. Python
  3. Angulaire
  1. Java
  2. Python
  3. Angulaire
  1. Java
  2. Python
  3. Angulaire

Production

Sortie - Listes CSS - Edureka

Continuez avec cet article sur les listes CSS

La propriété list-style-position

Valeurs de marqueur pour la propriété de position de style de liste In

Dans la propriété list-style-position, cela montre que le marqueur doit apparaître à l'intérieur ou à l'extérieur de la boîte contenant les puces. Cela peut avoir l'une des deux valeurs:

Valeur La description
Aucun N / A
À l'intérieur Dans ce cas, si le texte va dans la deuxième ligne, le texte sera enveloppé sous le marqueur.Il montrera également où le texte aurait commencé si les listes avaient un val à l'extérieur.
à l'extérieur Dans ce cas, si le texte entre dans la deuxième ligne, le texte sera aligné avec le début de la première ligne.

Exemple:

 
  • Mathématiques
  • Science sociale
  • La physique
  • Mathématiques
  • Science sociale
  • La physique
  1. Mathématiques
  2. Science sociale
  3. La physique
  1. Mathématiques
  2. Science sociale
  3. La physique

Production

Cela nous amène à la fin de cet article sur les listes CSS.

Découvrez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de l'article et nous vous recontacterons.