html引入css方式,HTML中引入CSS的方式

一、认识CSS

CSS：层叠样式表(Cascading Style Sheets)

样式表：如果把HTML比作人，那么样式表就是衣帽服饰，就是用来打扮HTML外观的(俗话说人靠衣服，网页靠CSS，才能变得漂亮)

内容与样式分离：HTML代码与CSS代码分离，让它们各自去做擅长的事情

HTML控制结构和内容；CSS控制样式

这样有利于代码的维护

举个栗子：存在已久的QQ空间的装扮功能就是内容与样式分离的最好体现

当我们点击切换不同的皮肤时，空间页面会显示不同的主题样式，这就是在给网页更换皮肤啊

既然将HTML与CSS分离，那么又如何让它们精诚合作呢？向下看

二、四种CSS的引入方式

1. 内联样式(行内式)

即：在html标签内的style属性中设定CSS样式，例如：

我是段落

注：这种方式不推荐使用，因为它只能改变当前标签样式，多处使用会导致代码的可维护性极差

2. 内部样式(嵌入式)

即：在html内的head头部内的style标签对中设定CSS样式，例如：

注：这种方式使html内容结构和css样式分开，便于阅读且代码比较集中，但CSS样式只对当前页面有效。

当多个页面需要引用同一个CSS样式时，修改CSS样式将十分麻烦，此时不利于代码维护，可维护性变差。

3. 外部样式(链接式：link)

即：使用html的link标签引入一个外部独立的 .css 文件

link标签放在html文件内的head头部中，例如：

注：这种方式，CSS代码存储在一个外部独立的文件中，若要更换网站样式，只需修改CSS文件即可，不需改动html文件，所以采用这种方式使代码具有良好的可维护性

4. 外部样式(导入式：@import)

即：使用CSS的语法规则引入一个外部独立的 .css 文件

@import放在html文件head头部里的style标签内(@import也可以放在导入样式表的开头,去引用其他样式)，例如：

@import url("style.css"); /* @import放在导入样式表的开头 */

注：这种方式与链接式link一样，将CSS代码存储在一个外部独立的文件中，也具有良好的可维护性，但这种方式也有缺点：白屏和无样式内容闪烁

嘿，除了以上引用的样式外，不要忽略 “ 浏览器的默认样式 ” 哦

三、 引用外部样式时：link 和 @import 的区别

1. 从属关系

link属于HTML的标签，通过 link 标签的 href 属性来引入外部文件；link不仅可以引入CSS样式表，还可以定义RSS、rel属性等

@import属于CSS的语法，@import语法只有一项作用：导入样式表

2. 加载顺序

使用link标签引入的CSS样式在加载页面时被同时加载

使用@import导入的CSS样式将在页面加载完毕之后才被加载

3. 兼容性

link 属于HTML标签，不存在兼容性问题

@import 是 CSS2.1 是在CSS2.1提出的，低版本的浏览器不支持，只可在 IE5+ 才能被识别

4. DOM可控区

link 支持使用Javascript控制DOM去改变样式(通过 JS 操作 DOM ，插入link标签来改变样式)

@import不支持使用Javascript控制DOM去改变样式( 由于DOM 方法是基于文档的，所以无法使用@import的方式插入样式)

5. 权重(若有兴趣自行查询它的原因)

link引入的样式权重大于@import引入的样式