CSS：list-styleリストスタイルの使い方を詳しく解説-CSSチュートリアル-php.cn

CSS：list-styleリストスタイルの使い方を詳しく解説

黄舟

リリース： 2017-06-29 09:17:56

オリジナル

3962 人が閲覧しました

分析CSS list styleAttribute list-style

日常の制作ページでは、属性 list-style が list-item オブジェクトで一般的に使用できますが、深くは使用されません。一般に、ページ全体を none に設定することでほぼ問題ありません。おそらく、私を含む多くの人は、list-style-type 属性の詳細についてはあまり知りません。属性リスト形式と属性リスト形式を知る - 型の概念は比較的曖昧なので、もう一度取り上げて学習する必要があるため、次のように整理します。

Yihe の使用法

list スタイルの短縮属性は、1 つのステートメントですべてのリスト属性を設定します。

説明
この属性は、他のすべてのリストスタイル属性をカバーする省略形の属性です。 list-item を表示するすべての要素に適用されるため、通常の HTML や XHTML では li 要素でしか使用できませんが、実際にはどの要素にも適用でき、list-item 要素にも継承されます。

次の属性を順番に設定できます:

•list-style-type
•list-style-position
•list-style-image

◆list-style

定義: で使用されます。 a 宣言内のリストのすべての属性を設定する短縮属性は、他のすべてのリストスタイル属性をカバーし、list-item と等しい表示値を持つオブジェクト (li オブジェクトなど) にのみ作用します。

関連: list-style-imagelist-style-positionlist-style-type

◆list-style-image

説明: リスト項目によってマークされた画像をオブジェクトとして設定または取得します。この属性の値が none の場合、または指定された URL アドレスの画像が表示できない場合は、list-style-type 属性が有効になります。

値:

none: デフォルト値。画像は指定しないでください

url(url): 絶対または相対URLアドレスで画像を指定します

リスト内の項目タグとして画像を設定します:

ul
  {
  list-style-image:url("/i/arrow.gif");
  list-style-type:square;
  }

ログイン後にコピー

例

<html>
<head>
<style type="text/css">
ul 
{
list-style-image: url(&#39;/i/eg_arrow.gif&#39;)
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>

ログイン後にコピー

◆list-style-position

説明: オブジェクトとしてのリスト項目タグがテキストに基づいてどのように配置されるかを設定または取得します。リスト項目の左マージン (margin-left) が 0 に設定されている場合、リスト項目マークは表示されません。 margin-left は最小 30 に設定できます。 list-item と等しい表示属性値を持つオブジェクトでのみ機能します。 li オブジェクトなど。

値:

外側: デフォルト値。リスト項目のマーカーはテキストの外側に配置され、周囲のテキストはマーカーに従って配置されません

inside: リスト項目のマーカーはテキストの内側に配置され、周囲のテキストはマーカーに従って配置されます

例
を指定しますリスト内のリスト項目マーカーの位置:

ul
  {
  list-style-position:inside;
  }

ログイン後にコピー

例

<html>
<head>
<style type="text/css">
ul.inside 
{
list-style-position: inside
}
ul.outside 
{
list-style-position: outside
}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>

ログイン後にコピー

ブラウザのサポート

すべてのブラウザは list-style-position 属性をサポートしています。

注: 属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。

◆list-style-type

説明: オブジェクトのリスト項目で使用されるデフォルトのタグを設定または取得します。この属性は、list-style-image 属性の値が none であるか、指定された URL アドレスの画像が表示できない場合に有効になります。

例
この例では、リストのタイプを変更します:

<html>
<head>
<script type="text/javascript">
function changeList()
  {
  document.getElementById("ul1").style.listStyle="decimal inside";
  }
</script>
</head>
<body>
<ul id="ul1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Water</li>
  <li>Soda</li>
</ul>
<input type="button" onclick="changeList()"
value="Change list style" />
</body>
</html>

ログイン後にコピー

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