1、内联样式(行间样式,行内样式)
创建语法:
<标签 style="属性1:值1;属性2:值2; ……">
</标签>
2、内部样式表(嵌套到页面中)
创建语法:
<style type="text/css">
css语句
</style>
注:使用style标记创建样式时,最好将该标记写在<head></head>之间;
3、引用外部样式表文件
(1) 引用写法:
<link href="目标文件路径" rel="stylesheet" type="text/css" />
说明:
使用link元素导入外部样式表时,需将该元素写在文档头部,即<head>与
</head>之间。
rel:用于定义文档关联,表示关联样式表;
type:定义文档类型;
(2)、导入写法
<style type="text/css">
@import url("目标文件的路径及文件名全称");
</style>
说明:@和import之间没有空格 url和小括号之间也没有空格;括号内部加引
号,必须结尾以分号结束;
扩展知识:*link和import导入外部样式的区别:
差别1:老祖宗的差别:
link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义rel连接属
性等,@import就只能加载CSS
差别2:加载顺序的差别:
当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同
时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。
所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3: 兼容性的差别:
@import是CSS2.1提出的,所以老的浏览器不支持,
@import只在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom控制样式时的差别:
当使用javascript控制dom去改变样式的时候,
只能使用link标签,因为@import不是dom可以控制的.
4、css样式表的优先级:
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高。
CSS的样式表分类及*link和import区别
最新推荐文章于 2021-06-14 14:28:28 发布