↩ zhcn 编程语言 Web相关 JSON 非公開: CSS列表样式（列表样式）

CSS列表样式（列表样式）

网页上的很多地方都会用到列表，例如导航菜单、新闻列表和产品类别。除了使用 HTML 中的几个属性来轻松配置列表之外，CSS 还提供了几个专门用于配置和格式化列表的属性： Masu。

list-style-type：设置列表项之前标记的形状（外观）。
list-style-position：设置标记与日文版列表之间的距离。
list-style-image：使用图像代替默认标记。
list-style：统一设置以上三个属性。

1.列表样式类型

使用 list-style-type 属性来设置列表中每个列表项之前的标记的样式，该属性的可选值为：

价值	解释
没有任何	无品牌
光盘	用项目符号标记的默认值
圆圈	将标记设置为空心圆
正方形	将标记设置为实心正方形
小数	将标记设置为数字
小数点前导零	将标记设置为以 0 开头的数字标记（例如 01、02、03）。
小罗马语	在小写罗马数字上设置标记，例如 i、ii、iii、iv、v 等。
大罗马语	在大写罗马数字上设置标记，例如 I、II、III、IV、V 等。
低阿尔法	将标签设置为小写字母，例如 a、b、c、d、e
上阿尔法	将标记设置为大写字母，例如 A、B、C、D、E
低位希腊语	标记小写希腊字母，例如 α、β、γ、δ 和 ε
低位拉丁语	将标签设置为小写拉丁字母，例如 a、b、c、d、e
上拉丁语	将标签设置为大写拉丁字母（A、B、C、D、E 等）
希伯来语	将标记设置为传统的希伯来语编号
亚美尼亚语	将标记设置为传统的亚美尼亚编号
格鲁吉亚的	将标记设置为传统的格鲁吉亚号码
中日韩表意文字	将标记设置为日语数字，如 1、2、3、4、5 等。
平假名	设置平假名标签，例如 a、i、u、e、o 等。
片假名	为片假名字符设置标签，例如a、i、u、e、o等。
平假名色羽	将标记设置为日语平假名序数
片假名色羽	将标签设置为日语片假名序数

[示例] 使用 list-style-type 属性更改无序列表或有序列表的列表项之前的标签样式时：

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: circle;
        }
        ol {
            float: left;
        }
        .ol_one {
            list-style-type: lower-roman;
        }
        .ol_two {
            list-style-type: lower-greek;
        }
        .ol_three {
            list-style-type: georgian;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ul>
    <ol class="ol_one">
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ol>
    <ol class="ol_two">
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ol>
    <ol class="ol_three">
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ol>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_563”对齐=“aligncenter”宽度=“795”] 图：List-style-type属性demo

图：list-style-type属性演示[/caption]

2.列表样式位置

使用 list-style-position 属性设置标记应放置在列表项之前的位置。该属性的可选值为：

价值	解释
里面	列表项之前的标记将放置在其后面的文本内，列表项内的文本将根据标记放置
外部	默认情况下，将标记保留在文本左侧，列表项之前的标记位于文本之外，并且列表项内的文本不根据标记对齐
继承	从父元素继承list-style-position属性的值

[示例] 使用list-style-position属性设置列表项之前的标记位置。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ol {
            list-style-type: lower-roman; オーダリストの種類をローマ数字に設定する。
        }
        li {
            background: #ccc; リスト要素の背景色をグレーにする。
            margin-bottom: 2px; リスト要素間のマージンを2ピクセルにする。
        }
        .ol_one {
            list-style-position: inside; リスト要素のマーカーの位置をリスト内にする。
        }
        .ol_two {
            list-style-position: outside; リスト要素のマーカーの位置をリスト外にする。
        }
    </style>
</head>
<body>
    <ol class="ol_one"> <!-- クラス"ol_one"を指定したオーダリスト -->
        <li>CSSリンク</li>
        <li>CSS境界線</li>
        <li>CSSテーブル</li>
    </ol>
    <ol class="ol_two"> <!-- クラス"ol_two"を指定したオーダリスト -->
        <li>CSSリンク</li>
        <li>CSS境界線</li>
        <li>CSSテーブル</li>
    </ol>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_564”对齐=“aligncenter”宽度=“1024”]

图：List-style-position属性演示[/caption]

3.列表样式图像

列表项之前的标记可以通过 list-style-image 属性替换为图像。该属性的可选值为：

价值	解释
网址	图像路径
没有任何	默认不显示图像
继承	从父元素继承list-style-image属性的值

[示例] 使用 list-style-image 属性将列表项之前的标记替换为图像。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-image: url('./css_icon.png');
        }
    </style>
</head>
<body>
    <ul>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSSテーブル</li>
    </ul>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_565”对齐=“aligncenter”宽度=“396”]

图：list-style-image属性演示[/caption]

list-style 属性是上面列出的三个属性（list-style-type、list-style-position、list-style-image）的缩写。使用list-style，您可以同时设置上面列出的三个属性。语法格式如下：

列表样式：列表样式类型 || 列表样式位置 || 列表样式图像；

提示：使用list-style属性时，必须按照上面列出的顺序给参数赋值，只要遵循参数顺序，即使忽略一个或多个参数，如list-style: none; list-style: none; ， list-style:circle inside; ，忽略的参数设置为参数对应的默认值。

【示例】使用list-style属性统一设置列表项的标记样式、位置和图像：

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style: url('./css_icon.png');;
        }
        ol {
            list-style: lower-greek inside;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSSテーブル</li>
    </ul>
    <ol>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSSテーブル</li>
    </ol>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_566”对齐=“aligncenter”宽度=“417”] 图：列表样式属性demo

图：列表样式属性演示[/caption]

JSON

网页上的很多地方都会用到列表，例如导航菜单、新闻列表和产品类别。除了使用 HTML 中的几个属性来轻松配置列表之外，CSS 还提供了几个专门用于配置和格式化列表的属性： Masu。

list-style-type：设置列表项之前标记的形状（外观）。
list-style-position：设置标记与日文版列表之间的距离。
list-style-image：使用图像代替默认标记。
list-style：统一设置以上三个属性。

1.列表样式类型

使用 list-style-type 属性来设置列表中每个列表项之前的标记的样式，该属性的可选值为：

价值	解释
没有任何	无品牌
光盘	用项目符号标记的默认值
圆圈	将标记设置为空心圆
正方形	将标记设置为实心正方形
小数	将标记设置为数字
小数点前导零	将标记设置为以 0 开头的数字标记（例如 01、02、03）。
小罗马语	在小写罗马数字上设置标记，例如 i、ii、iii、iv、v 等。
大罗马语	在大写罗马数字上设置标记，例如 I、II、III、IV、V 等。
低阿尔法	将标签设置为小写字母，例如 a、b、c、d、e
上阿尔法	将标记设置为大写字母，例如 A、B、C、D、E
低位希腊语	标记小写希腊字母，例如 α、β、γ、δ 和 ε
低位拉丁语	将标签设置为小写拉丁字母，例如 a、b、c、d、e
上拉丁语	将标签设置为大写拉丁字母（A、B、C、D、E 等）
希伯来语	将标记设置为传统的希伯来语编号
亚美尼亚语	将标记设置为传统的亚美尼亚编号
格鲁吉亚的	将标记设置为传统的格鲁吉亚号码
中日韩表意文字	将标记设置为日语数字，如 1、2、3、4、5 等。
平假名	设置平假名标签，例如 a、i、u、e、o 等。
片假名	为片假名字符设置标签，例如a、i、u、e、o等。
平假名色羽	将标记设置为日语平假名序数
片假名色羽	将标签设置为日语片假名序数

[示例] 使用 list-style-type 属性更改无序列表或有序列表的列表项之前的标签样式时：

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: circle;
        }
        ol {
            float: left;
        }
        .ol_one {
            list-style-type: lower-roman;
        }
        .ol_two {
            list-style-type: lower-greek;
        }
        .ol_three {
            list-style-type: georgian;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ul>
    <ol class="ol_one">
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ol>
    <ol class="ol_two">
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ol>
    <ol class="ol_three">
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSS表</li>
    </ol>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_563”对齐=“aligncenter”宽度=“795”] 图：List-style-type属性demo

图：list-style-type属性演示[/caption]

2.列表样式位置

使用 list-style-position 属性设置标记应放置在列表项之前的位置。该属性的可选值为：

价值	解释
里面	列表项之前的标记将放置在其后面的文本内，列表项内的文本将根据标记放置
外部	默认情况下，将标记保留在文本左侧，列表项之前的标记位于文本之外，并且列表项内的文本不根据标记对齐
继承	从父元素继承list-style-position属性的值

[示例] 使用list-style-position属性设置列表项之前的标记位置。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ol {
            list-style-type: lower-roman; オーダリストの種類をローマ数字に設定する。
        }
        li {
            background: #ccc; リスト要素の背景色をグレーにする。
            margin-bottom: 2px; リスト要素間のマージンを2ピクセルにする。
        }
        .ol_one {
            list-style-position: inside; リスト要素のマーカーの位置をリスト内にする。
        }
        .ol_two {
            list-style-position: outside; リスト要素のマーカーの位置をリスト外にする。
        }
    </style>
</head>
<body>
    <ol class="ol_one"> <!-- クラス"ol_one"を指定したオーダリスト -->
        <li>CSSリンク</li>
        <li>CSS境界線</li>
        <li>CSSテーブル</li>
    </ol>
    <ol class="ol_two"> <!-- クラス"ol_two"を指定したオーダリスト -->
        <li>CSSリンク</li>
        <li>CSS境界線</li>
        <li>CSSテーブル</li>
    </ol>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_564”对齐=“aligncenter”宽度=“1024”]

图：List-style-position属性演示[/caption]

3.列表样式图像

列表项之前的标记可以通过 list-style-image 属性替换为图像。该属性的可选值为：

价值	解释
网址	图像路径
没有任何	默认不显示图像
继承	从父元素继承list-style-image属性的值

[示例] 使用 list-style-image 属性将列表项之前的标记替换为图像。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-image: url('./css_icon.png');
        }
    </style>
</head>
<body>
    <ul>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSSテーブル</li>
    </ul>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_565”对齐=“aligncenter”宽度=“396”]

图：list-style-image属性演示[/caption]

list-style 属性是上面列出的三个属性（list-style-type、list-style-position、list-style-image）的缩写。使用list-style，您可以同时设置上面列出的三个属性。语法格式如下：

列表样式：列表样式类型 || 列表样式位置 || 列表样式图像；

提示：使用list-style属性时，必须按照上面列出的顺序给参数赋值，只要遵循参数顺序，即使忽略一个或多个参数，如list-style: none; list-style: none; ， list-style:circle inside; ，忽略的参数设置为参数对应的默认值。

【示例】使用list-style属性统一设置列表项的标记样式、位置和图像：

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style: url('./css_icon.png');;
        }
        ol {
            list-style: lower-greek inside;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSSテーブル</li>
    </ul>
    <ol>
        <li>CSSリンク</li>
        <li>CSSボーダー</li>
        <li>CSSテーブル</li>
    </ol>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_566”对齐=“aligncenter”宽度=“417”] 图：列表样式属性demo

图：列表样式属性演示[/caption]

JSON