使用CSS创建表单样式，轻松定制你的网站表单

步骤1　接上例。用鼠标点击【格式】菜单中【CSS样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”下拉列表中选择“复合内容”项，在“选择器名称”栏目后的下拉列表框中输入“#tb_msg tr .td input”值，在“规则定义”后的下拉列表中选择“仅限该文档”项，点击【确定】按钮。如图3-4-8所示。

图3-4-8　【新建CSS规则】对话框

步骤2　在弹出的【#tb_msg tr .td input的CSS规则定义】对话框中，选择“分类”菜单中的“背景”类型，在“background-color”栏中选择颜色值为“#ccc”的颜色，如图3-4-9所示。

图3-4-9　【#tb_msg tr .td input的CSS规则定义】对话框

步骤3　用鼠标点击“分类”选项组中的“方框”选项，在“height”栏中输入“20”，单位为“px”，如图3-4-10所示。

图3-4-10　【#tb_msg tr .td input的CSS规则定义】对话框

步骤4　用鼠标点击“分类”选项组中的“边框”选项，勾选“style”、“width”和“color”下面的“全部相同”复选框后，“style”选择“solid”；“width”输入1，单位选择“px”；“color”输入“#000”，点击【确定】按钮，如图3-4-11所示。

图3-4-11　【#tb_msg tr .td input的CSS规则定义】对话框

步骤5　用鼠标点击【格式】菜单中【CSS样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”下拉列表中选择“复合内容”项，在“选择器名称”栏目后的下拉列表框中输入“#tb_msg tr .td #textarea”值，在“规则定义”后的下拉列表中选择“仅限该文档”项，点击【确定】按钮，如图3-4-12所示。

步骤6　在弹出的【#tb_msg tr .td #textarea的CSS规则定义】对话框中，选择“分类”菜单中的“背景”类型，在“background-color”栏中选择颜色值为“#ccc”的颜色，如图3-4-13所示。

步骤7　用鼠标点击“分类”选项组中的“边框”选项，勾选“style”、“width”和“color”下面的“全部相同”复选框后，“style”选择“solid”；“width”输入1，单位选择“px”；“color”输入“#000”，点击【确定】按钮，如图3-4-14所示。

图3-4-12　【新建CSS规则】对话框

图3-4-13　【#tb_msg tr .td #textarea的CSS规则定义】对话框

图3-4-14　【#tb_msg tr .td input的CSS规则定义】对话框

步骤8　用鼠标点击【格式】菜单中的【CSS样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”下拉列表中选择“复合内容”项，在“选择器名称”栏目后的下拉列表框中输入“#tb_msg tr .td .btn”值，在“规则定义”后的下拉列表中选择“仅限该文档”项，点击【确定】按钮，如图3-4-15所示。

图3-4-15　【新建CSS规则】对话框

步骤9　在弹出的【#tb_msg tr .td .btn的CSS规则定义】对话框中，选择“分类”菜单中的“类型”，在“color”栏中选择颜色值为“#FFF”的颜色，如图3-4-16所示。

图3-4-16　【#tb_msg tr .td .btn的CSS规则定义】对话框

步骤10　用鼠标点击“分类”选项组中的“背景”选项，在“background-color”栏中选择颜色值为“#000”的颜色，如图3-4-17所示。

图3-4-17　【#tb_msg tr .td .btn的CSS规则定义】对话框

步骤11　用鼠标点击“分类”选项组中的“方框”选项，在“width”栏中输入“70”，单位选“px”；在“height”栏中输入“25”，单位选择“px”，点击【确定】按钮，如图3-4-18所示。

图3-4-18　【#tb_msg tr .td .btn的CSS规则定义】对话框

步骤12　用鼠标点击“分类”选项组中的“边框”选项，勾选“style”、“width”和“color”下面的“全部相同”复选框后，“style”选择“solid”；“width”输入1，单位选择“px”；“color”输入“#000”，点击【确定】按钮，如图3-4-19所示。

图3-4-19　【#tb_msg tr .td .btn的CSS规则定义】对话框

步骤13　用鼠标点击【格式】菜单中【CSS样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”下拉列表中选择“复合内容”项，在“选择器名称”栏目后的下拉列表框中输入“#tb_msg .underline”值，在“规则定义”后的下拉列表中选择“仅限该文档”项，点击【确定】按钮，如图3-4-20所示。

图3-4-20　【新建CSS规则】对话框

步骤14　在弹出的【#tb_msg.underline的CSS规则定义】对话框中，选择“分类”菜单中的“边框”，取消勾选“style”“width”和“color”下面的“全部相同”复选框后，只为bottom栏设置“style”选择“solid”；“width”输入1，单位选择“px”；“color”输入“#333”，点击【确定】按钮，如图3-4-21所示。

图3-4-21　【#tb_msg .underline的CSS规则定义】对话框(www.xing528.com)

步骤15　用鼠标选中按钮，将下面【属性】面板中的“类”栏设置值为“btn”；另外，选中第3行，设置下面【属性】面板中的“类”栏的值为“tb underline”，如图3-4-22所示。

图3-4-22　第3行的【属性】面板

提示说明：【类】栏中输入“td underline”，表示该对象叠加类别选择器“.td”和“.underline”两种CSS规则的特性。需注意的是，当一个对象叠加多个类别选择器的样式时，名字之间用空格隔开。

图3-4-23　预览效果

请读者按照下面的要求完善个人网页：

1.利用CSS语法规则为个人网页中的表格和表单分别创建不同的CSS样式。

2.利用CSS样式表对个人网页中的表格和表单进行风格统一操作，以便给浏览者留下好的视觉效果。