liste de style CSS (ul)
CSS rôle Propriétés de la liste est la suivante:
- Définir la liste élément différent est marqué comme une liste ordonnée
- Définir la liste élément différent est marqué comme une liste à puces
- Définir la liste image marqueur de l'article
liste
En HTML, il existe deux types de listes:
- Unordered liste - éléments de la liste sont marqués avec graphiques spéciaux (tels que des taches noires, petites boîtes, etc.)
- Liste ordonnée - éléments de la liste sont marqués par des chiffres ou des lettres
Avec CSS, vous pouvez lister le style plus loin, et peut faire un marqueur liste image de l'article.
Différents marqueurs liste d'articles
list-style-type attribut spécifie le type de marqueur d'élément de liste est ::
Exemples
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Essayez »
Certaines valeurs sont des listes à puces, et quelques-uns est une liste ordonnée.
Comme le marqueur liste image de l'article
Pour spécifier le marqueur liste image de l'article, utilisez la propriété list-style-image:
L'exemple ci-dessus montre pas la même dans tous les navigateurs, IE et Opera afficher les balises d'image que Firefox, Chrome et Safari un peu plus élevé.
Si vous voulez placer la même image du logo dans tous les navigateurs, vous devez utiliser une des solutions de compatibilité du navigateur, comme suit
Compatibilité du navigateur Solutions
Aussi dans tous les navigateurs, l'exemple suivant affichera la balise image:
Exemples
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Essayez »
Exemple expliqué:
- ul:
- Réglez le-style-type liste est de ne pas supprimer le marqueur d'élément de liste
- Réglage de rembourrage et de la marge 0px (compatibilité du navigateur)
- Tout ul li:
- Définissez l'URL de l'image, et réglé il apparaît qu'une seule fois (pas de répétition)
- Vous avez besoin de localiser la position de l'image (0px gauche et un 5px vertical)
- Avec attribut padding-left au texte dans la liste
Liste - propriété raccourcie
Vous pouvez spécifier une liste de toutes les propriétés en une seule propriété. Ceci est appelé un raccourci.
Utilisez la propriété des abréviations à la liste, une liste d'attributs de style sont définis comme suit:
Si vous utilisez la valeur de propriété raccourcie de l'ordre est:
- list-style-type
- list-style-position (pour les instructions, voir le tableau de l'attribut CSS suivant)
- list-style-image
Si ces valeurs sont manquantes un de l'ordre restant est encore spécifié, il n'a pas d'importance.
D'autres exemples
Tous différents marqueur d'élément de liste
Cet exemple montre tous les différents marqueurs liste CSS de l'article.
Tous Liste des Propriétés CSS
| propriété | description |
|---|---|
| list-style | propriété sténographie. Pour une liste de toutes les propriétés est fournie dans une déclaration |
| list-style-image | L'image est réglée à signer une liste d'éléments. |
| list-style-position | Réglez la position dans la liste du marqueur d'élément de liste. |
| list-style-type | Définissez le type d'élément de liste drapeau. |