communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Styles de liste CSS

Style de liste CSS

Liste CSS

Les propriétés de la liste CSS fonctionnent comme suit :

Définir différents éléments de liste à marquer comme listes ordonnées

Définir différents éléments de liste marqués comme liste non ordonnée

Définir les éléments de liste marqués comme images

Liste

En HTML, il y en a deux types de listes :

Liste non ordonnée - les éléments de la liste sont marqués par des graphiques spéciaux (tels que des petits points noirs, des petites cases, etc.)

Liste ordonnée - les éléments de la liste sont marqués par des chiffres ou des les lettres

peuvent être stylisées davantage à l'aide de CSS et peuvent être marquées avec des images en tant qu'éléments de liste.

1． Symboles de liste

Les symboles de liste font référence aux symboles affichés devant chaque élément de la liste.

Le format de base est le suivant :

list-style-type : paramètre

Plage de valeurs du paramètre :

·disque : cercle

·cercle : cercle creux

·carré : carré

·décimal : nombre décimal

·minus-romain : chiffre romain minuscule

·supérieur - roman : chiffres romains majuscules

·alpha inférieur : lettres grecques minuscules

·alpha supérieur : lettres grecques majuscules

·aucun : aucun affichage de symbole

disque dans le paramètre est l'option par défaut. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
<ul class="b">
 <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
 <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ol>
<ol class="d">
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ol>
</body>
</html>

2． Symboles graphiques

Les symboles graphiques signifient que les puces de la liste originale peuvent être remplacées par des graphiques.

Le format de base est le suivant :

list-style-image : URL

URL est l'adresse du fichier graphique utilisé pour remplacer la puce, et vous pouvez utiliser une adresse relative ou une adresse absolue.

3． Position de la liste

Position de la liste décrit l'endroit où la liste est affichée.

Le format de base est le suivant :

list-style-position : paramètre

Plage de valeurs du paramètre :

·inside : affiché à l'intérieur du modèle BOX

·extérieur : affiché à l'extérieur du modèle BOX

Un nouveau concept apparaît ici : le modèle BOX. BOX fait référence à un conteneur qui contient des objets auxquels des règles de style sont appliquées. L'introduction détaillée sera donnée plus tard.

Image comme marqueur d'élément de liste

Pour spécifier une image comme marqueur d'élément de liste, utilisez l'attribut d'image de style de liste : 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul 
{
list-style-image:url('../style/images/sqpurple.gif');
}
</style>
</head>
<body>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
</body>
</html>

L'exemple ci-dessus fonctionne L'affichage dans les navigateurs n'est pas du tout le même, IE et Opera affichent des balises d'image un peu plus hautes que Firefox, Chrome et Safari.

Si vous souhaitez placer le même logo d'image dans tous les navigateurs, vous devez utiliser une solution de compatibilité des navigateurs. Le processus est le suivant 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
ul li
{
    background-image:url(../style/images/sqpurple.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;
}
</style>
</head>
<body>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
</body>
</html>

Exemple d'explication :

ul:

Définissez le type de style de liste sur aucune balise d'élément de liste supprimée

Définissez le remplissage et la marge sur 0px (compatibilité du navigateur)

Tous les li dans ul :

Définissez l'URL de l'image, et configurez-le pour qu'il ne soit affiché qu'une seule fois (pas de répétitions)

Positionnez l'image là où vous en avez besoin (0px à gauche et 5px en haut et en bas)

Placez le texte dans la liste avec le remplissage- Attribut gauche

Attribut abrégé de liste

Tous les attributs de liste peuvent être spécifiés dans un seul attribut. C'est ce qu'on appelle un attribut d'abréviation.

Si des valeurs de propriété abrégées sont utilisées, l'ordre est :

list-style-type

list-style-position (voir le tableau des propriétés CSS ci-dessous pour les instructions)

list-style-image

Peu importe si l'une des valeurs ci-dessus est manquante et que les autres sont toujours dans l'ordre spécifié.

Toutes les propriétés de la liste CSS

Propriétés 🎜>

attribut raccourci de style liste. Définissez tous les attributs utilisés pour les listes dans une instruction

List-Style-IMAGE pour définir l'image comme logo d'élément de liste.

list-style-position Définit la position de la marque de l'élément de liste dans la liste.                                                                                                                                                                                                                            .

Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>无序列表实例:</p> <ul class="a"> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <ul class="b"> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <p>有序列表实例:</p> <ol class="c"> <li>北京</li> <li>上海</li> <li>南京</li> </ol> <ol class="d"> <li>北京</li> <li>上海</li> <li>南京</li> </ol> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492413 joue