CSS-列表样式属性的用法,表格样式属性border-collapse的使用

mac2022-06-30  22

CSS列表属性

list-style-type

list-style-type: disc; 用于设置列表项的标记

属性值说明disc圆,默认值circle圆环square正方形decimal十进制(有序列表)none无标记

对应的属性值有很多但是不常用;在实际开发中,多数情况是祛除列表项的标记

list-style-position

list-style-position: outside; 设置列表项标记相对于列表项内容的位置

属性值说明outside列表项的标记位于文本的左侧并放置在文本以外;默认值inside列表项目标记位于文本以内

示例:

属性值为 outsideul { border: 1px solid gray; } ul li { list-style-position: outside; border: 1px dashed red; } <ul> <li>li 列表</li> <li>li 列表</li> <li>li 列表</li> <li>li 列表</li> <li>li 列表</li> <li>li 列表</li> <li>li 列表</li> <li>li 列表</li> <li>li 列表</li> <li>li 列表</li> </ul> 属性值为 inside

list-style-image

list-style-image: url(./images/list.gif)将图片设置为列表项的标记;属性值为 url()(括号内为图片路径) 或 none

列表属性也可以统一设置

语法:

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

示例:

list-style: disc outside url(./images/list.gif);

当图片不存在时会自动使用设置的 list-style-type 属性

CSS 表格属性

border-collapse

border-collapse: collapse; 设置表格的边框线是否合并

属性值说明separate边框会被分开,默认值collapse边框会合并为一个单一的边框

示例:

边框不合并:

table { border: 1px solid gray; border-collapse: separate; } table tr td { border: 1px dashed red; } <table> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </table>

边框合并:

border-collapse: collapse;

border-spacing

border-spacing: 0 0; 设置相邻单元格的边框间的距离(仅用于“边框分离”模式);属性值可设置 1 到 2 个;属性值可以是像素(xp)、厘米(cm)等单位,不允许使用负值

如果定义一个属性值,则设置的时水平和垂直间距;如果定义两个属性值,则第一个设置水平间距,第二个设置垂直间距

最新回复(0)