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 可以控制的。