视频19
本节将以“关于我们”主题的网页制作为例，向同学们介绍网页中创建CSS规则的方法，以及对网页中的文本进行CSS设置，希望读者通过本节的学习能掌握CSS中的标签选择器的创建方法和CSS设置文本的常用样式。
步骤1 使用鼠标右键单击“MyWebsite”站点列表项的根文件夹，选择弹出快捷菜单中的【新建文件】命令，将“untitled.html”默认的文件名改为“AboutUs.html”（关于我们），按回车键确认修改。
步骤2 在网页中输入相关文本内容，编排前效果如图3-2-3所示。
图3-2-3 编排前效果
步骤3 使用鼠标选中第2行段落，选择下方【属性】面板中的【格式】下拉列表的“标题1”项，将“段落”格式改为“标题1”格式，如图3-2-4所示。
图3-2-4 设置标题【属性】面板
步骤4 用鼠标点击【格式】菜单中【CSS 样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”的下拉列表中选择“标签”项，在“选择器名称”栏目后的下拉列表框中选择“h1”项，在“规则定义”后的下拉列表中选择“仅限该文档”项，点击【确定】按钮。如图3-2-5所示。
图3-2-5 【新建CSS规则】对话框
步骤5 在弹出的【h1的CSS规则定义】对话框中，“font-family”下拉列表选择“黑体”；“color”值为“#FFFFF”（白色），如图3-2-6所示。
图3-2-6 【h1的CSS规则定义】对话框
步骤6 鼠标点击“分类”选项组中的“背景”选项，在“background-color”栏中输入“#09069F”（蓝色），如图3-2-7所示。
图3-2-7 【h1的CSS规则定义】对话框
步骤7 鼠标点击“分类”选项组中的“区块”选项，在“text-align”下拉列表中选择“center”项，然后点击【确定】按钮，如图3-2-8所示。
图3-2-8 【h1的CSS规则定义】对话框
步骤8 鼠标点击“分类”选项组中的“方框”选项，勾选“padding”下方的“全部相同”复选框，然后在“top”输入框中输入值“10”，单位选择“px”，点击【确定】按钮，如图3-2-9所示。
提示说明：【CSS规则定义】对话框中的【确定】按钮表示保存当前设置，关闭对话框窗口。【应用】按钮表示保存当前设置，不关闭对话框窗口，可以继续完善其他设置。通常情况，将所有的属性设置完成后点击【确定】按钮，部分设置完成点击【应用】按钮，取消设置点击【取消】按钮。
图3-2-9 【h1的CSS规则定义】对话框
图3-2-10 标题的预览效果
步骤10 用鼠标点击【格式】菜单中的【CSS样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”的下拉列表中选择“标签”项，在“选择器名称”栏目后的下拉列表框中选择“p”项，在“规则定义”后的下拉列表中选择“仅限该文档”项，点击【确定】按钮。如图3-2-11所示。
图3-2-11 【新建CSS规则】对话框
步骤11 在弹出的【p的CSS规则定义】对话框中，“font-family”栏的下拉列表中选择“黑体”；“line-height高”栏中输入值为“1.5”，单位选择“multiple（倍行高）”，“font-size”值为“12”，单位选择“px”，如图3-2-12所示。
图3-2-12 【p的CSS规则定义】对话框
步骤12 鼠标点击“分类”选项组中的“区块”选项，在“text-indent”栏中输入“2”，单位选择“ems（字体高）”，然后点击【确定】按钮，如图3-2-13所示。
图3-2-13 【p的CSS规则定义】对话框
图3-2-14 段落的预览效果
步骤14 用鼠标点击【格式】菜单中【CSS样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”的下拉列表中选择“标签”项，在“选择器名称”栏目后的下拉列表框中选择“body”项，在“规则定义”后的下拉列表中选择“仅限该文档”项，点击【确定】按钮。如图3-2-15所示。
图3-2-15 【新建CSS规则】对话框
步骤15 在弹出的【body的CSS规则定义】对话框中，用鼠标点击“分类”选项组中的“类型”选项，在“font-family”栏中输入“微软雅黑”，如图3-2-16所示。(www.xing528.com)
图3-2-16 【body的CSS规则定义】对话框
步骤16 鼠标点击“分类”选项组中的“背景”选项，在“background-image”右方的输入框中选择【浏览】按钮，选择“images”文件夹中的“topbg.jpg”文件，在“background-repeat”对应的下拉列表框中选择“repeat-x”项，点击【确定】按钮，如图3-2-17所示。
步骤17 鼠标点击“分类”选项组中的“方框”选项，取消勾选“padding”下方的“全部相同”复选框，然后在“top”输入框中输入值“25”，单位选择“px”，点击【确定】按钮，如图3-2-18所示。
图3-2-17 【body的CSS规则定义】对话框
图3-2-18 【body的CSS规则定义】对话框
图3-2-19 预览效果
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
