创建独立文件CSS样式表：网站制作基础

视频18

独立文件的CSS样式表是将定义的所有CSS规则存放到一个单独的文件中，使得CSS样式与HTML内容分离的一种方式。该方式与网页中嵌入样式的区别在于，可以共享于整个站点内所有的网页使用，而嵌入样式只能在当前网页中使用。

步骤1　使用鼠标右键单击“MyWebsite”站点列表项的根文件夹，创建名为“css”的文件夹和名为“sitemap1.html”的网页文件。

步骤2　用鼠标在“sitemap1.html”网页中输入内容相同的站点地图文本。

步骤3　用鼠标点击【格式】菜单中【CSS样式】的“新建”命令，在弹出的【新建CSS规则】对话框中，在“选择器类型”的下拉列表中选择“标签”项，在“选择器名称”栏目后的下拉列表框中选择“h3”项，在“规则定义”后的下拉列表中选择“新建样式表文件”项，点击【确定】按钮，如图3-1-10所示。然后弹出【保存样式表文件为】对话框，保存名字为“style.css”，路径选择根目录下的CSS文件中，如图3-1-11所示。

图3-1-10　【新建CSS规则】对话框

图3-1-11　【保存样式表文件为】对话框

步骤4　点击【保存】按钮后，在弹出的【h3的CSS规则定义（在style.css中）】对话框中，“font-family”下拉列表选择“黑体”；“color”值为“#CCCCCC”（灰色）；“line-height”值为“30”，如图3-1-12所示。

图3-1-12　【h3的CSS规则定义（在style.css中）】对话框

步骤5　鼠标点击“分类”选项组中的“背景”选项，输入“background-color”值为“#000000”（黑色），如图3-1-13所示。

图3-1-13　【h3的CSS规则定义（在style.css中）】对话框

步骤6　鼠标点击“分类”选项组中的“区块”选项，在“text-align”的下拉列表中选择“center”项，然后点击【确定】按钮，如图3-1-14所示。

图3-1-14　【h3的CSS规则定义（在style.css中）】对话框

步骤7　鼠标点击“分类”选项组中的“方框”选项，在“width”的输入框中输入值“100”，单位选择“px”，在“height”的输入框中输入值“30”，单位选择“px”，然后点击【确定】按钮，如图3-1-15所示。

图3-1-15　【h3的CSS规则定义（在style.css中）】对话框

图3-1-16　预览效果(www.xing528.com)

本节介绍了CSS的基本功能，读者可以按照下面的要求完善“站点地图”网页：

1.利用CSS语法规则为“站点地图”网页中的内容分别创建不同的CSS样式。

2.根据需要对网页中的CSS样式进行合理地设置和调整。