Maison > Article > interface Web > CSS : explication détaillée de l'utilisation du style de liste de style liste
CSS : explication détaillée de l'utilisation du style de liste de style liste
- 黄舟original
- 2017-06-29 09:17:563978parcourir
AnalyseStyle de liste CSSStyle de liste d'attributs
Dans les pages de production quotidienne, l'attribut style de liste peut être couramment utilisé dans les objets d'élément de liste, mais il n'est pas utilisé en profondeur. Généralement, il est presque acceptable de réinitialiser la page entière en la définissant sur aucun. Peut-être que beaucoup de personnes, y compris moi-même, ne connaissent pas grand-chose des attributs plus détaillés de l'attribut list-style-type. plus probablement que les attributs list-style et Le concept d'attribut list-style-type est relativement vague. Il est maintenant nécessaire de l'évoquer et de le réapprendre, il est donc organisé comme suit.
Signification et utilisation
L'attribut raccourci de style liste définit tous les attributs de liste dans une seule instruction.
Description
Cet attribut est un attribut abrégé qui couvre tous les autres attributs de style de liste. Puisqu'il s'applique à tous les éléments avec display list-item, il ne peut être utilisé que sur les éléments li en HTML et XHTML normaux, mais en fait, il peut être appliqué à n'importe quel élément et est hérité par les éléments list-item.
peut définir les attributs suivants dans l'ordre :
•list-style-type
•list-style-position
•list- style -image
◆list-style
Définition : Un attribut raccourci utilisé pour définir tous les attributs d'une liste dans une seule déclaration. Cet attribut est un attribut raccourci qui couvre. Tous les autres attributs de style de liste sont affectés uniquement par les objets dont la valeur d'affichage est égale à list-item (tels que les objets li).
Connexe : list-style-imagelist-style-positionlist-style-type
◆list-style-image
Description : définit ou récupère le balisage de l'élément de liste en tant que image de l'objet. Si la valeur de cet attribut est nulle ou si l'image à l'adresse URL spécifiée ne peut pas être affichée, l'attribut list-style-type prendra effet.
Valeur :
aucune : valeur par défaut. Sans spécifier d'image
url(url) : Spécifiez une image en utilisant une adresse url absolue ou relative
Définissez l'image comme balise d'élément dans la liste :
ul
{
list-style-image:url("/i/arrow.gif");
list-style-type:square;
}Exemple
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>◆list-style-position
Description : définit ou récupère la manière dont les balises d'éléments de liste en tant qu'objets sont disposées en fonction du texte. Si le patch extérieur gauche d'un élément de liste (margin-left) est défini sur 0, la marque de l'élément de liste ne sera pas affichée. La marge gauche peut être définie sur un minimum de 30. Fonctionne uniquement sur les objets avec une valeur d'attribut d'affichage égale à élément de liste. Tel que l'objet Li.
Valeur :
extérieur : Valeur par défaut. La balise d'élément de liste est placée à l'extérieur du texte et le texte environnant n'est pas aligné en fonction de la balise
à l'intérieur : la balise d'élément de liste est placée à l'intérieur du texte et le texte environnant est aligné en fonction de la balise
. 🎜>
instance
ul
{
list-style-position:inside;
}Instance<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>Support des navigateursTous les navigateurs prennent en charge la liste Attribut -style-position. Remarque : La valeur de l'attribut « hériter » n'est prise en charge dans aucune version d'Internet Explorer (y compris IE8).
Exemple
<html>
<head>
<script type="text/javascript">
function changeList()
{
document.getElementById("ul1").style.listStyle="decimal inside";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
<input type="button" onclick="changeList()"
value="Change list style" />
</body>
</html>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!