HTML值设置表格、列表和滚动条样式

表格、列表和滚动条是在网页设计中比较常用的一些元素。在CSS中也提供了许多属性来进行表格、列表和滚动条样式的设置。通过这些样式的设置,可以让网页内容更加吸引浏览者的注意。

表格

在CSS中有一些样式是在表格里使用得比较多的,在此称为表格样式。这些样式可以实现合并边框、设置边框间距、表格标题的位置、设置表格布局等功能。

合并表格边框
在一个表格中同时存在着两种边框,一种是表格的表框,即表格最外面的四条边框;另一种是单元格的边框,每一个单元格都有自己的边框。在默认情况下,这两种不同的边框是分开来显示的,但在CSS的border-collapse属性的作用下,可以将这两种边框合并起来。border-collapse属性语法代码如下所示:

border-collapse : collapse | separate | inherit

以上代码的属性值所代表的含义为:
collapse:合并两种边框
separate:两种边框独立,该值为默认值。
inherit:继承父级样式。
如果在第二个表格中没有设置单元格间距(没用使用 cellspacing 属性),那么表格中的边框看上去就不会有"断层"的感觉了。

定义表格边框间距
在CSS中可以使用border-spacing属性来为表格设置边框间距,这一点与HTML中的table元素的cellspacing属性十分类似,border-spacing属性的语法代码为:

border-spacing : 宽度 | | inherit	

以上代码的属性值所代表的含义为:
宽度:边框间距的大小,可以为绝对单位值或相对单位值,但不能为负数。
inherit:继承父级样式。

1.只有当border-collapse属性值为separate,或没有设置border-collapse属性值时,border-spacing属性才会起效,否则该属性不会产生作用。
2.IE浏览器不支持border-spacing属性。

定义表格标题位置
在HTML里可以使用caption元素来设置表格的标题,而CSS中的caption-side属性可以用来设置标题放在表格的什么位置上。caption-side属性的语法代码如下所示:
caption-side : top | bottom | left | right | inherit
以下代码的属性值所代表的含义为:
top:标题位于表格顶部
bottom:标题位于表格底部。
left:标题位于表格左侧。
right:标题位于表格右侧。
inherit:继承父级样式。

使用caption元素的align属性与valign属性同样可以将表格标题放在表格的不同位置,不同的浏览器对这两个属性的支持情况也不完全一样。

设置表格布局
当一个单元格里对象的宽度超过单元格所定义的宽度时,在能换行时(如文字),浏览器会自动在宽度的最大处换行,在不能换行时(如图片或一个超长单词时),浏览器就会自动调整表格列的宽度,以容纳单元格中的对象。在CSS中以一个名为table-layou的属性可以设置是否保证单元格宽度不被改变。table-layou属性的语法代码为:

table-layout : auto | fixed | inherit

以上代码的属性值所代码的含义:
auto:当内容超过宽度时,如能自动换行则自动换行;如不能自动换行则增加宽度,该值为默认值。
fixed:无论内容是否超过宽度,都保持原来的宽度。
inherit:继承父级样式。

列表

在CSS中,有专门为列表设计的样式,使用这些样式可以用图片来代替列表前的标号,也可以用不同的方式来显示列表前的标号,还可以设置列表文字的排列方式已经间距。

设置列表符号样式
在HTML中的列表符号,只能是一个黑点或数字,显得十分单挑。使用CSS中的list-style-type属性可以用来指定符号的样式,其语法代码如下:

list-style-type : circle | disc | decimal | square | upper-roman | lower-roman | upper-alpha | lower-alpha | none | armenian | cjk-ideographic |georgian | hebrew |lower-greek | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

以上代码的属性值所代表的含义为:
circle:显示空心圆标号。
disc:默认值,显示实心圆标号。
decimal:显示阿拉伯数字
square:显示实心方块标号。
upper-roman:显示大写罗马数字
lower-roman:显示小写罗文字母。
upper-alpha:显示大写英文字母。
lower-alpha:显示小写英文字母。
none:不使用项目符号。
armenian:显示传统的亚美尼亚数字,目前主流浏览器都未支持该属性值。
cjk-ideographic:显示表意,目前主流浏览器都未支持该属性值。
georgian:显示乔治数字,目前主流浏览器都未支持该属性值。
hebrew:显示希伯莱数字,目前主流浏览器都未支持该属性值。
lower-greek:显示希腊小写字母,目前主流浏览器都未支持该属性值。
hiragana:显示日文平假名字符,目前主流浏览器都未支持该属性值。
hiragana-iroha:显示日文平假名序号,目前主流浏览器都未支持该属性值。
katakana:显示日文片假名字符,目前主流浏览器都未支持该属性值。
katakana-iroha:显示日文片假名序号,目前主流浏览器都未支持该属性值。
lower-latin:显示小写拉丁字母,目前主流浏览器都未支持该属性值。
upper-latin:显示大写拉丁字母,目前主流浏览器都未支持该属性值。
list-style-type 属性可以作用在<ol>、<ul>与<li>标签上。当使用list-style-type属性时,list-style-type属性获得优先显示权利。例如在有序列表ol上使用"list-style-typ:circle"属性,那么将会显示实心圆标号,而不是有序数字。

使用图片设置列表样式
除了采用系统提供的一些列表符号,在CSS中还可以利用list-style-image属性来设置图像作为列表符号,其语法是:

list-style-image:url(源文件地址)

在这里,为了使列表符号能够清晰显示,不要选择过大的图片。

列表符号显示位置
当在列表中使用了文本样式(如背景颜色)时,可以用list-style-position属性来指定符号的显示位置,即指定符号是放在文本块之外,还是放在文本块之内。list-style-position的语法代码为:

list-style-position : outside | inside

其中属性值说明如下:
outside:将列表符号放在文本块之外,该值为默认值。
inside:将列表符号放在文本块之内。
list-style-position属性可以作用在<ol>、<ul>与<li>标签上。

综合设置列表样式
在CSS中可以使用list-style属性来综合设置列表的所有样式。使用list-style为列表设置样式,可以不用输入list-style-image、list-style-type或list-style-position三个属性名,只要直接输入属性值来简化输入。list-style属性的语法代码如下:
list-style : list-style-image | list-style-type | list-style-position
在使用list-style设置列表样式时要注意以下两点:
1.当同时指定list-style-image和list-style-type时,list-style-image优先显示。除非list-style-image为none,或图片地址错误而无法显示。
2.当列表与列表项同时使用样式时,列表项的样式将优先显示。

与list-style-image、list-style-type和list-style-position样式相同,list-style-position样式可以作用在啊<ol>、<ul>与<li>标签上。

滚动条

滚动条一般都有立体效果,这个效果是通过边框的亮暗对比体现的,亮的边框好像是光照到的地方,暗的边框就好像是由于光线被遮挡出现的阴影效果。而利用CSS中的滚动条属性,可以用来设置滚动条的各种颜色效果,例如滚动条的边框颜色、表面效果等。

设置滚动条颜色
使用scrollbar-face-color属性可以设置滚动条的颜色,其语法代码如下所示:

scrollbar-face-color : 颜色

scrollbar-face-color 的属性值只有一个,就是颜色,其值可以是十六进制的RGB颜色、颜色的英文名或百分比颜色表示法。

设置滚动条亮边框颜色
使用scrollbar-highlight-color属性可以用来设置滚动条亮边框的颜色,也就是滚动条左边和上边边框的颜色,其语法代码如下所示:

scrollbar-highlight-color : 颜色

scrollbar-highlight-color 的属性值只有一个,就是颜色,其值可以是十六进制的RGB颜色、颜色的英文名或百分比颜色表示法。

设置滚动条暗边框颜色
可以设置亮边框颜色就可以设置暗边框颜色,也就是滚动条右边和下边边框的颜色。如果要设置暗边框的颜色,可以使用scrollbar-shadow-color属性。scrollbar-shadow-color的语法代码如下所示:
scrollbar-shadow-color : 颜色
scrollbar-shadow-color的属性值只有一个,就是颜色,其值可以是十六进制的RGB颜色、颜色的英文名或百分比颜色表示法。

设置滚动条方向箭头颜色
scrollbar-arrow-color属性可以用来设置滚动条的方向箭头的颜色。其语法代码如下所示:

scrollbar-arrow-color : 颜色

scrollbar-arrow-color的属性值只有一个,就是颜色,其值可以是十六进制的RGB颜色、颜色的英文名或百分比颜色表示法。

设置滚动条基准书
使用scrollbar-base-color 属性可以设置滚动条的基准色,设置了基准色后,滚动条的其他颜色都会根据该颜色自动调整。包含箭头颜色、边框颜色的,其语法是:

scrollbar-base-color:颜色值

这里的颜色值可以是十六进制的颜色吗,也可以是颜色的英文名称。