CSS リストスタイルプロパティの詳細な説明: list-style-type および list-style-image-CSSチュートリアル-php.cn

CSS リストスタイルプロパティの詳細な説明: list-style-type および list-style-image

PHPz

リリース： 2023-10-26 12:15:50

オリジナル

2817 人が閲覧しました

CSS 列表样式属性详解：list-style-type 和 list-style-image

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 サイトの他の関連記事を参照してください。