实验二样式表CSS.doc

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