HTML中引入CSS的方式有哪些

这篇文章给大家分享的是有关HTML中引入CSS的方式有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为宜黄企业提供专业的网站制作、网站设计，宜黄网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

一、认识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"）;

注：这种方式与链接式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引入的样式

感谢各位的阅读！关于“HTML中引入CSS的方式有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！