CSS リストのスタイル
以前 HTML の章で學(xué)習(xí)しました:
1. 順序なしリスト - リスト項(xiàng)目は特別なグラフィック (小さな黒い點(diǎn)、小さなボックスなど) でマークされます
2. 順序付きリスト - リスト項(xiàng)目は番號(hào)または記號(hào)でマークされます。文字
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 屬性は継承可能な屬性です。構(gòu)文構(gòu)造は次のとおりです: (一般的に使用される屬性値をいくつかリストします)
List-style-type: none/disc/circle/square/demical/ lower-alpha/upper-alpha/ lower-roman/upper-roman
list- style-type 屬性には多數(shù)の屬性値があります。ここでは、より一般的に使用されるもののいくつかのみをリストします。
none: 箇條書きは使用しません。ディスク：実線の円。円：中空の円。正方形: 実線の正方形。 demical: アラビア數(shù)字。 lower-alpha: 小文字の英字。 upper-alpha: 大文字の英字。 lower-roman: 小文字のローマ數(shù)字。 upper-roman: 大文字のローマ數(shù)字。
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>這里是列表內(nèi)容</li>
<li>這里是列表內(nèi)容</li>
<li>這里是列表內(nèi)容</li>
</ul>
</body>
</html>2. list-style-image屬性
list-style-image屬性は、箇條書きの代わりに寫真を使用する。これは継承可能な屬性でもあり、その構(gòu)文構(gòu)造は次のとおりです:
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>這里是列表內(nèi)容</li>
<li>這里是列表內(nèi)容</li>
<li>這里是列表內(nèi)容</li>
</ul>
</body>
</html>3、list-style-position屬性
list-style-position屬性は、リスト內(nèi)の箇條書きの表示位置を定義するために使用される屬性です。これも継承可能な屬性であり、構(gòu)文構(gòu)造は次のとおりです:
list-style-position: inside/outside
inside: 箇條書きはテキストの內(nèi)側(cè)に配置されます。外側(cè): 箇條書きはテキストの外側(cè)に配置されます。
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的示例。請(qǐng)注意換行以后項(xiàng)目符號(hào)的位置。
這里是使用list-style-position屬性值為outside的示例。請(qǐng)注意換行以后項(xiàng)目符號(hào)的位置。
這里是使用list-style-position屬性值為outside的示例。請(qǐng)注意換行以后項(xiàng)目符號(hào)的位置。</li>
<li>這里是列表內(nèi)容</li>
<li>這里是列表內(nèi)容</li>
</ul>
</body>
</html>IV. List-style屬性
list-style屬性はliスタイルを包括的に設(shè)定する屬性でもあります。継承可能な屬性です。構(gòu)文構(gòu)造は次のとおりです:
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屬性的示例。請(qǐng)注意換行以后項(xiàng)目符號(hào)的位置。
這里是使用list-style屬性的示例。請(qǐng)注意換行以后項(xiàng)目符號(hào)的位置。
這里是使用list-style屬性的示例。請(qǐng)注意換行以后項(xiàng)目符號(hào)的位置。</li>
<li>這里是列表內(nèi)容</li>
</ul>
</body>
</html>ブラウザ互換性ソリューション
また、すべてのブラウザで、次の例ではイメージ タグが表示されます。
マージン: 0px;}ul li{background-image: url(sqpurple.gif);background-repeat: no-repeat;
background-position: 0px 5px;padding-left : 14px;
例の説明:
ul:
リストスタイルタイプをリスト項(xiàng)目削除マークなしに設(shè)定します
パディングとマージンを0pxに設(shè)定します(ブラウザ互換性)
ulのすべてのli:
URLを設(shè)定します畫像を選択し、一度だけ表示されるように設(shè)定します (重複なし) 必要な場(chǎng)所に畫像を配置します (左 0 ピクセル、上下 5 ピクセル)
padding-left 屬性を使用してリストにテキストを配置します
