微构网络

聊聊不是特别常用的CSS列表属性,细节上也许你用得着

2015-02-28 16:47 栏目:实用知识 查看(6,771)

这个世界上很多东西看似都是“多余”的,但我们又听说过“书到用时方恨少”,css也是一样,我想很多前端工程师在日常项目中使用到的css属性大多也是非常常规的,比如尺寸、边距、边框、定位等等,而有的属性却很少用到,当然这里要说的列表属性列表属性也是如此。

在HTML中,我们通常认为有三种列表标签,即ol、ul、dl。我们经常用到的当然是ul,其次就是dl,而有序列表ol几乎很少用到。最近在写一个文章内页样式,因为需求需要就需要用到了ol有序列表,结果发现一个小小的细节,让我意识到不太常用的属性我们应该也值得去注意,当然我自己这次做这个项目前就已经了解接下来我要说的(当然css有一些比较不常用的属性可能我自身也很少用到甚至从来没用到)。

3434

以上就是一个默认状态下(我们不定义ol的属性时),我们会发现两个问题,当然不能称之为错误,因为这样的样式就不能说不行,只是我觉得可能有的人会觉得别扭,特别是应用到我们中文列表中(也许有的属性本身就为英文而生,而考虑到其他情况于是诞生了更多属性吧,哈哈)。

1、序列都“跑”到模盒的外面去了,当然我可以用边距进行调整;

2、到序列位数不一致时就会出现“左不对齐”,而我们习惯的是“左对齐”,这点在我想到列表属性前,我没想到其他的CSS属性,也许有更好的吧。

这里我用的是list-style-position: inside;不看参考手册,我们大概就能从字面上理解就是一个关于列表序号风格的位置属性,而我选择的属性值大概就是处于“模盒内部”的。至于是不是这样,我们就来对照参考手册解释下几个常见列表属性。

2432

1、list-style

这个属性其实跟background属性一样,我自己通俗理解为“总属性”,也就是个综合属性,同类的还有border、font等等。因此list-style-type、list-style-position、list-style-image可以说是它的组成部分。也就是它是在一个声明中设置所有的列表属性,至于到底是什么,在下面分别讲下面的属性就知道了。其实它的写法就是下面三种属性值的组合,而且是没有先后顺序的。

ol { list-style:square inside url('img.gif'); }

这个代码其实跟下面的代码一样的效果

ol {
list-style-type:square;
list-style-position:inside;
list-style-image:url('img.gif');
}

2、list-style-type

这个属性就是指列表序号的类型,常用的属性值有none(无标记)、 disc( 默认,实心圆)、 circle( 空心圆)、square( 实心方块)、 decimal (数字),当然还有更多属性值,具体可以参考参考手册。

ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}

3、list-style-image

这个属性用于定义列表序号的前面的图片,而它的值一般只有三个,none(没有)、url(图片地址)、inherit(继承父级)。语法跟上述类似。

4、list-style-position

这个属性相对于前面的用的不是特别多,因为我们本身ol标签就用得不是特别多,就如前面所说它是用于设置列表项标记的放置位置。常用的属性值有inside(内部)、outside(左侧,默认值)、inherit(继承父级)。

就如前面所说,实际上我们日常是比较少用到这些属性的,因为我们很多时候一用到列表可能直接就是list-style:none,相当于禁用列表属性的默认值,然后通过其他的方式来做。但我相信,知道多一些总会更好,更何况有时候确实用得着的。

 

转载请注明出处:聊聊不是特别常用的CSS列表属性,细节上也许你用得着 - 微构网络
分享:

您可能遇到的问题?

搜索微构网络的干货:

值班:15574303608 业务:在线咨询 技术:在线咨询

电话:0731-83862683 售后:在线咨询 邮箱:server@csweigou.com

地址:长沙市五一西路锦绣中环1116(五一广场平和堂对面)