第六章 用CSS设置表格与表单的样式

第六章用CSS设置表格与表单的样式：162038565Tel:[phone]主要内容：CSS控制表格的方法表格实例CSS控制表单的方法表单实例重点：CSS设置表格与表单的方法表格中的标记表格中的标记参考实例：6-1.htmltable/table表格开始与结束标记caption/caption表格标题标记tr/tr行标记th/th表头标记td/td单元格标记表格中的属性表格中的属性summary：用于概况整个表格的内容。浏览页面时不可见，对搜索引擎十分重要。例:summary=“2010-2011学期课程表”border：设置表格的边框。bgcolor：设置背景色bordercolor：设置边框色cellpadding：设置单元格内容和边框之间的距离。cellspacing：设置相邻单元格边框之间的距离。表格中的属性表格中的属性scope：专门用来区分行名称col或列名称row。caption-side：调整标题的位置（Firefox有效），其取值为：bottom|top|left|right|inherit。colspan：一行跨多列rowspan：一列跨多行思考：字体颜色如何设置？表格的颜色在CSS中设置表格的颜色color：设置表格中文字的颜色background-color：设置表格的背景颜色参考实例：6-2.html表格的边框在CSS中设置表格的边框border：其设置方法同图片边框的设置方法。border-collapse：使表格边框重叠（合并）。参考实例：6-3.html注意：表格边框与单元格边框的区别？表格的宽度在CSS中设置表格的宽度CSS提供了两种确定表格以及内部单元格宽度的方式。一种与表格内部的内容相关，称为“自动方式”；一种与内容无关，称为“固定方式”。table-layout：将它设置为“fixed”即为固定方式；设置为“auto”时则为自动方式。浏览器默认使用自动方式。隔行变色当表格的行和列都很多，数据量很大的时候，单元格如果采用相同的背景色，用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色，使得奇数行和偶数行的背景颜色不一样，达到数据一目了然的目的。如图所示：参考实例：6-4.html日历日历是日常生活中必不可少的，而作为备忘录的日历在桌面和网络上都越来越流行。通过CSS设定表格的属性，可以很轻松的实现各种日历的效果。参考实例：自制日历.html控制表单表单是网页与用户交互所不可缺少的元素，传统的HTML对表单元素的样式控制很少，仅仅局限于功能上的实现。本节围绕CSS控制表单进行详细介绍，包括表单中各个元素的控制，与表格配合制作各种效果等等。表单中的标记表单中的标记form…/form表单开始与结束标记input…/input表单输入标记select菜单和列表标记option…/option菜单和列表项标记/selecttextarea…/textarea文字域标记表单中的元素表单中的元素输入框、文本框、单选项、复选框、下拉菜单和按钮等。参考实例：表单.htm表单中的元素CSS修饰过的表单表单中的元素复习html中的各个元素标记的用法通过CSS对表单中的各个元素进行设置文字边框背景色宽度高度制作像文字一样的按钮（按钮隐藏）按钮之所以被称之为“按钮”，并不是因为它的形状，而是因为它的功能。通过CSS设置，可以将按钮变成跟普通文字一样。关键：将按钮的背景颜色设为透明，边框设置为0。参考实例：6-9.html.txt{border-bottom:1pxsolid#005aa7;color:#005aa7;border-top:0px;border-left:0px;border-right:0px;background-color:transparent;}.btn{background-color:transparent;border:0px;}制作七彩的下拉菜单CSS不仅可以控制下拉菜单的整体字体和边框等，对于下拉菜单中的每一选项同样可以设置背景色和文字颜色。关键：为每个下拉选项添加对应的CSS样式，主要是文字和背景颜色的设置。参考实例：6-10.html6.3.3案例分析2.blue{color:#660066;background:#0000FF;}.red{color:#FFFF00;background:#FF0000;}综合实例直接输入的excel表格（6-11.html）模仿新浪网民调查问卷（6-12.html）