CSSリストスタイルの説明例-CSSチュートリアル-php.cn

CSSリストスタイルの説明例

零下一度

リリース： 2017-05-16 11:16:06

オリジナル

2086 人が閲覧しました

CSSリスト

CSSリスト属性機能は次のとおりです:

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

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

マークされるリスト項目を設定します画像として

リスト

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

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

順序付きリスト - リスト項目は数字または文字でマークされます

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

さまざまなリスト項目マーカー

list-style-type 属性は、リスト項目マーカーのタイプを指定します。 :

Example

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;}

ログイン後にコピー

一部の値は順序なしリストであり、一部は順序付きリストです。

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

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

例

ul
{
list-style-image: url(&#39;sqpurple.gif&#39;);
}

ログイン後にコピー

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

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

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

すべてのブラウザで同様に、次の例が表示されます画像マークアップ:

例

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

ログイン後にコピー

例の説明:

ul:

リストのスタイルタイプをNoneに設定するリスト項目のマークアップを削除する

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

All in ul li:

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

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

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

List -省略属性

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

リストの短縮属性を使用すると、リストスタイル属性は次のように設定されます:

インスタンス

ul
{
list-style: square url("sqpurple.gif");
}

ログイン後にコピー

短縮属性値を使用する場合、順序は次のようになります:

list-style-type

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

list-style-image

上記の値の 1 つが欠落していても、残りが指定された順序のままである場合は、問題ありません。

【関連推奨事項】

特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード

CSS オンラインビデオチュートリアル

3. Jiijian (2) - CSS ビデオチュートリアル

以上がCSSリストスタイルの説明例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。