5.2.2CSS样式表

1、外部样式表的简单使用,一、复习:内部样式表的定义及应用,定义内部样式表 （配合page1.htm页面复习） .类别样式名称1 属性1:值1; 属性2:值2; .类别样式名称2 属性1:值1; 属性2:值2; 应用样式 在要应用样式的html标记后使用class属性声明 ,练习1： 编辑“page1.htm”源代码，使诗词“一弄”“二弄”“三弄”的文字分别以样式one、tow、three所定义的格式显示，完成后在浏览器中运行“page1.htm”。（运行结果如“样张1”所示 ） 提示：除了在标记后分别引用样式，还可以在后引用样式，对内所有元素统一设定格式。,一、复习:内部样式表的定义及应用,二新

2、课：外部样式表,单个文件需要特别样式时，可以使用内部样式表。当样式需要被应用到很多页面，如果仍然使用内部样式表，会使同样的代码在不同的网页中重复出现，这时外部样式表将是理想的选择。,二新课：外部样式表,1.建立样式表文件（*.CSS） 引用外部样式表，必须要创建一个扩展名为“css”的样式文件，同时建立样式文件要以有意义的英文字母命名，如“main.css”。 创建方法：由于样式文件和网页文件一样，从本质上而言都属于纯文本文件，所以可以通过文本编辑软件（如记事本）编辑保存，（注意要把文件扩展名由原来的txt改为css），样式文件内容即各种样式定义代码。,二新课：外部样式表,练习2：打开“pag

3、e1.htm”的源代码，找到已定义的样式“one”、样式“two”、样式“three”的样式代码并复制，然后打开记事本粘贴，最后以“main.css”为文件名保存。（“main.css”文件代码见样张2）,二新课：外部样式表,2.定义链接代码 若网页要引用某个样式文件中定义的样式，必须在其源代码的 区使用标记将“*.css”样式文件链接进来，代码如下： 说明：是一个单标记，一般写在标记内标记对下面。 rel=stylesheet，type=text/css是固定写法，不可修改。rel=stylesheet表示引入样式表文件；type=text/css表示当扩展名为css的文件被访问时，浏览器会

4、自动用指定应用程序打开；href=path/*.css表示调用的样式表文件所在路径及名称（链接代码中css样式表文件是最关键的，如果没有要创建）。,二新课：外部样式表,3.应用样式 通过标记引入css样式文件，此时css样式表文件中定义的所有样式将自动加载到页面，对这些样式的应用同内部样式表中样式的应用相同，都是在要应用样式的HTML标记后，使用class属性声明即可。 ,二新课：外部样式表,练习3：编辑“page2.htm”源代码，使页面中第一行文字设定格式为“大小20像素棕色加粗字体”，第二行文字设定格式“楷体蓝色有下划线”，其余行文字设定格式“华文行楷绿色”。（完成后运行“page2.h

5、tm”，效果如“样张3”。） 提示：调用样式表文件“main.css”； 引用相应样式,二新课：外部样式表,练习4：更改“page3.htm”中的文字格式为“华文彩云、紫色(purple)” （运行“page3.htm”，效果如“样张4”。） 提示：引用了外部样式表的网页，当改变网页形式时，无需修改网页源代码，只要改变引入的css样式表文件就可以了。,三、内部样式表和外部样式表的区别,内部样式表定义的样式仅供本页面使用；而通过标记引入外部的样式文件后，其所定义的样式可供多个页面使用。 内部样式表每运行一次，浏览器都要加载一次，占用流量；而外部的样式表文件加载后会被存储在缓存中，不会重复下载，能够节省网络流量和带宽。,三、内部样式表和外部样式表的区别,3. 后期维护时，运用内部样式表的网页要改变形式，需一个一个页面修改，工作量大，比较烦琐，容易出错；而运用外部样式表的网页只要修改css样式表文件，就能同时格式化很多网页，不需要一个个修改网页，省时省力。,三、内部样式表和外部样式表的区别,4. 使用