ホームページ > 記事 > ウェブフロントエンド > CSS リスト スタイル プロパティの詳細な説明: list-style-type および list-style-image
CSS リスト スタイル プロパティの詳細な説明: list-style-type および list-style-image
- PHPzオリジナル
- 2023-10-26 12:15:502806ブラウズ
CSS リスト スタイル属性の詳細な説明: list-style-type および list-style-image
Web デザインでは、リストは頻繁に使用される要素です。一連の関連コンテンツを紹介します。リストの表示をより美しく、Web ページのテーマと一致させるために、CSS はリストのスタイルを制御するいくつかのプロパティを提供します。このうち、よく使用される属性には list-style-type と list-style-image があります。
- list-style-type 属性
list-style-type 属性は、リスト項目の前のマークアップのタイプを定義するために使用されます。次の値を指定できます。
- disc: 実線のドット (デフォルト値)
- circle: 中空のドット
- square: 実線の正方形
- none: タグなし
- decmal: 数値 (1 から増加)
- 小数点先行ゼロ: ゼロ埋め数値 (10 未満の数値は 0 から始まります)
- lower-roman: 小文字のローマ数字 (i、ii、iii)
- upper-roman: 大文字のローマ数字 (I、II、III)
- lower-alpha: 小文字 ( a、b 、c)
- 上アルファ: 大文字 (A、B、C)
- 下ギリシャ文字: 小文字のギリシャ文字
- 上ギリシャ文字: 大文字のギリシャ文字
たとえば、順序なしリストのリスト項目の前にあるマークを実線の四角形に変更したいとします。
ul {
list-style-type: square;
}- list-style-image 属性
list-style-image 属性を使用して、リスト項目の前のタグをカスタム イメージとして定義できます。 URL() 関数を使用して、画像ファイルをマークアップとして参照できます。サンプル コードは次のとおりです。
ul {
list-style-image: url("marker.png");
}上記のコードは、順序なしリストのリスト項目の前にあるマークを「marker.png」画像に変更します。
list-style-image 属性は list-style-type 属性の設定をオーバーライドすることに注意してください。つまり、list-style-type と list-style-image の両方が設定されている場合です。リスト項目の場合、list-style-image のみが有効になります。
- 例
ここでは、list-style-type プロパティと list-style-image プロパティを使用してリスト スタイルをカスタマイズする方法を示す完全な例を示します。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url("marker.png");
}
ol {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<h2>无序列表</h2>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ol>
</body>
</html> 上記のコードでは、順序なしリストのリスト項目の前のマークは、list-style-image 属性を通じて「marker.png」画像に設定されます。順序付きリストは list-style-type 属性に設定され、小文字のローマ数字に設定されます。 要約すると、list-style-type 属性と list-style-image 属性を使用すると、リスト項目のスタイルを簡単にカスタマイズして、Web ページ上のリストをよりパーソナライズされた美しいものにすることができます。上記は CSS リスト スタイル プロパティの詳細な分析です。お役に立てれば幸いです。 以上がCSS リスト スタイル プロパティの詳細な説明: list-style-type および list-style-imageの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。