CSS リストのスタイル

CSS リストスタイル

CSS リスト

CSS リストプロパティは次のように機能します:

順序付きリストとしてマークされる異なるリスト項目を設定します

順序なしリストとしてマークされる異なるリスト項目を設定します

画像としてマークされています

リスト

HTML には、次の 2 種類のリストがあります:

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

順序付きリスト -リスト項目数字または文字でタグ付け

CSS を使用すると、リストをさらにスタイル設定したり、リスト項目として画像をマークしたりできます。

1．リスト記号

リスト記号とは、各リスト項目の前に表示される記号を指します。

基本的な形式は以下の通りです。

list-style-type:パラメータ

パラメータ値の範囲:

・disc:circle

・circle:中空円

・square:正方形

・decimal:10進数

・ lower-roman: 小文字のローマ数字

・ upper-roman: 大文字のローマ数字

・ lower-alpha: 小文字のギリシャ文字

・upper-alpha: 大文字のギリシャ文字

・none: 記号表示なし

パラメータ disc in はデフォルトのオプションです。

りー

2.図記号

図記号は、元のリストの箇条書きを図に置き換えることができることを意味します。

基本的な形式は次のとおりです:

list-style-image: URL

URL は箇条書きを置換するために使用されるグラフィックファイルのアドレスであり、相対アドレスまたは絶対アドレスを使用できます。

3．リストの位置

リストの位置は、リストが表示される場所を示します。

基本的な形式は以下の通りです。

list-style-position:パラメータ

パラメータ値の範囲:

・inside:BOXモデルの内側に表示

・outside:BOXモデルの外側に表示

新規に表示こちらコンセプト：BOXモデル。 BOXとは、スタイルルールが適用されるオブジェクトを格納するコンテナのことです。詳しくは後述します。

リスト項目のマークアップとしての画像

リスト項目のマークアップとして画像を指定するには、リストスタイルの画像属性を使用します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
<ul class="b">
 <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
 <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ol>
<ol class="d">
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ol>
</body>
</html>

上記の例はすべてのブラウザで同じように表示されるわけではありません。IE と Opera では画像マークアップがより適切に表示されます。 Firefox よりも、Chrome と Safari の方が少し高いです。

すべてのブラウザに同じ画像ロゴを配置したい場合は、ブラウザ互換性ソリューションを使用する必要があります。プロセスは次のとおりです

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul 
{
list-style-image:url('../style/images/sqpurple.gif');
}
</style>
</head>
<body>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
</body>
</html>

例の説明:

ul:

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

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

UL 内のすべての値:

画像の URL を設定し、一度だけ表示するように設定します (重複なし)

必要な場所に画像を配置します (左 0px)上下 5 ピクセル)

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

リスト略語属性

すべてのリスト属性を 1 つの属性で指定できます。これを略語属性と呼びます。

省略された属性値を使用する場合、順序は次のとおりです:

list-style-type

list-style-position (手順については、以下の CSS プロパティ表を参照してください)

list-style-image

上記の値が1 つがありません。残りは指定された順序のままですが、問題ありません。

すべての CSS リスト属性

Attributes 属性の略語。 1 つの宣言でリストのすべてのプロパティを設定するために使用されます

list-style-image ‐ ‐ to ‐ ‐ ‐‐‐ 画像をリスト項目フラグとして設定します。

list-style-position リスト内のリスト項目マークの位置を設定します。 LeList-Style-Type は、リスト項目のロゴのタイプを設定します。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>无序列表实例:</p> <ul class="a"> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <ul class="b"> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <p>有序列表实例:</p> <ol class="c"> <li>北京</li> <li>上海</li> <li>南京</li> </ol> <ol class="d"> <li>北京</li> <li>上海</li> <li>南京</li> </ol> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear