HTML对于CSS样式的导入小总结

89 阅读 0 评论 59 点赞

我是靠谱客的博主能干钥匙，最近开发中收集的这篇文章主要介绍HTML对于CSS样式的导入小总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

一、我们都知道div+css模式，拥有众多的优点：

（1）便于对网页的改版，只需要修改CSS文件

（2）结构和表现的分离，更有利于网页的加载优化，结构更加简洁明了

（3）提高了网页的加载速度，更优的用户体验

二、对于css的样式我们拥有四种导入方式

（1）使用<link>元素链接到外部的样式文件

（2）使用CSS "@import"标记来导入样式表单

（3）在<head>元素中使用"style"元素来指定

（4）在<body>内部的元素中使用"style"属性来定义样式

这四种方式都能成功地使用CSS样式，CSS选择器具有一定的优先级。而相应的css导入也会有优先级的顺序，我们采取就近原则：行内>内嵌>链接>导入以上的标签顺序就是 4、3、1、2

三、link和@import的区别

之前我不是很了解这两个的区别，在我看来都是对于外部文件的导入，除了那一点优先顺序。其他还有什么样的区别呢？

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS(内容聚合）、rel 连接属性（表示默认或备选css 下面案例有介绍）等。

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

（以下的实例，就是使用JS进行样式的操作）

5.权重区别
link引入的样式权重大于@import引入的样式

这里是一定的应用的环境：

（1）如果要javascript进行样式选择；
这个时候就要用link,因为link是html元素，可用javascript去控制dom元素最后达到改变样式的效果。
看下列代码

以上就是能干钥匙为你收集整理的HTML对于CSS样式的导入小总结的全部内容，希望文章能够帮你解决HTML对于CSS样式的导入小总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。