CSS样式表fx.doc

CSS样式表 学习目标： 1、了解CSS样式表的定义及其优点 2、掌握嵌入式、内联式、外联式三种样式表的实现方法 3、通过三种样式表的实践，感受这三种样式表的优缺点。 重点：掌握嵌入式、内联式、外联式三种样式表的实现方法 学习过程： 1、一般设置格式 开始标签……/结束标签 说明：设置的样式只对“开始标签”与“结束标签”之间的内容起作用。 属性:属性值 : 赋值 2、几种常见的样式设置代码： font style=”font-family:宋体;font-size:20pt;color:red” ; 隔开 3、练习：将这篇文章的第一、三、五小节字体设置成“楷体，18pt，绿色”； 二、四、六小节设为“黑体，22pt，蓝色”。 小结：嵌入式样式表：在每个要应用样式的标签后写上CSS属性 缺点：比较繁琐，应用比较少。 特点：只对本标签内容适用 4、思考：如果采用一种方法，设置相同样式时，没有上面那么繁琐呢？ 方法：在head/head标签之间定义一个样式，然后在本网页内调用。 格式：style type=”text/css” !— !— -- 是为了兼容高低版本 样式内容 -- /style 例如： style type=”text/css” !-- h1｛ font-family:宋体; font-size:20pt; color:red; ｝ -- /style 练习：用以上方法将第一、三、五小节字体设置成“楷体，18pt，绿色”； 二、四、六小节设为“黑体，22pt，蓝色”。 小结：内联式样式表在head/head标签之间定义一个样式，然后在本网页内调用。 特点：只对本网页适用 5、思考：若要在不同的网页间使用相同的样式，如何设置呢？ 方法：首先把样式定义成一个“.css”文件，然后在各个网页中调用该文件 格式：link href=”文件路径及文件名” rel=”stylesheet” type=”text/css” 例如：link href=”lx1.css” rel=”stylesheet” type=”text/css” link href=”css/lx2.css” rel=”stylesheet” type=”text/css” 练习：用以上方法将lx1.htm与lx3.htm调用lx2.css lx2.htm与lx4.htm调用lx3.css （lx3.css在CSS文件夹下） 实践：用记事本打开lx1.css或lx2.css，适当修改代码，看各个网页有何变化？ 小结：外联式样式表定义一个CSS文件，在各网页head/head标签之间调用该文件。 特点：对不同的网页适用，只要修改CSS文件，就可改变不同网页的外观和格式 维护方便，兼容性较好 精简网页，提高下载速度 选择题： 1、CSS样式表中，若想只对当前页面应用模式，最好使用（ ） A、嵌入式样式表 B、内联式样式表 C、外联式样式表 D、直接编写 2、在HTML中加入table style=”color:green;font-size:12pt”此为（ ） A、嵌入式样式表 B、内联式样式表 C、外联式样式表 D、动态式样式表 3、从index.htm中的代码link href=”style/home.css” rel=”stylesheet” type=”text/css”可以看出其采用了哪种方式的CSS样式表（ ） A、嵌入式样式表 B、内联式样式表 C、外联式样式表 D、混合样式表