项目3 (八 css美化网页)

学习目标：

 会使用CSS层叠样式对页面中文本等网页元素进行样式控制

【任务1】利用CSS美化网页 【任务分析】

4.14玉树大地震时为了表示对遇难同胞的哀悼，全国的大小网站页面都变灰了。如何实现这一功能？对于网站中页面较少时，可以一个页面一个页面进行设置，哀悼期过了后再恢复原样，若网站由几十个页面组成，这样设置工作量很大，有一种省时省力的方法可以达到这一功能，那就是层叠样式表CSS（Cascading Style Sheet）。这个方法最方便管理整个网站的网页风貌，它让网页的文字内容与版面设计分开，只要在一个css文档中定义好网页的外观风格，所有链接到此css文档的网页，便会按照定义好的风格显示网页。 【任务背景】

回忆：纪念4.14，悼念玉树地震死难者，整个网页变黑色(灰色)，这个特效如何实现。 代码：

方法1：直接在html文档的head区域加上以下代码 代码：

方法2：在css文档中加入以下代码 代码：

html { filter:gray; }

演示：将上面这段代码添加到newsview.asp文件，观察效果。 将上面这段代码添加到index.htm文件，观察效果。

(说明：如果是ps导出的网页文件，代码需这样修改html,body{filter:gray;}或

将这段代码添加到标签前)

【子任务1.1】利用CSS美化register1.asp网页 【任务展示】 实际网页演示。 【操作步骤】

1. 打开站点文件夹ClassWeb\\login\\register1.asp文件，双击进入设计视图。 2. 选中“用户注册”，在属性面板设置样式，如图所示：

进入代码视图，style1样式代码如图所示：

3. 同理，可利用属性面板对“register……”进行样式设置。 设疑：（1）此方法可设置的属性类型有限，如不能给文字加下划线等； （2）若对单元格的内容进行设置，需逐个应用样式，操作繁琐。 4．通过CSS面板新建样式，对单元格进行设置：

（1）单击“样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型选择“标签”，标签名称选择为“td”，定义在选择“仅对该文档”。单击“确定”按钮。

（2）在弹出的“td的CSS样式定义”对话框中，进行如图所示的样式定义：

(3)为表格第一列的单元格设置样式为右对齐，操作如图所示：

注意：此处选择器类型为“类”，名称为“.txt”,定义在“仅对该文档”。 （4）选中第一列单元格（除最后一行），应用样式“.txt”。

（5）类似上面操作，为表格最后一行单元格设置样式为居中对齐；为“*”设置样式为字体颜色是红色。

【子任务1.2】利用CSS美化login.asp、newsview.asp、courseview.asp网页 【任务分析】

在上述制作的显示班级新闻标题（newsview.asp）、显示课件下载（courseview.asp）、管理员登录（login.asp）页面中，我们发现使用默认的字体显示效果不理想，需将页面进行美化：将页面中的字体大小设为12px，行间距设为14px，将管理员登录页面中的用户名、密码和验证码字体设为黑体，像这种多个页面文件中设置相同的效果使用CSS外部链接式的方法是较方便的做法。 【操作步骤】

1. 在站点文件夹ClassWeb下新建css文件夹，并打开ClassWeb/news/newsview.asp文

件。

2. 单击CSS样式面板右下角【新建CSS规则】

按钮。

3. 在弹出的“新建CSS规则”对话框中，在“选择器类型”单选按钮中选取“标签

（重新定义特定标签的外观）”，在“标签”下拉列表框中选取“table”标签，在“定义在”单选按钮中选取“新建样式表文件”项，如图所示。

图1“新建CSS规则”对话框

4. 单击【确定】按钮，在弹出的“保存样式表文件为”对话框的“保存在”下拉列表

框中选取步骤1中新建的css文件夹，在“文件名”文本框中输入文件名format，其它取默认设置，如图2所示。

图2 “保存样式表文件为”对话框

5. 单击【保存】按钮，在弹出的“table的CSS规则定义（在format.css中）”对话框

的“类型”分类中设置字体大小为12px，行高设置为14px，其它选项取默认设置，如图3所示。

图3 “table的CSS规则定义”对话框

6. 单击【确定】按钮，仔细观察newsview.asp文件中出现语句“href=\"../css/format.css\" rel=\"stylesheet\" type=\"text/css\" />”表示将format.css样式表

外部链接入该文件中。同时出现打开的format.css文件，观察其代码，体会其含义，将format.css文件和newsview.asp文件存盘，预览。

7. 将format.css文件中的样式应用于courseview.asp文件：打开courseview.asp文件，

单击CSS样式面板右下侧的【附加样式表】按钮，在弹出的“链接外部样式表”对话框的“文件/URL”单击【浏览】按钮，选取format.css文件；“添加为”单选按钮取默认的“链接”，其它选项取默认设置，如图4所示。

图4“链接外部样式表”对话框

8. 单击【确定】按钮，进入courseview.asp文件的代码视图，在标签的上方出现语句”表示将format.css样式表外部链接入该文件中，存盘预览。

9. 为login.asp文件中的文本进行样式设置：字体为黑体，字体大小为12px。像这种

还是为

（1）检查format.css文件是否关闭，若没有关闭则关闭该文件。

（2）在CSS样式面板中选中format.css文件，然后单击面板右下角【新建CSS规

则】

按钮。

（3）在弹出的“新建CSS规则”对话框“选择器类型”单选按钮中选取“类（可应用于任何标签）”项，名称中输入为类所起的名字hh，检查“定义在”单选按钮是否选取了“format.css”选项，如所示。

（4）单击【确定】按钮，在弹出的“.hh的CSS规则定义（在format.css中）”对话框“字体”框中选取“黑体”。

（5）单击【确定】按钮，进入format.css文件，观察代码体会其含义，再将format.css文件存盘。

10. 打开login.asp文件，单击CSS样式面板右下侧的【附加样式表】按钮，在弹出

的“链接外部样式表”对话框的“文件/URL”单击【浏览】按钮，选取format.css文件。

11. 进入login.asp文件的“代码”视图方式，在原代码