Dotcpp  >  编程教程  >  CSS语法  >  CSS列表(list-style)

CSS列表(list-style)

点击打开在线编译器,边学边练

本篇将主要介绍列表的CSS样式编写,在学习之前,我们回忆一下HTML中的有序列表无序列表

举例:

   	<span>无序列表-我的爱好:</span>
    <ul>
        <li>咖啡</li>
        <li>牛奶</li>
        <li>果汁</li>
    </ul>
	<span>有序列表-成绩排行:</span>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>赵五</li>
    </ol>

运行结果如下:

有序列表和无序列表


css列表属性作用:

(1)设置不同的列表项标记为有序列表

(2)设置不同的列表项标记为无序列表

(3)设置列表项标记为图像

在html中,有两种类型的html列表:

(1)无序列表:列表项的标记使用特殊图形(如小黑点、小方框等)

(2)有序列表:列表项的标记使用数字或字母

(3)使用css,可以列出进一步的样式,并可用图像作列表项标记

列表-简写属性

在单个属性中可以指定所有的列表属性,这就是所谓的简写属性,使用缩写属性值的顺序是:

1. list-style-type

2. list-style-position

3. list-style-image

在简写属性时,如果上述值丢失一个,其余仍在指定的顺序,就没影响。


1. list-style-type无序列表样式

描述
none无标记
disc默认值,标记为实心圆
circle将标记设置为空心圆
square将标记设置为实心方块
decimal将标记设置为数字
decimal-leading-zero将标记设置为以 0 开头的数字标记,例如 01、02、03
lower-roman将标记设置为小写罗马数字,例如 i、ii、iii、iv、v
upper-roman将标记设置为大写罗马数字,例如 I、II、III、IV、V
lower-alpha将标记设置为小写英文字母,例如 a、b、c、d、e
upper-alpha将标记设置为大写英文字母,例如 A、B、C、D、E
lower-greek将标记设置为小写希腊字母,例如 α、β、γ、δ、ε
lower-latin将标记设置为小写拉丁字母,例如 a、b、c、d、e
upper-latin将标记设置为大写拉丁字母,例如 A、B、C、D、E
hebrew将标记设置为传统的希伯来编号
armenian将标记设置为传统的亚美尼亚编号
georgian将标记设置为传统的乔治亚编号
cjk-ideographic将标记设置为中文数字,例如 一、二、三、四、五
hiragana将标记设置为日文平假名字符,例如 あ、い、う、え、お
katakana将标记设置为日文片假名字符,例如 ア、イ、ウ、エ、オ
hiragana-iroha将标记设置为日文平假名序号
katakana-iroha将标记设置为日文片假名序号

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .ul-none {
            list-style-type: none;
        }
        .ul-circle {
            list-style-type: circle;
        }
        .ul-square {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ul>
        <li>篮球</li>
        <li>足球</li>
        <li>乒乓球</li>
    </ul>
    <ul class="ul-none">
        <li>篮球</li>
        <li>足球</li>
        <li>乒乓球</li>
    </ul>
    <ul class="ul-circle">
        <li>篮球</li>
        <li>足球</li>
        <li>乒乓球</li>
    </ul>
    <ul class="ul-square">
        <li>篮球</li>
        <li>足球</li>
        <li>乒乓球</li>
    </ul>
</body>
</html>

运行结果:

无序列表样式

举例:

<!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>姓名</li>
        <li>性别</li>
        <li>籍贯</li>
    </ul>
    <ol class="ol_one">
        <li>姓名</li>
        <li>性别</li>
        <li>籍贯</li>
    </ol>
    <ol class="ol_two">
        <li>姓名</li>
        <li>性别</li>
        <li>籍贯</li>
    </ol>
    <ol class="ol_three">
        <li>姓名</li>
        <li>性别</li>
        <li>籍贯</li>
    </ol>
</body>
</html>

运行结果:

list-style-type


2. list-style-position有序列表样式

描述
inside列表项前的标记放置在之后的文本以内,列表项中的文本会根据标记对齐
outside默认值,保持标记位于文本的左侧,列表项前的标记放置在文本以外,并且列表项中的文本不会根据标记对齐
inherit从父元素继承 list-style-position 属性的值

举例:

<!DOCTYPE html>
<html>
<head>
    <style>
        ol {
            list-style-type: lower-roman;
        }
        li {
            background: #ccc;
            margin-bottom: 2px;
        }
        .ol_one {
            list-style-position: inside;
        }
        .ol_two {
            list-style-position: outside;
        }
    </style>
</head>
<body>
    <ol class="ol_one">
        <li>姓名</li>
        <li>性别</li>
        <li>电话</li>
    </ol>
    <ol class="ol_two">
        <li>地址</li>
        <li>邮编</li>
        <li>邮件</li>
    </ol>
</body>
</html>

运行结果:

有序列表样式


3. list-style-image修改列表标记图像

描述
URL图像的路径
none默认值,不显示任何图像
inherit从父元素继承 list-style-image 属性的值


4. list-style

ist-style 属性是上述三个属性(list-style-type、list-style-position、list-style-image)的简写,使用 list-style 可以同时设置上面的三个属性,其语法格式如下:

list-style: list-style-type || list-style-position || list-style-image;

本文固定URL:https://www.dotcpp.com/course/1139

上一课:

CSS表格(table)

下一课:

CSS盒子模型

CSS教程
第一章 CSS简介
第二章 CSS语法
Dotcpp在线编译      (登录可减少运行等待时间)