从零开始学web开发之CSS-9.列表样式&10.表格样式

一、列表样式

1.定义列表项符号

语法:

list-style-type:属性值;

说明:
有序列表list-style-type取值如下

属性值 说明
decimal 默认值,数字1、2、3
lover-roman 小写罗马数字i,ii
upper-roman 大写罗马数字I,II,III
lower-alpha 小写英文字母a、b、c
upper-alpha 大写英文字母A、B、C
lower-greek 小写希腊字母αβγδεζη
upper-greek 大写希腊字母

无序列表list-style-type取值如下

属性值 说明
disc 默认值,实心圆
circle 空心圆
square 实心正方形

去除列表项符号:none

2.自定义列表项符号

语法:

list-style-image:url(图像地址);

说明:
图像地址可以是相对地址,也可以是绝对地址

二、表格样式

1.表格边框合并border-collapse

用于去除单元格之间的间隙,默认情况下表格边框会产生一定的空隙。
语法:

border-collapse:属性值;

说明:
border-collapse是表格独有的属性.取值如下:

属性值 说明
separate 边框分开,不合并,这是默认值
collapse 边框合并,如果相邻,则共用一个边框

2.表格边框间距border-spacing

语法:

border-spacing:像素值;

说明:

  • 该属性指定单元格边界之间的距离。当只指定了一个像素值时,这个值将作用于横向和纵向上的间距;
  • 当指定了两个length值时,第一个作用于横向间距,第二个作用于纵向间距。

3.表格标题位置caption-side

语法:

caption-side:属性值;

说明:

属性值 说明
top 默认值,标题在顶部
bottom 标题在底部

示例网页,右键可查看源码

网页链接

发布了92 篇原创文章 · 获赞 68 · 访问量 25万+

猜你喜欢

转载自blog.csdn.net/pigdreams/article/details/80045185