分析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('/i/eg_arrow.gif')
}
</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 サイトの他の関連記事を参照してください。
非常に多くの色のリンクApr 13, 2025 am 11:36 AM最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。
FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AMロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました
動く虹色の下線Apr 13, 2025 am 11:27 AMサンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません
新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう
リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AMページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています
Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AMReactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。 （「正しいと感じる」までファイルを移動するだけです笑）。真実
非アクティブユーザーの検出Apr 13, 2025 am 11:08 AMほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら
Wufoo ZapierApr 13, 2025 am 11:02 AMWufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
WebStorm Mac版
便利なJavaScript開発ツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
ドリームウィーバー CS6
ビジュアル Web 開発ツール
