CSS リストのスタイル

以前 HTML の章で学習しました:

1. 順序なしリスト - リスト項目は特別なグラフィック (小さな黒い点、小さなボックスなど) でマークされます

2. 順序付きリスト - リスト項目は番号または記号でマークされます。文字

CSSのリストを見てみましょう。

CSSのulスタイルとliスタイルの詳しい説明

ulリストとliリストは、CSSを使用してページをレイアウトするときによく使用される要素です。 CSS には、リストのパフォーマンスを特に制御する属性として、list-style-type 属性、list-style-image 属性、list-style-position 属性、list-style 属性などがあります。

1. List-style-type 属性

list-style-type 属性は、li リストの箇条書き、つまりリストの前の変更を定義するために使用されます。 list-style-type 属性は継承可能な属性です。構文構造は次のとおりです: (一般的に使用される属性値をいくつかリストします)

List-style-type: none/disc/circle/square/demical/ lower-alpha/upper-alpha/ lower-roman/upper-roman

list- style-type 属性には多数の属性値があります。ここでは、より一般的に使用されるもののいくつかのみをリストします。

none: 箇条書きは使用しません。ディスク：実線の円。円：中空の円。正方形: 実線の正方形。 demical: アラビア数字。 lower-alpha: 小文字の英字。 upper-alpha: 大文字の英字。 lower-roman: 小文字のローマ数字。 upper-roman: 大文字のローマ数字。

list-style-type属性を使用するサンプルコードは以下の通りです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title>
<style>
   li{list-style-type:square;}
</style>
</head>
<body>
<ul>
  <li>这里是列表内容</li>
  <li>这里是列表内容</li>
  <li>这里是列表内容</li>
</ul>
</body>
</html>

2. list-style-image属性

list-style-image属性は、箇条書きの代わりに写真を使用する。これは継承可能な属性でもあり、その構文構造は次のとおりです:

list-style-image:none/url

list-style-image 属性は 2 つの値を取ることができます:

none: 置換なしの画像。 url: 置き換える画像のパス。

コードを見てください:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title>
<style>
  li{list-style-image:url(http://php.cn/style/images/sqpurple.gif);}
</style>
</head>
<body>
<ul>  
  <li>这里是列表内容</li>  
  <li>这里是列表内容</li>  
  <li>这里是列表内容</li>
</ul>
</body>
</html>

3、list-style-position属性

list-style-position属性は、リスト内の箇条書きの表示位置を定義するために使用される属性です。これも継承可能な属性であり、構文構造は次のとおりです:

list-style-position: inside/outside

inside: 箇条書きはテキストの内側に配置されます。外側: 箇条書きはテキストの外側に配置されます。

list-style-position属性の使用例は以下の通りです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title>
<style>  
  li{list-style-type:square;list-style-position:outside;}
</style>
</head>
<body>
  <ul>
    <li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
        这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
        这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
  </ul>
</body>
</html>

IV. List-style属性

list-style属性はliスタイルを包括的に設定する属性でもあります。継承可能な属性です。構文構造は次のとおりです:

li-style:list-style-type/list-style-image/list-style-position

各値の位置は交換できます。例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title>
<style>  
  li{list-style:url(  inside;}
</style>
</head>
<body>
  <ul>   
    <li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
        这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
        这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
  </ul>
</body>
</html>

ブラウザ互換性ソリューション

また、すべてのブラウザで、次の例ではイメージタグが表示されます。

マージン: 0px;

}ul li{background-image: url(sqpurple.gif);background-repeat: no-repeat;

background-position: 0px 5px;

padding-left : 14px;

例の説明:

ul:

リストスタイルタイプをリスト項目削除マークなしに設定します

パディングとマージンを0pxに設定します(ブラウザ互換性)
ulのすべてのli:

URLを設定します画像を選択し、一度だけ表示されるように設定します (重複なし) 必要な場所に画像を配置します (左 0 ピクセル、上下 5 ピクセル)

padding-left 属性を使用してリストにテキストを配置します

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style> li{list-style-image:url(http://php.cn/style/images/sqpurple.gif);} </style> </head> <body> <ul> <li>这里是列表内容</li> <li>这里是列表内容</li> <li>这里是列表内容</li> </ul> </body> </html>

提出するリセットコード

自動運転