1 设置元素的颜色和透明度
属性 | 说明 | 值 |
---|---|---|
color | 设置元素的前景色 | <颜色> |
opacity | 设置颜色的透明度 | <数值> |
例子:使用color属性
color: rgba(255, 255, 255, 0.7);
color: red;
例子:使用opacity属性
opacity: 0.4;
2 设置表格样式
属性 | 说明 | 值 |
---|---|---|
border-collapse | 设置相邻单元格的边框处理样式 | collapse separate |
border-spacing | 设置相邻单元格边框的间距 | 1~2个长度值 |
caption-side | 设置表格标题的位置 | top bottom |
empty-cells | 设置空单元格是否显示边框 | hide show |
table-layout | 指定表格的布局样式 | auto fixed |
2.1 合井表格边框
/*collapse值告诉浏览器不要为相邻元素绘制两个边框*/
border-collapse: collapse;
2.2 配置独立边框
/*先使用border-collapse设置为separate*/
border-collapse: separate;
/*然后使用border-spacing为边框设置间距*/
border-spacing: 10px;
2.3 处理空单元格
/*
设置为show会显示空单元格边框。
设置为hide会隐藏空单元格边框。
*/
empty-cells: hide;
2.4 设置标题的位置
/*
设置为top标题在上部
设置为bottom标题在下部
*/
caption-side: bottom;
2.5 指定表格布局
/*
设置为auto为自动改变表格大小
设置为fixed为使用width指定表格大小
*/
table-layout: fixed;
width: 100%;
3 设置列表样式
属性 | 说明 | 值 |
---|---|---|
list-style-type | 指定列表中使用的标记的类型 | 参见3.1 |
list-style-image | 指定图像作为列表标记 | <图像> |
list-style-position | 指定标记相对于列表项目盒子的位置 | inside outside |
list-style | 设置所有列表特征的简写属性 | 见下面 |
list-style简写属性的格式如下所示:
list-style: <list-style-type> <list-style-position> <list-style-image>
3.1 设置列表标记类型
list-style -type属性的值:
值 | 说明 |
---|---|
none | 没有标记 |
box check circle diamond disc dash square | 使用指定形状的标记,注意并不是所有的浏览器都支持每一种形状 |
decimal | 使用十进制数字作为标记 |
binary | 使用二进制数作为标记 |
lower-alpha | 使用小写字母字符作为标记 |
upper-alpha | 使用大写字母字符作为标记 |
例子:
ol {
list-style-type: lower-alpha;
}
3.2 使用图像作为列表标记
ul {
list-style-image: url('图片路径');
}
3.3 设置列表标记的位置
list - style-position属性指定标记相对于li元素内容框的位置。
inside值:定义标记位于内容框内部。
outside值:定义标记位于内容框外部。
例子:
li.inside {
list-style-position: inside;
}
4 设置光标样式
cursor属性的值:auto、crosshair 、default、help 、move 、pointer 、progress 、text 、wait 、n-resize 、s-resize 、e-resize、w-resize 、ne-resize 、nw-resize 、se-resize 、sw-resize。
例子:
#banana {
cursor: progress;
}