list-style とはどういう意味ですか? list-style スタイル属性の詳細な説明-CSSチュートリアル-php.cn

list-style とはどういう意味ですか? list-style スタイル属性の詳細な説明

云罗郡主

リリース： 2018-11-22 14:58:40

転載

43323 人が閲覧しました

この記事の内容は、リストスタイルの意味について詳しく説明したもので、参考になれば幸いです。

1. list-style

list-style の機能と使用法は、リスト li のスタイルを設定することです。たとえば、li の前にはアラビア数字、ドット、黒丸、絵、中空丸、英小文字、英大文字、伝統的なアルメニア数字などが続きます。

2. 文法:

リストスタイル : リストスタイルリスト || -style-type

HTML 構文では、li は ul または ol 内で使用する必要があると規定されているため、ul または ol に対して list-style-image を設定して、li のフロントレイアウト素材として画像を導入できます。。ただし、通常、このメソッドは div css レイアウト中に li の前面画像マテリアルを設定するために使用されません。通常、背景画像は li に直接設定されるため、互換性が高く、制御が容易です。

li のデフォルトのフロントスタイルを設定するために、list-style-type 属性 (ほとんどが list-style) を使用します。

2. list-style-type の値と説明

自分でテストして、さまざまな値の効果を確認できます。

パラメータ:

list-style とはどういう意味ですか? list-style スタイル属性の詳細な説明 3. 一般的なレイアウトの実践

通常、Web ページをレイアウトするときは、次のことが必要です。 CSS を開始するには、主要なブラウザとの互換性を保つために、3 つのリスト ul ol li のリストスタイルスタイルを削除し、リストタグのデフォルトのリストスタイルをキャンセルします。

ul li ol のリストスタイルスタイルコードをキャンセルします:

ul,ol,li{list-style:none}

ログイン後にコピー

Web ページでは、リストの前にドットを設定し、次に背景の背景画像を設定する必要があります。リー。

1. コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ul li布局实例</title>
<style>
ul, ol, li {list-style: none;margin:0; padding:0;normal;font:14px/24px Arial}
</style>
</head>
<body>
<ul class="ab">
<li>php.cn-1</li>
<li>php.cn-2</li>
<li>php.cn-3</li>
</ul>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

##2.上記の li ul ol を削除します。 3 つのデフォルトのリストスタイルスタイルでは、mragin とパディングが 0、フォントサイズが 14 ピクセル、行の高さが 24 ピクセルに設定されます。 li 独自の list-style-type を使用してドット効果を設定してみてはいかがでしょうか?

list-style とはどういう意味ですか? list-style スタイル属性の詳細な説明これは、異なるドット効果や左からの距離の違いを避けるためにブラウザごとに一定の違いがあるため、リストスタイルのスタイルは一律にキャンセルされ、背景スタイルがレイアウトの実装に再利用されます。