list-style 属性は CSS の短縮属性であり、1 つのステートメントですべてのリスト属性を設定するために使用されます。設定できるリスト属性は、リスト項目マークの種類、マーク位置、画像マークであり、いずれかの値を設定する必要はなく、例えば「list-style:circle inside;」などでもよい。
css list-style 属性を使用するにはどうすればよいですか?
list-style 属性は、1 つの宣言ですべてのリスト プロパティを設定します。
説明:
この属性は、他のすべてのリスト スタイル属性をカバーする短縮属性です。
list-item の表示ではすべての要素に適用されるため、通常の HTML や XHTML では li 要素にしか使用できませんが、実際にはどの要素にも適用でき、リストによって制御されます-item 要素を継承します。
次の属性を順番に設定できます: list-style-type、list-style-position、list-style-image。
# list-style-type: リスト項目タグのタイプを設定します。
# List-style-position: リスト項目マークを配置する場所を設定します。
# list-style-image: 画像を使用してリスト項目のマークアップを置き換えます。
いずれかの値を設定することはできません。たとえば、「list-style:circle inside;」も許可されます。設定されていないプロパティには、デフォルト値が使用されます。
注: すべてのブラウザは list-style 属性をサポートしています。
#CSS リスト スタイル属性の使用例
例 1: さまざまなリスト項目タグ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul.a {list-style:circle;}
ul.b {list-style:square;}
ol.c {list-style:upper-roman;}
ol.d {list-style:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>レンダリング:
例 2: 指定されたリスト項目マークの画像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul
{
list-style:url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>レンダリング:
以上がCSS list-style属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
