Que signifie le style de liste ? Explication détaillée des attributs de style de liste-tutoriel CSS-php.cn

Que signifie le style de liste ? Explication détaillée des attributs de style de liste

云罗郡主

Libérer： 2018-11-22 14:58:40

avant

43284 Les gens l'ont consulté

Le contenu de cet article porte sur ce que signifie le style de liste ? Une explication détaillée des attributs du style de liste, qui a une certaine valeur de référence. J'espère que cela vous sera utile.

1. La fonction et l'utilisation de list-style

list-style est de définir le style de la liste li. Par exemple, li est précédé de chiffres arabes, de points, de cercles pleins, d'images, de cercles creux, de lettres anglaises minuscules, de lettres anglaises majuscules, de chiffres arméniens traditionnels, etc.

2. Grammaire

1. Grammaire :

liste-style : liste-style-image || -style-type

Nous savons que la syntaxe HTML stipule que li doit être utilisé dans ul ou ol, donc pour ul ou ol, vous pouvez définir list-style-image pour introduire des images comme matériel de mise en page avant de li . Mais généralement, cette méthode n'est pas utilisée pour définir le matériau de l'image avant de li lors de la mise en page div css. Habituellement, l'image d'arrière-plan est définie directement sur li, ce qui est mieux compatible et plus facile à contrôler.

Nous utilisons l'attribut list-style-type, qui est principalement un style de liste, pour définir le style de devant par défaut de li.

2. Valeurs et explications du type de style de liste

Vous pouvez le tester vous-même pour voir les effets de différentes valeurs.

Paramètres :

Que signifie le style de liste ? Explication détaillée des attributs de style de liste

3. Pratiques générales de mise en page

Habituellement, lors de la mise en page d'une page Web, vous avez besoin pour démarrer CSS Supprimez le style de liste des trois listes ul ol li, également pour être compatible avec les principaux navigateurs, et annulez le style de liste par défaut de la balise list.

Annulez le code de style de liste de ul li ol :

ul,ol,li{list-style:none}

Copier après la connexion

Dans la page Web, placez un point devant la liste, puis définissez l'image d'arrière-plan d'arrière-plan via le li.

1. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ul li布局实例</title>
<style>
ul, ol, li {list-style: none;margin:0; padding:0;normal;font:14px/24px Arial}
</style>
</head>
<body>
<ul class="ab">
<li>php.cn-1</li>
<li>php.cn-2</li>
<li>php.cn-3</li>
</ul>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Que signifie le style de liste ? Explication détaillée des attributs de style de liste

Supprimez le li ci-dessus. Le style de liste par défaut de ul et ol est défini sur mragin et le padding sur 0, la taille de la police est de 14 px et la hauteur de ligne est de 24 px. Pourquoi ne pas utiliser le propre type de style de liste de Li pour définir l'effet de point ?

Cela est dû au fait qu'il existe certaines différences entre les différents navigateurs pour éviter différents effets de points et différentes distances par rapport à la gauche, de sorte que le style de style de liste est uniformément annulé et le style d'arrière-plan est réutilisé pour l'implémentation de la mise en page.

Ce qui précède est une introduction complète à ce que signifie le style de liste ? Une explication détaillée des attributs de style de liste. Si vous souhaitez en savoir plus sur le

Tutoriel CSS3, veuillez prêter attention à. le site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!