一、css介绍
1、css(层叠样式表):叠加显示
2、版本:css1.0、css2.0、css3.0(兼容问题)
3、主流:css2
为什么要用css
二、如何引用css
三种:
1、内联样式:style属性
2、内部样式:style标签
3、外部样式:
- link标签(主要使用)
- @import导入
link标签和@import导入的区别:
- link标签是一种标签,@import导入是css中导入文件的一个方法
- 加载顺序不一样:link同时加载,import先加载页面,再加载样式。
- 兼容性:import css2.1提出有兼容性问题
- dom操作:dom可以操作link引入的样式表。
三、css基本结构
选择器{
属性:值;
}
四、选择器
1、标签选择器
标签名{
color:red;
}
2、id选择器
#id名称{
color:red;
}
3、类选择器
.类名{
color:red;
}
4、通用选择器(网页上所有元素)
*{
属性:值;
}
权重值:
通用:0
标签:1
class类:10
id:100
复合权重:各选择器相加之和
最高权重(优先级):
!import:加在属性值的后面
p{
color:red !import;
}
style属性的优先级:高于内部或外部属性。
5、复合选择器
- 后代选择器:空格
选择器1 选择器2 选择器3{
属性:值;
}
- 子代选择器:>
选择器1>选择器2{
属性:值;
}
- 并集选择器:,
选择器1,选择器2,选择器3{
属性:值;
}
- 交集选择器:(没有任何分隔。如果有标签选择器,必须放在前面。)
属性的继承性