css四种导入方式

来源：互联网发布：项目数据分析师课程编辑：程序博客网时间：2024/05/17 03:21

css的四种引入方式

1.行内样式
最直接最简单的一种，直接对HTML标签使用style=”“，例如：

<p style="color:#F00; "></p>

缺点：HTML页面不纯净,不利于更改

2.内嵌样式
内嵌样式就是将CSS代码写在之间，并且用进行声明，例如：

<style type="text/css">body,div,a,img,p{margin:0; padding:0;}</style>

优缺点：无法提取多个页面的公共css。有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：

3.链接样式

链接样式是使用频率最高，最实用的样式，只需要在之间加上

<link type="text/css" rel="stylesheet" href="style.css" />

优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便,会先加载css，会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式效果的。

4.导入样式（不建议使用直接在html中使用）

导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。会在加载html文档后在加载样式所以有时会出现没有样式的情况(很短暂)，然后就有样式了

@import在html中使用，如下：

<style type="text/css">@import url(style.css);</style>

@import在CSS中使用，如下：

@import url(style.css);

如果需要引入多个css文件链接式需要写多句，可以写一个总的css，在里面用导入式导入其他的css，然后再用链接式在html中链接总的css

四种CSS引入方式的优先级

Cascading OrderGenerally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:Inline style (inside an HTML element)External and internal style sheets (in the head section)Browser defaultSo, an inline style (inside a specific HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or a browser default value.    ---http://w3schools.bootcss.com/default.html

也就是说在标签内定义的优先级最高，其次<head>中<style>定义的，其次是外部的。<head>标签中如果外部引入在<style>标签之前引入，那么<style>标签将会覆盖外部引入相同的部分，反之亦然。

0 0