关于css:CSS-列表样式

咱们晓得在 HTML 中列表能够分为无序列表、有序列表、定义列表。在网页中常常能够看到无序列表的应用，例如像导航栏菜单、新闻列表、商品分类、图片展现等，根本都是通过无序列表来实现的。

无序列表中每个列表项后面都会默认带一个圆点符号，然而个别咱们平时在网站上看到的列表款式，通常后面是没有圆点符号的，所以咱们要如何去掉这个默认的圆点符号呢？这些都能够通过 CSS 中的列表属性来实现。

本节要讲的 CSS 中的列表属性有上面四个：

属性	形容
list-sytle-type	设置列表项的标记的类型
list-style-position	设置列表项标记绝对于列表项内容的地位
list-style-image	将图片设置为列表项的标记，属性值为 url(‘ 图片门路 ’)
list-style	简写列表属性

list-sytle-type 属性用于设置列表项的标记的类型，和 HTML 中列表标签中的 type 属性相似。

罕用值属性值如下所示：

属性	形容
none	无标记符号
disc	默认值，实心圆
circle	空心圆
square	实心正方形
decimal	数字

在理论利用中，上述几种属性值用的最多的还是 none，也就是用于去掉列表项的标记。

示例：

上面是一个没有增加任何款式的列表：

如果咱们心愿去掉列表后面默认的圆点，能够通过将 list-style-type 属性设置为 none 来实现：

ul{list-style-type: none;}

在浏览器中的演示成果：

list-style-image 属性用于应用图像来替换列表项的标记。但有一点须要留神，如果咱们设置了 list-style-image 属性，这个时候设置的 list-sytle-type 属性将不起作用。个别为了避免某些浏览器不反对 list-style-image 属性，咱们会设置一个 list-style-type 属性来代替。

示例：

例如咱们将下面列表项的标记设置为一个图像（图片大小为 50×50），属性值为图像门路：

ul{list-style-image: url(./flower.png);
}

在浏览器中的演示成果：

list-style-position 属性用于设置在何处搁置列表项标记。

属性值有如下所示：

属性值	形容
outside	默认值，放弃标记位于文本的左侧，列表我的项目标记搁置在文本以外，且盘绕文本不依据标记对齐
inside	示意列表我的项目标记搁置在文本内，且盘绕文本依据标记对齐

示例：

例如咱们能够设置两组不同的列表，别离将 list-style-position 属性设置为 outside 和 inside 来进行比照：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 学习 (9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <ul class="ul1">
            <li> 第一项 </li>
            <li> 第二项 </li>
            <li> 第三项 </li>
            <li> 第四项 </li>
            <li> 第五项 </li> 
        </ul>
        <ul class="ul2">
            <li> 第一项 </li>
            <li> 第二项 </li>
            <li> 第三项 </li>
            <li> 第四项 </li>
            <li> 第五项 </li> 
        </ul>
    </body>
</html>

CSS 款式代码：

.ul1{list-style-position: inside;}
.ul2{list-style-position: outside;}

在浏览器中的演示成果：

能够显著的看到，第一组列表的标记搁置在文本内，第二组列表的标记位于文本的左侧。

list-style 属性是一个简写属性，是上述几个列表属性的简写模式，用于把所有列表的属性设置在一个申明中。

属性设置程序为：list-style-type、list-style-position、list-style-image，也能够不设置其中某个属性，如果不设置则采纳默认值。

示例：

例如设置一个简写列表款式，其中 list-style-type 属性值为 square、list-style-position 属性值为 inside、list-style-image 属性值为 url(./flower.png)：

ul{list-style:square inside url(./flower.png);
}

在浏览器中的演示成果：

本节咱们讲了 CSS 中的几个列表款式，个别咱们用的最多的就是如何去掉列表项的默认标记，即 list-style-type:none。