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"）;

　　注：这种方式与链接式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的方式有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！