《实验二样式表css》由会员分享，可在线阅读，更多相关《实验二样式表css（5页珍藏版）》请在金锄头文库上搜索。
1、1实验编号实验二实验地点实验成绩实验项目CSS 应用简介授课教师实验时间 年 月 日 星期 第 节实验教师实 验 目 的1、了解 CSS 在网页中的作用 2、掌握三种样式表的使用方法 3、掌握 CSS 对超链接的作用和 CSS 滤镜的应用原 理 简 介为了净化 HTML 的语法,简化 HTML 的使用，工程师们提出了将内容与样式分开的解决方案，内 容描述由 HTMK 元素负责,而样式的说明则由层叠样式表 CSS 负责。根据样式表的作用范围的调用方 式，可分为三种类型：内联样式表、嵌入样式表和外部样式表。selector property：value 选择符 属性：值内联样式表：作用在 HTML
2、 的元素内，优先级别最高，且不用事先定义。 嵌入式样式表：作用在所定义的网页内，优先级别次之。先在中定义，然后在中需 要的位置调用。 外部样式表：作用在整个网站内，优先级别最底。先将样式代码保存为独立的*.CSS 文件，再在 网页的链接调用，即可作用于此网页。实 验 内 容1、 内联样式的使用 2、 嵌入样式的使用 3、 外部样式的使用 4、 浏览 WWW.HONGEN.COM，调试并修改此网站的案例代码实 验 步 骤一、内联样式 STEP1：打开网页编辑工具，输入下面的代码这是一段红色粗体文字 STEP2：浏览结果如下问题：如要将上段文字以斜体显示，请写出其样式代码；二、嵌入样式 STEP1
3、：打开网页编辑工具，输入下面的代码实验现象解决措施2h1color:#ff0000;font-family:黑体p.firstcolor:#000000;font-family:宋体;font-size:12p.secondcolor:#00ff00;font-family:宋体;font-size:32.mystylecolor:#0000ff;font-family:黑体;font-size:64网页设计制作网页设计制作网页设计制作网页设计制作STEP2：浏览结果如下问题：请写出“选择符”的应用区别三、外部样式表 STEP1：打开网页编辑工具，输入下面的代码h1color:#ff0000;
4、font-family:黑体p.firstcolor:#000000;font-family:宋体;font-size:12p.secondcolor:#00ff00;font-family:宋体;font-size:32.mystylecolor:#0000ff;font-family:黑体;font-size:64STEP2：保存为 mystyle.css STEP3：打开网页编辑工具，输入下面的代码3网页设计制作网页设计制作网页设计制作网页设计制作STEP4：浏览结果 四、对超链接的应用（锚的伪类） STEP1：打开网页编辑工具，输入下面的代码css word STEP2：浏览结果注：在定义这些链接样式时，一定要按照 a:link， a:visited， a:hover， a:actived 的顺序书写。五、滤镜的应用STEP1：打开网页编辑工具，输入下面的代码css word link css 4alpha /*定义 CSS 样式*/ Beautiful STEP2：浏览结果问题：改变虑镜的参数值，会有什么结果实 验 小 结教 师 点 评
