CSSスタイルリスト(UL)

次のようにCSS一覧プロパティの役割は次のとおりです。

  • 設定別のリスト項目は、順序付けられたリストとしてマークされています
  • 設定別のリスト項目は順不同リストとしてマークされています
  • 設定リスト項目のマーカー画像


リスト

HTMLでは、リストの2つの種類があります。

  • 順不同リスト - リスト項目は、特殊なグラフィックが付いている(など黒点、小箱、など)
  • リストを命じた - リスト項目は、数字や文字が付いています

CSSを使用すると、さらにスタイルを一覧表示することができ、画像リストアイテムマーカーを作ることができます。


別のリストアイテムマーカー

リストスタイル-type属性は、マーカーであるリスト項目のタイプを指定します::

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

»をお試しください

一部の値は、順不同リストで、一部は順序付きリストです。


画像リスト項目マーカーとして

画像リストアイテムマーカーを指定するには、list-style-imageプロパティを使用します。

ul
{
list-style-image: url('sqpurple.gif');
}

»をお試しください

上記の例では、すべてのブラウザで同じではない示し、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:
    • 設定のlist-style-typeは、リストアイテムマーカーを削除することはありません
    • 設定パディングとマージン0PX(ブラウザの互換性)
  • すべてのUL李:
    • 画像のURLを設定し、それは一度だけ表示されます設定(なしリピート)
    • あなたは、画像の位置(左0PXと垂直5pxの)を見つける必要があり
    • リスト内のテキストへのパディング左属性を持ちます

リスト - 速記プロパティ

あなたは、単一のプロパティ内のすべてのプロパティのリストを指定することができます。 これは簡略記述特性と呼ばれています。

リストに略語プロパティを使用し、次のように、スタイル属性のリストが設定されます。

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

»をお試しください

ご注文の速記プロパティ値を使用している場合です。

  • リストスタイル型
  • リストスタイルの位置(手順については、次のCSS属性テーブルを参照してください)
  • リストスタイルイメージ

これらの値がまだ指定されている残りのための1含まれていない場合、それは問題ではありません。


例

より多くの例

すべての異なったリストアイテムマーカー
この例では、すべての異なるCSSリストアイテムマーカーを示しています。


すべてのCSS一覧プロパティ

プロパティ 説明
リストスタイル 速記プロパティ。 すべてのプロパティのリストについては声明の中で提供されています
リストスタイルイメージ 画像は、アイテムのリストに署名するように設定されています。
リストスタイルの位置 リストリストアイテムマーカーで位置を設定します。
リストスタイル型 リストアイテムフラグのタイプを設定します。