HTML中嵌入CSS的四种方式及优先级、如何选择内嵌式和链接式

17-09-09 来源：[db:作者]

收藏我要投稿

在HTML中嵌入CSS样式有四种方式:

1、行内样式

这个方式是直接在HTML的标签中插入 style="属性:属性值;..." 这个属性

这是最简单的一种插入方式，所以这个插入方式看上去很low

行内样式的缺点主要有两个:

一、w3c标准是:内容、样式、行为三者分开,这个嵌入方式不符合W3C规范,并且代码乱,不好维护

二、代码冗余,相同的style得写多次,不可复用

2、内嵌式

在html中的head中插入style标签在中间写CSS代码

这个方式解决了同一页面多个标签需要写多分style属性的问题

但是内嵌式无法实现在多个html都要使用这个css样式的功能

3、连接式

在html的head中插入

href中的是要插入的样式的css文件

通过连接式解决了多个html使用一个css样式的问题

4、导入式

head中插入style标签

导入式一般不用

四种插入方式的优先级

若四种方式同时使用,那么他们都会生效果;

若碰到相同的属性,且都修改了同样属性,后定义的生效;

若内嵌与导入式放到一起,始终是内嵌式起作用;

如何选择使用内嵌式还是链接式

内嵌式虽然没有解决多个html页面服用一个css样式的问题但是浏览器在加载的时候只需要加载这一个css样式,速度比较快

而链接式,若一个html页面用多个css样式,那么在浏览器加载的时候每个css文件都得单独下载,速度相对内嵌式比较慢

根据实际情况考虑,若追求的是速度,对代码复用问题不较真,推荐使用内嵌式

若追求的是代码的可服用,那么就得舍弃一点速度,来使用链接式来嵌入CSS样式。