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 Order
Generally 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 default
So, 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>标签将会覆盖外部引入相同的部分,反之亦然。