其他css属性和特性
下表列出了这些属性。
属 性
说 明
值
color
设置元素的前景色
<颜色>
opacity
设置颜色的透明度
<数值>
color属性设置元素的前景色。一般而言，元素对color属性之于它的意义可以有不同的解读，不过实际上，color属性一般用来设置文本的颜色。代码清单1展示了color属性的用法。
在这个例子中，我用了两次color属性：一次为span元素设置前景色和透明度，一次设置鼠标悬停在a元素上时链接的前景色。效果如下图所示。在印刷页面上可能不好辨认效果，要想看清楚可以在浏览器中显示示例HTML文档。
请注意，我在前面的例子中使用了rgba函数设置span元素的颜色。通过提供一个小于1的alpha值可以让文本变透明。从上图中可能看不出来，但实际上透明意味着文本允许一小部分背景色透过。可以使用opacity属性让整个元素和文本内容透明。这个属性的取值范围是0到1，前者代表完全透明，后者代表完全不透明。代码清单2展示了opacity属性的用法。
在这个例子中，我将span元素的opacity属性的值设为0.4。效果如下图所示，不过印在纸上效果可能不是太明显。
下表总结了为table元素设置独特样式的属性。
<code>border-collapse</code>
设置相邻单元格的边框处理样式
collapse separate
<code>border-spacing</code>
设置相邻单元格边框的间距
1 ~ 2个长度值
<code>caption-side</code>
设置表格标题的位置
top bottom
<code>empty-cells</code>
设置空单元格是否显示边框
hide show
<code>table-layout</code>
指定表格的布局样式
auto fixed
<code>border-collapse</code>用来控制table元素相邻单元格边框的样式，下图显示的是默认处理样式。
浏览器为表格绘制了一个边框，同时还为每个单元格绘制了边框，显示出来就是双边框。使用<code>border-collapse</code>属性可以改变这种效果，如代码清单3所示。
collapse值告诉浏览器不要为相邻元素绘制两个边框，效果如下图所示。
如果你一定要为<code>border-collapse</code>属性使用默认值separate，再加几个其他属性同样可以改善表格的外观。<code>border-spacing</code>属性定义相邻元素边框的间距，如代码清单4所示。
在这个例子中，我在边框之间指定了10像素的空白，效果如下图所示。
我们也可以告诉浏览器如何处理空单元格。默认情况下，即使单元格为空，浏览器也会为单元格设置独立的边框，就像代码清单4的图中显示的那样。可以使用<code>empty-cells</code>属性控制这种行为。<code>empty-cells</code>的默认值为show，创建的效果请回头看一下代码清单2的图。如果将该属性设置为hide，浏览器就不会绘制边框。代码清单24-5展示的是在前一个例子的style元素中添加<code>empty-cells</code>属性。
加上这个属性后的改变如下图所示。
如果为table元素添加caption，标题会显示在表格的顶部。不过，我们 可以使用<code>caption-side</code>属性改变这种默认行为。这个属性有两个值：top （默认值）和bottom。代码清单6展示了这个属性的用法。
代码清单6 使用<code>caption-side</code>属性
设置<code>caption-side</code>属性的效果如下图所示。
默认情况下，浏览器会根据表格每一列中最宽的单元格设置整列单元格的宽度。这意味着你不需要担心还要亲自解决单元格大小的问题，不过，这同时意味着在能够确定页面布局之前，浏览器必须获取所有的表格内容。
浏览器显示表格釆用的方法是由<code>table-layout</code>属性决定的，之前说过，它的默认值是auto。使用另一个值fixed可以禁用自动布局。在fixed模式中，表格的大小是由表格自身和单独每列的width值设定的。如果没有列宽值可用，浏览器会设置等距离的列宽。
因此，只要获取了一行的表格数据，浏览器就可以确定列宽。其他行内的数据会自动换行以适应列宽（可能导致行高比auto模式下略高）。
代码清单7展示了<code>table-layout</code>属性的用法。
在这个例子中，我设置了table元素的width属性占据100%的可用空间，将表格的布局样式设为fixed。我还改变了第二行中一个单元格的内容，以展示布局效果，如下图所示。
注意页面可用空间是如何在表格的五列之间均匀分配，以及第二行中的长标题如何断行来适应列宽的，断行导致了第二行比其他行高。
有许多属性是专门用来设置列表样式的，下表总结了这些属性。
<code>list-style-type</code>
指定列表中使用的标记的类型
<code>list-style-image</code>
指定图像作为列表标记
<图像>
<code>list-style-position</code>
指定标记相对于列表项目盒子的位置
inside outside
<code>list-style</code>
设置所有列表特征的简写属性
<code>list-style</code>简写属性的格式如下所示：
<code>list-style-type</code>属性用来设置标记（有时候也称为项目符号）的样式，这个属性允许的值如下表所示。
说明
none
没有标记
box check circle diamond disc dash square
使用指定形状的标记，注意并不是所有的浏览器都支持每一种形状
decimal
使用十进制数字作为标记
binary
使用二进制数作为标记
<code>lower-alpha</code>
使用小写字母字符作为标记
<code>upper-alpha</code>
使用大写字母字符作为标记
上表只是展示了一部分可用的样式。除了这里列岀的，列表标记还有很多样式，比如不同的字母字符、不同的符号样式，以及数字约定。www.w3.org/TR/css3-lists 列出了完整的列表样式。代码清单8展示了 <code>list-style-type</code>属性的用法。
可以将这个属性应用到整个列表或者单独的列表项。这个例子中两种方法我都用上了（不过，最终的结果可能让读者有点迷糊），效果请见下图。
<code>list-style-image</code>属性可以将图像用做列表标记。代码清单9展示了这个属性的用法。
应用这个属性后的效果如下图所示。
可以使用<code>list-style-position</code>属性指定标记相对于li元素内容框的位置。这个属性有两个值：inside和outside，前者定义标记位于内容框内部，后者定义标记位于内容框外部。代码清单10展示了<code>list-style-position</code>属性和它的值的用法。
我将li的项分成了两类，分别为它们的<code>list-style-position</code>属性应用了不同的值，效果如下图所示。
在上图中，我为所有的H元素设置了<code>background-color</code>属性，这样方便大家看清楚<code>list-style-position</code>属性不同值的效果。
cursor属性用来改变光标的外形。下表总结了该属性的值。
属性
cursor
设置光标的样式
auto、crosshair、default、help、move、pointer、progress、text、wait、<code>n-resize</code>、<code>s-resize</code>、<code>e-resize</code>、<code>w-resize</code>、<code>ne-resize</code>、<code>nw-resize</code>、<code>se-resize</code>、<code>sw-resize</code>
当鼠标划过被设置样式的元素时，cursor属性的不同取值告诉浏览器显示不同的光标形状。cursor属性的用法如代码清单11所示。
设置效果如下图所示。当我将鼠标移过span元素时，光标变成了Windows 7的等待光标，为了让你看清楚，我把等待光标放大了。