CSS——CSS样式的几种写法

CSS概念：Cascading Style Sheet，简称为css，中文名称层叠样式表或者级联样式表，主要指的是用来装饰HTML页面的一种技术。

在页面开发的时候，一般CSS有如下几种写法：

-->在标签的属性style中编写

-->在页面中的style标签中编写

-->在页面外的XX.css文件中编写，使用link标签引入

-->使用@import导入需要的css文件

一、行内样式

行内样式，又叫做标签样式，主要是写在标签的 style 属性上，好处是优先级别较高，坏处是只

能渲染一个标签。

二、内嵌样式

内嵌样式，又叫做页面样式，是将 CSS 写在网页源文件的头部，即在head间，通过使用HTML标签中的style标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。

三、外链样式

链接式通过 HTML 的 link 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应

用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。

注意： 对于样式表而言，后定义的会把先定义的样式表覆盖掉。 link 标签可以放在页面的 head

中，也可以放在 body 中，一般建议放在 head 中，以便于浏览器渲染样式，因为样式在加载完成前

需要渲染。

四、@import

css 也提供了一种在 css 文件中到导入其他 css 文件的功能 -- @import ，这样就可以也可以导入 css

文件。

五、常见面试题

link 和 @import 的区别

首先，从本质上说，这两种方式都是为了加载 css 文件，但它们还是存在细微的差别。

1 、 link 属于 XHTML 标签，而 @import 完全是 css 提供的一种方式。 link 标签除了可以加载 css 外，

还可以做很多其他的事情，比如定义 RSS ，定义 rel 连接属性等， @import 只能加载 CSS 。

2 、加载顺序的差别：当一个页面被加载的时候， link 引用的 CSS 会同时被加载，而 @import 引

用的 CSS 会等到页面全部被下载完再加载。所以浏览 @import 加载 CSS 的页面时可能没有样式，网速慢的时候明显可以看到。

3 、兼容性的差别：由于 @import 是 CSS2.1 提出的，所以老的浏览器不支持， @import 只有在

IE5 以上的才能识别，而 link 标签无此问题，完全兼容。

4 、使用 dom 控制样式时的差别：当时用 JavaScript 控制 dom 去改变样式的时候，只能使用 link

标签，因为 @import 不是 dom 可以控制的。