实验二：CSS层叠样式表.docxVIP

实验二：CSS 层叠样式表 一、实验目的 1、了解CSS 的概念及CSS 的作用； 2、掌握CSS 的基本语法规则； 3、能够通过编写CSS 语句来设置网页外观及样式。 二、实验要求 1、完成CSS 案例编写； 2、使用内部CSS 和外部CSS 对网页风格进行定义 3、能够对页面指定不同的CSS 风格。 三、实验原理 1、CSS 的基本语法； 2、CSS 的引用方法。 四、实验步骤 完成下列案例的编写，并在IE 和 Firefox 两种浏览器中进行测试。 htmlheadtitle学习使用CSS/title/headbody html head title学习使用CSS/title /head body p这是一个CSS 测试页面/p 这是一行普通的文字！ /body /html 在 head 标签中添加相应的CSS 语句，将段落标签中的内容定义为宋体字face=” 宋体”且居中《center》放置；将body 标签中字体颜色定义为红色font=”red”； 尝试更改页面中文字的大小size=1；在浏览器中进行测试以上显示效果。 2、创建简单 CSS 样式表文件（*.css 文件），通过 link 标签及@import 语法将外部 htmlheadtitle学习使用CSS/title html head title学习使用CSS/title /head body body H1静夜思/H1 H4李白/H4 P床前明月光，/P P疑是地上霜。/P P举头望明月，/P P低头思故乡。/P h1锦瑟/h1 h4李商隐/h4 p锦瑟无端五十弦，一弦一柱思华年。/p p庄生晓梦迷蝴蝶，望帝春心托杜鹃。/p p沧海月明珠有泪，蓝田日暖玉生烟。/p p此情可待成追忆，只是当时已惘然。/p /body /html 在外部CSS 文件中定义网页 背景色为灰色（gray）body bgcolor=“gray”；段落设置居中，标题设置为粗体字。在head 标签中使用两种语法引用该CSS 文件。在浏览器中测试显示效果。 3、使用 CSS 定义类选择器，并将其应用到相应的 HTML 标签中。 html html head title学习使用CSS/title /head body H1静夜思/H1 H4李白/H4 P床前明月光，/P P疑是地上霜。/P P举头望明月，/P P低头思故乡。/P h1锦瑟/h1 h4李商隐/h4 p锦瑟无端五十弦，一弦一柱思华年。/p p庄生晓梦迷蝴蝶，望帝春心托杜鹃。/p p沧海月明珠有泪，蓝田日暖玉生烟。/p p此情可待成追忆，只是当时已惘然。/p /body /html /html 在 css 中使用类选择器将两个h1 标签中内容分别设置为居中和靠右对齐。在 css 中使用类选择器将两个h4 标签中内容分别设置为蓝色和红色。 在浏览器中测试显示效果。 4、使用 CSS 定义 ID 选择器，并将其应用到相应的 HTML 标签中。 html html head title学习使用CSS/title /head body H1静夜思/H1 H4李白/H4 P床前明月光，/P P疑是地上霜。/P P举头望明月，/P P低头思故乡。/P h1锦瑟/h1 h4李商隐/h4 p锦瑟无端五十弦，一弦一柱思华年。/p p庄生晓梦迷蝴蝶，望帝春心托杜鹃。/p p沧海月明珠有泪，蓝田日暖玉生烟。/p p此情可待成追忆，只是当时已惘然。/p /body /html 在 css 使用ID 选择器对任意标签添加ID，并将该 ID 所在标签中内容定义为蓝色并加上下划线，且背景设置为黄色。 在浏览器中测试显示效果。 5、 总结 CSS 在网页设计中的作用及使用 CSS 的好处。