CSS 引入方式

2018-02-28 本文已影响0人苦瓜_6

主要内容： CSS 引入方式介绍，link 和 @import区别。

CSS是什么

层叠样式表 (Cascading Style Sheets，常缩写记作 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在其它媒体上的元素应该如何被渲染的问题。

CSS 的引入方式根据 CSS 样式代码引入的形式可分为三种：内联式、嵌入式和外部式。

内联式即在 HTML 标签的 style 属性中设定 CSS 样式，这种方式本质上没有体现 CSS 的优势，并且不方便维护，因此不推荐使用。
eg. <p style="color : yellow ; "> hello </p>

嵌入式指的是把 CSS 代码和 HTML 代码放在同一个文件中，其中CSS代码放在<style></style>标签内， <style> 标签一般放在<head>标签内。

外部式最理想的CSS引用方式，所谓的“外部式”，就是把CSS代码和HTML代码都单独放在不同文件中，然后通过一定的方法将一个独立的CSS文件引入HTML文件中。一般有两种方法：链接式和导入式。

链接式： 链接式使用HTML规则引入外部CSS文件，它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用语法如下：
<link rel="stylesheet" type="text/css" href="style.css">
导入式： 导入式使用 CSS 规则 @import 引入外部 CSS 文件。可以将其放到<style> 标签里，也可以放到另一个样式表里。@import语法有两种：

PS : @ import 规则一定要先于除了@charset的其他任何CSS规则

导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件中，二者的区别在于链接式使用HTML的标记引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件
link 是 HTML 标签除了 CSS 还能定义别的东西，而 @import 是纯 CSS
link 和页面本体是会同时加载的，而 @import 得等到页面加载完成再加载
@import 是 CSS 2 标准，在多年前可能会有兼容性问题
当使用 JavaScript 控制 DOM 去改变样式的时候，只能使用 link 标签，因为 @import 不是 DOM 可以控制的