NeusoftInstituteofInformation教育创造学生价值NeusoftInstituteofInforma
tion教育创造学生价值王会wangh-wh@neusoft.com1.用CSS设置表格样式1.1表格标题的位置
CSS属性：caption-side该属性可以调整表格标题的位置为上、下、左、右，但是只在Firefox、iE8及以上有效，IE
8以下不支持。实例：11-1.html1.2表格的颜色CSS属性：color、background-color其中，co
lor属性设置表格中文字的颜色，通过background-color属性设置表格的背景颜色。实例：11-2.html这些设置与
文字本身的CSS设置完全相同，与页面背景的设置也完全一样。1.3表格的边框CSS属性：border、border-colla
pse在CSS中通过border属性设置表格边框，设置方法跟图片边框完全一样。特别要注意的是，当仅设置表格的边框时，单元格不会有
任何的边框。只有对单元格单独设置边框时，单元格才会有边框。另外，默认情况下，单元格的边框之间会有空隙，这时需要设置CSS属性bo
rder-collapse，使边框重叠在一起。实例：11-3.html2.CSS表格实例2.1隔行变色的表格采用隔行
变色的表格，使数据一目了然，不会感到凌乱。在CSS中实现隔行变色十分简单，只需要给偶数行的 | 标记都添加上相应的类型就可以了
。实例：11-4.html2.2鼠标经过时变色的表格如果数据行能够动态地根据鼠标来变色，会使页面充满生机，减少阅读疲劳。
对于Firefox浏览器来说，仅仅通过CSS便可以实现该效果，只需要为 标记添加如下代码：.datalisttr:ho
ver{background-color:#c4e4ff;/动态变色/}以上代码直接调用 标
记的伪类别hover来实现变色效果，但IE浏览器并不支持，因此必须采用JavaScript的配合。实例：11-5.html2.
3练习——表格课表根据这学期的课程安排，利用CSS表格样式设计一个自己的课表（周课表）：1.表格居中，有
边框和标题，标题左对齐2.单元格有边框，边框之间没有空隙。3.不同课程的单元格文字字体
、颜色和背景色不同4.注重颜色搭配和页面美观2.3课后练习——表格日历通过CSS设定表格的属性，实现日
历效果。3.用CSS设置表单样式3.1设置表单基本样式利用CSS对标记的控制，同样可以对表单添加简单的样式风格，包括边框
、背景色、高度、宽度等，设置方法跟前面的相同。实例：11-6.html仔细观察会发现单选项和复选框对于边框的显示效果，在IE和
Firefox浏览器中有明显的区别。解决办法是分别给具体的各项添加类别属性，进行单独的设置。这种方法在实际设计中经常使用。实例1
1-7.html4.CSS表单实例4.1像文字一样的按钮通过CSS设置，可以将按钮变得跟普通文字一样。关键在于将按钮的
背景色设置为透明“transparent”，这样无论页面body的背景色如何修改，按钮的背景色都会发生相应的变化。最后再单独设置输
入框和按钮的边框效果即可。实例：11-8.html4.2七彩的下拉菜单CSS不仅可以控制下拉菜单的整体字体和边框等，对于下
拉菜单中的每一个选项同样可以设置背景色和文字颜色。例如，当需要在下拉菜单中选择相应的颜色时，有这种设置就显得非常方便。关键的方法
是给下拉菜单的每一个
|
