CSS中列表样式的简介

最新推荐文章于 2024-06-11 16:06:12 发布

我是大头鸟

最新推荐文章于 2024-06-11 16:06:12 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： CSS列表样式

本文链接：https://blog.csdn.net/datouniao1/article/details/47816631

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是CSS列表样式：

所谓的CSS列表样式，肯定和列表有关，但是列表我们要清楚地是，列表可以分为有序列表和无序列表。于是我们的列表样式又可以分为三种类型，第一是设置不同形状的标记的无序列表，第二是设置不同的符号(此处的符号可能是数字，或者是罗马符号，或者是英文符号等等)，第三是用图像来作为列表项标记的列表。那么看到这个地方我们已经对列表样式应该有了内心独到的理解，其实我们理解就应该这样，我们心中想说的无意是，所谓的列表样式原来就是对文本前面的标记的表示方法，对啊，就是这样，你理解的那样。当然如果你不清楚我理解的对不对啊，我们通过例子来为大家说一下列表样式的使用，顺便增强一下理解。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ol.a{
list-style-position:inside;

/*列表项标记的位置，有outside，和inside两个值。通过明察秋毫，俺已经将这两个值之间的差别看看出来了，其实这个位置的设置在当标记项为图像的时候，差别是很明显的，特别的当图形比较大的时候，inside可将图片完全的显示作为一个标记，但是outside是不同的，他似乎有严格的长度设置，但是高度是图像的高度，因此当我们使用list-style-position常常是和list-style=image一起使用，并且我们使用list-style-image的时候也要注意的是图像的大小一定要合适，否则作出来的列表项样式人类欣赏不了，只能拿到动物园区使用了，哈哈。*/
}
ol li.b
{
list-style-type: lower-alpha;

/*虽然我们这个着一篇文章主要是对列表项的样式属性进行介绍，但是很抱歉，转移一下话题。我们对列表属性进行设置的时候，大括号的外边写什么，这个地方写的是ol li.b我们知道有序列表定义的时候是使用的ol ，但是标签里面的每一项用的是li进行定义，也就是说，我们的列表样式要看看是对全部的列表项都其作用，如果是这样，我们就可以像上看的位置设置那样仅仅写一个ol.a但是如果我们想做的是让列表项里面的每一项样式不同，我们就要使用ol li他们之间是空格，li.b然后在定义项的时候li里面使用class来引用这一项的定义。话题转移到正题来，在这个里面我们用到的是属性list-style-type是对列表项前面的标记进行设置，因为是有序列表，我们考虑应该从符号这个角度来考虑lower-alpha是表示的小写的字母，当然聪明的我们也可以想到大写字母的是upper-alpha，还可以用数字decimal

lower-roman小写的罗马字符，upper-roman大写的罗马字符，这是有序列表前面的标记项常用到的值，但是对于无序列表我们可以让none没有标记，circle空心的圆标记，square实心的方块，这些可以作为这个属性的值，看到这里

其实你已经学到了两个知识，点，算上上面的属性，你学到了三个，也许你会问还有其他的属性吗，有list-style-position*/
}
ol li.c
{
list-style-image: url(../pic/123.jpg);

/*这个地方我们仅仅看看这个属性的属性的值是一个url*/
}
ul{
list-style: inside url(../pic/124.gif);
}
</style>
<title></title>
</head>
<body>
<h1 align="center">傻逼的共性</h1>
<ol class="a">
<li>爱说大话</li>
<li class="b">不做事实</li>
<li class="c">爱幻想</li>
</ol>
<ul>
<li>无序的，但是应该使用图画作为标记</li>
</ul>
</body>
</html>

上面这个例子可以说集做人，集知识点于一身。也许对于我们这些菜鸟来说，这个例子刚开始看的时候并没有理解，没关系，我们一点一点的来分析。首先我们应该知道的是设置列表的样式的时候，我们应该知道通过什么来设置样式，也就是说我们要打敌人，我们的武器是什么。你可以说是CSS，当然很正确，但是我相信能看到这个地方的，傻瓜也都知道是通过CSS语句来实现对列表样式的设置，如果你不知道，那么就当我啥也没说。CSS语句是不是太笼统了，应该说我们是通过属性，列表属性来对列表样式进行设置。也就是我们应该知道列表属性有什么，然后对列表属性进行赋值，也就是实现了对列表样式的设置。我们来看一下列表属性:list-style-type:列表标记项的类型

list-style-position标记项的位置，list-style-image：将图像设置为列表项标志，list-style：属性的简写，用于将所有的

列表属性设置在一个声明中。看到这个地方，我们在去看看在例子中对这些属性的分析，你就会知道了。列表的样式我们的设置也就是通过对列表属性的设置俩实现，记住列表的属性，然后对应的属性所对应的值。