CSS : list-style modifie l'attribut list pour contrôler le style de la balise li-tutoriel CSS-php.cn

CSS : list-style modifie l'attribut list pour contrôler le style de la balise li

黄舟

Libérer： 2017-06-29 09:34:14

original

2348 Les gens l'ont consulté

L'attribut

list_style est utilisé pour modifier les attributs de la list, list-style-type est utilisé pour définir le type d'élément de liste et list-style- position est utilisé pour définir Pour cet élément de liste, list-style-image est utilisé pour définir l'utilisation de l'image pour remplacer la marque de l'élément de liste

l'attribut list_style est utilisé pour modifier les attributs de la liste

Le format est le suivant :

list_style : type de marque d'élément de liste position de la marque d'élément de liste marque d'élément de liste

Vous pouvez également définir la liste ; marque d'élément séparément :

list-style-type est utilisé pour définir le type d'élément de liste :

La valeur par défaut est un disque qui est un cercle plein,

Valeurs communes : aucun

cercle cercle creux

carré carré plein

nombres décimaux

minuscules latins minuscules lettres latines a, b, c....

Lettres majuscules latines A, B, C....

list-style-position est utilisée pour définir la position de cet élément de liste :

La valeur par défaut à l'extérieur signifie en dehors de la balise li. Il s'agit d'ajouter une bordure à li : 1px rouge uni, vous pouvez voir la position de la marque.

à l'intérieur signifie que la marque est à l'intérieur de la balise li, ce qui est clairement visible lors de l'ajout d'une bordure.

list-style-image est utilisé pour définir l'utilisation d'images pour remplacer les balises d'éléments de liste :

Valeur par défaut : aucune

Valeur facultative : URL, le format est url ("adresse url ");

Exemple :

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul { 
border:1px solid red; 
} 
li{ 
border:1px solid red; 
list-style:disc outside url(news_list.gif); 
list-style-position:5px; 
} 
</style> 
</head> 
<ul> 
<li>你好</li> 
<li>我好</li> 
</ul> 
<body> 
</body> 
</html>

Copier après la connexion

Spécifie un "type de style de liste " attribut au cas où l'image ne serait pas disponible.

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!