HTML5权威指南笔记：24-其他css属性和特性

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;
}