1.css样式特征
1.继承性
大部分样式属性可以子元素继承
body{
color:red;
}
<div>继承body的样式特征</div>
2.层叠性
为一个元素定义多个选择器时,当样式声明不冲突时,
多个样式层叠为一个元素所应用
3.优先级
如果样式冲突时,按照不同样式的优先级来应用样式
内部样式与外部样式中(就近原则)
内联样式--最高
**:浏览器的缺省设置最低
练习:给<div>元素设置内部样式要求字体颜色为蓝色,背景颜色为灰色,
然后在外部样式表中设置其字体 颜色 为绿色,在网页中将外部样式表引入 进来
查看页面效果???
然后再设置内联样式字体为红色,背景颜色为黑色,查看页面效果?
4.调整显示优先级
!important 规则
将!important添加到样式属性值的后面,中间用空格隔开
作用:调整显示的优先级
eg:
div{
color:red !important;
}
2.基础选择器
选择器的作用:将定义好的样式匹配给页面中的元素
1.通用选择器
匹配页面中所的元素
语法:*{
属性:属性值;
属性:属性值;
.....
}
***:效率低,尽量少用
2.元素选择器
又称标签选择器,标记选择器
作用:定义页面中某一元素的样式
语法:
由元素的名称作为选择器
eg:
div{}
h3{}
img{}
header{}
3.类选择器
通过元素所附带的class属性值对选择器进行引用
语法:
.类名{
样式声明
......
}
特点:
一段公共的样式,谁想用,谁就可以引用
***:
自定义类名不能以数字开头,不能包含特殊字符($,%,^,&,@,#),可以包含(-,_)
eg:
<p class="类名">内容</p>
多类选择器:
允许让一个元素应用多个类选择器
<p class="类名1 类名2 类名3">内容</p>
分类选择器:
将元素选择器和类选择器联合使用,从而实现对元素的不同样式的细分控制
语法:
元素选择器.类选择器{
样式声明
}
4.id选择器
5.群组选择器
6.后代选择器
7.伪类选择器
1.继承性
大部分样式属性可以子元素继承
body{
color:red;
}
<div>继承body的样式特征</div>
2.层叠性
为一个元素定义多个选择器时,当样式声明不冲突时,
多个样式层叠为一个元素所应用
3.优先级
如果样式冲突时,按照不同样式的优先级来应用样式
内部样式与外部样式中(就近原则)
内联样式--最高
**:浏览器的缺省设置最低
练习:给<div>元素设置内部样式要求字体颜色为蓝色,背景颜色为灰色,
然后在外部样式表中设置其字体 颜色 为绿色,在网页中将外部样式表引入 进来
查看页面效果???
然后再设置内联样式字体为红色,背景颜色为黑色,查看页面效果?
4.调整显示优先级
!important 规则
将!important添加到样式属性值的后面,中间用空格隔开
作用:调整显示的优先级
eg:
div{
color:red !important;
}
2.基础选择器
选择器的作用:将定义好的样式匹配给页面中的元素
1.通用选择器
匹配页面中所的元素
语法:*{
属性:属性值;
属性:属性值;
.....
}
***:效率低,尽量少用
2.元素选择器
又称标签选择器,标记选择器
作用:定义页面中某一元素的样式
语法:
由元素的名称作为选择器
eg:
div{}
h3{}
img{}
header{}
3.类选择器
通过元素所附带的class属性值对选择器进行引用
语法:
.类名{
样式声明
......
}
特点:
一段公共的样式,谁想用,谁就可以引用
***:
自定义类名不能以数字开头,不能包含特殊字符($,%,^,&,@,#),可以包含(-,_)
eg:
<p class="类名">内容</p>
多类选择器:
允许让一个元素应用多个类选择器
<p class="类名1 类名2 类名3">内容</p>
分类选择器:
将元素选择器和类选择器联合使用,从而实现对元素的不同样式的细分控制
语法:
元素选择器.类选择器{
样式声明
}
4.id选择器
5.群组选择器
6.后代选择器
7.伪类选择器