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,
- Propriétés CSS
- La propriété de type liste-style
- Listes CSS: exemple de programme
- Valeurs de marqueur pourDans la propriété de position de style de liste
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 nombre | 1,4,3 |
| Décimal de début zéro | 0 avant le nombre réel | 01, 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érieur | alpha, gamma |
| Bas-latin | Le marqueur est en bas-latin | a B c d |
| Latin supérieur | Le marqueur est en latin supérieur | A B C D |
Continuez avec cet article sur les listes CSS
Listes CSS: exemple de programme
- Java
- Python
- Angulaire
- Java
- Python
- Angulaire
- Java
- Python
- Angulaire
- Java
- Python
- Angulaire
- Java
- Python
- Angulaire
Production
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
- Mathématiques
- Science sociale
- La physique
- Mathématiques
- Science sociale
- 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.