CSS入门4-引入CSS

love丁酥酥

发布于 2018-08-27 15:17:21

6660

发布于 2018-08-27 15:17:21

文章被收录于专栏：coding for love

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1.简介

说了这么久的html，大家都快以为这个系列是主讲html的了。好了，初步了解了你的身体构造，是时候学些拳脚功夫了。仗着硬胳膊硬腿当然能打人，但那不过是莽夫，css就是我们的武学招式，让我们的身体更灵活，招式更多变。

那么该如何引入css呢？主要有四种方法：

作用：为单个元素指定样式。

用法示例：

<div style="background-color: blue; width: 100px; height: 60px;">
</div>

特点：不会干扰其他元素的样式，但是缺乏灵活性，不推荐。

注意：一个元素内同时使用多个style，只能识别第一个style。

作用：指定页面的样式。

用法示例：

<head>
  <style type="text/css">
    body {
      background-color:  blue;
    }
  </style>
</head>

特点：页面样式集中，不会影响其他页面样式。但是缺乏灵活性，出现网站整体样式修改时会非常麻烦。

作用：为页面引入外部链接样式。

用法示例：

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

特点：最常用的样式引入方法。复用性强，便于管理，推荐使用。

作用：为页面引入外部链接样式

用法示例：

<head>
  <style type="text/css">
    @import "style.css"; 
  </style>
</head>

特点：不推荐使用。下面会讲到原因。

这个章节，参考了由link和@import的区别引发的CSS渲染杂谈，若要看详细解读，可以转自该篇文章。由于现在的章节是入门探讨，所以在此我不做深入分析。就像我开始说的，现在还是了解交通规则考驾照的时候，不要贪多去知道发动机是怎么工作的。

从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
加载顺序区别加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
DOM可控性区别可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
权重区别(有争议，参考文章中有详细解读) link引入的样式权重大于@import引入的样式。

建议：