Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 5.1.7知识点4CSS的四种引入方式.pptx

CSS的四种引入方式信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

前端技术开发知识储备内部样式表1外部样式表2嵌入样式表3样式表适用性4优先级5

前端技术开发在网页上引入CSS代码的方式主要有四种（1）内部样式表 将CSS代码直接集中写在编辑的网页上。（2）链入外部样式表 将CSS代码保存为独立的外部文件（.css），再链入到网页的头部。（3）导入外部样式表 方式与链入外部样式表相同，但引入写法不同。（4）嵌入样式表 将CSS代码嵌入到标记的属性中。

01内部样式表前端技术开发

内部样式表前端技术开发01CSS代码写入style/style中间，设置该标记的属性type。!--与--HTML注释符是为了防止一些不支持CSS的浏览器，将style与/style之间的CSS代码当成普通的字符串显示在网页中。内部样式表将CSS代码直接集中写在编辑的网页上。内部样式表引入语法styletype=“text/css!--selector{property：value；…} …--/style写入head/head标记

内部样式表前端技术开发01内部样式表实例：

02外部样式表前端技术开发

外部样式表前端技术开发021.链入外部样式表linkrel=stylesheettype=“text/csshref=x.css外部CSS文件：X.CSS（1）将link标记写入head/head标记中（2）link标记的属性设置rel=“stylesheet”是指在HTML文件中使用的是外部样式表。type=“text/css”指明该文件的类型是样式表文件；可不写href的URL指定CSS样式表文件地址，一般使用相对地址来表示。外部样式表将CSS代码保存为独立的外部文件（.css）。外部样式表分为：链入方式和导入方式。常用链入外部样式表。

外部样式表前端技术开发02链入外部样式表实例：一个网页中可以引入多个外部样式文件。

外部样式表前端技术开发022.导入外部样式表styletype=text/css

@importurl(x.css)/style1、link属于html标签，而@import是CSS提供的，只能加载CSS2、加载顺序。link在页面加载时被加载，@import在页面加载完之后再加载。3、浏览器兼容性。link是html标签，因此没有兼容性问题，而@import只有IE5以上才能识别。4、link是可以通过JS操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用导入方式。3.两种外部样式表的区别

03嵌入样式表前端技术开发

嵌入样式表前端技术开发03markupstyle=CSS语句；.../markupstyle属性中的内容就相当于样式表大括号里的内容。style属性可以应用于除basefont、param和script之外的任意元素。嵌入样式表也叫行内式，将CSS代码作为标记的style属性中。嵌入样式表引入语法

嵌入样式表前端技术开发03嵌入样式表实例

04样式表适用性前端技术开发

样式表适用性前端技术开发04如何选择使用样式表？内部样式表只能应用当前编辑的网页，无法跨网页使用。如果该样式只用于特定的网页，可选择此方式链入外部样式表可以一次编辑应用于多个网页。适用于网页的一些公共样式。比如页眉页脚的样式。嵌入样式表，不推荐广泛使用。在这种方式下，CSS代码与HTML代码耦合过深，又退回到原来的将样式作为标记属性来使用。一次编辑多次使用，一改都改注意：一个网页可以使用多种不同的CSS引入方式。

05优先级前端技术开发

优先级前端技术开发05当网页使用多种不同的引入方式时，需要考虑CSS引入方式的优先级问题，遵循以下两个规律：p文字颜色/p红色还是蓝色？headstyletype=text/cssp{ color:red;} /stylelinkrel=stylesheettype=“text/csshref=x.css/headp{color:blue;}（1）行内式内部样式外部样式；（2）外部样式中，出现在后面的优先级高于出现在前面的优先级。

小结前端技术开发03(1)CSS引入方式(2)选择何种方式（1）内部样式表（2）链入外部样式表（3）导入外部样式表（4）嵌入样式表 (3)考虑CSS引入方式的优先级

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》