cssでliのスタイルを設定する方法

CSS で li スタイルを設定する方法: 1. list-style-type 属性を使用して li リストの箇条書きを定義します; 2. list-style-image 属性を使用して箇条書きの代わりに画像を使用します; 3 . リストを使用する - style 属性により、li スタイルを包括的に設定できます。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター。

推奨: css ビデオ チュートリアル

li タグのデフォルトのスタイルは、その前に小さなドットまたは数字です。リタグ？

CSS で li タグのスタイルを設定するにはどうすればよいですか?

ul リストと li リストは、CSS を使用してページをレイアウトするときによく使用される要素です。 CSS には、リストのパフォーマンスを特に制御する属性があり、一般的に使用される属性には、list-style-type 属性、list-style-image 属性、list-style-position 属性、list-style 属性などがあります。

1. List-style-type 属性

list-style-type 属性は、li リストの箇条書き、つまり、次の変更を定義するために使用されます。リストの先頭にあります。 list-style-type 属性は継承可能な属性です。その文法構造は次のとおりです: (一般的に使用される属性値をいくつかリストします)

list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

list-style-type 属性には多くの属性値があります。ここでは、より一般的なもののいくつかのみをリストします。中古のもの。

none: 箇条書きは使用しません。

ディスク: 黒丸。

circle: 中空の円。

正方形: 実線の正方形。

demical: アラビア数字。

lower-alpha: 小文字の英字。

upper-alpha: 大文字の英字。

lower-roman: 小文字のローマ数字。

upper-roman: 大文字のローマ数字。

list-style-type 属性を使用するサンプル コードは次のとおりです:

li{
    list-style-type:square;
}
<ul>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

2.List-style-image 属性

list -style-image 箇条書きの代わりに画像の使用を定義するために使用されるプロパティ。これは継承可能な属性でもあり、その構文構造は次のとおりです。

list-style-image:none/url

list-style-image 属性は 2 つの値を取ることができます。

none: 置換されるイメージはありません。

url: 置き換える画像のパス。

コードの一部を見てみましょう:

li{
    list-style-image:url(images/bg03.gif);
}
<ul>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

3. List-style-position 属性

list-style-position 属性は次の目的で使用されます。項目の定義 リスト内のシンボルの表示位置のプロパティ。これは継承可能な属性でもあり、構文構造は次のとおりです。

list-style-position:inside/outside

inside: 箇条書きはテキストの内側に配置されます。

outside: 箇条書きはテキストの外側に配置されます。

list-style-position 属性の使用例は次のとおりです。

li{
    list-style-type:square;
    list-style-position:outside;
}
<ul>
    <li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

属性値が内部に含まれるスタイルを見てみましょう。

li{
    list-style-type:square;
    list-style-position:inside;
}
<ul>
    <li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

4. リストスタイル属性

リストスタイル属性は、liスタイルを包括的に設定する属性であり、継承可能な属性でもあります。

li-style:list-style-type/list-style-image/list-style-position

各値の位置は交換できます。例:

li{
    list-style:url(images/bg03.gif) inside;
}
<ul>
    <li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
</ul>

以上がcssでliのスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。