主要内容: 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 可以控制的