CSS三种引入方式
一、三种方式的书写规范
1、行间式
<div style=" 100px; height: 100px; background-color: red"></div>
行间式
1.在标签头部的style属性内
2.属性值满足的是css语法
3.属性值用key: value形式赋值,value具有单位
4.属性值之间用;隔开
2、内联式
<head>
<style>
div {
100px;
height: 100px;
background-color: red;
}
</style>
</head>
内联式
1.在style标签内(style标签一般作为head的子标签)
2.属性值满足的是css语法
3.属性值用key: value形式赋值,value具有单位
4.属性值之间用;隔开(一般独行分开赋值)
5.格式: 选择器{样式块}
<div></div>
3、外联式
file: zero.css
div {
100px;
height: 100px;
background-color: red;
}
file: zero.html
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
外联式
1.在外部css文件中
2.属性值满足的是css语法
3.属性值用key: value形式赋值,value具有单位
4.属性值之间用;隔开(一般独行分开赋值)
5.格式: 选择器{样式块}
6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接)
二、三种方式间的"优先级"
- 与样式表的解析顺序有关
注:三种方式间没有优先级
1.三种方式协同布局:
2.不重复的属性一定为唯一位置的唯一值
3.重复的属性采用覆盖赋值,保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
5.!important会影响优先级