主要内容： CSS 引入方式介绍 ，link 和 @import区别 。
CSS是什么
层叠样式表 (Cascading Style Sheets，常缩写记作 CSS）， 是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在其它媒体上的元素应该如何被渲染的问题。
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语法有两种：
-
@import url ("style.CSS") ; -
@import "style.CSS" ;
PS : @ import 规则一定要先于除了@charset的其他任何CSS规则
link 和 @import区别
- 导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件中，二者的区别在于链接式使用HTML的标记引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件
- link 是 HTML 标签除了 CSS 还能定义别的东西，而 @import 是纯 CSS
- link 和页面本体是会同时加载的，而 @import 得等到页面加载完成再加载
- @import 是 CSS 2 标准，在多年前可能会有兼容性问题
- 当使用 JavaScript 控制 DOM 去改变样式的时候，只能使用 link 标签，因为 @import 不是 DOM 可以控制的
网友评论