语法：
属性声明 = 属性名：属性值
selector{
property1:value;
property2:value;
}
私有属性：
chrome，safari：
-webkit-
firefox：
-moz-
IE：
-ms-
opera：
-o-
用法：
.pic{
-webkit-transform:rotate(-3deg);
-moz--transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
为了能够兼容所有的浏览器。
属性值语法
基本元素 + 组合符号 + 数量符合
例如margin是属性名，length是基本元素，组合符号是|，数量是{1,4}
属性值语法
基本元素
关键字
auto solid bold
类型
基本类型(<length>,<percentage>,<color>...)
其他类型(<'padding-width'>,<color-stop>...)
符号(/,)
inherit,initial
文档中是隐藏的，因为每个元素都可以取到
组合符号
组合符号 空格
顺序不能反，必须都出现
空格组合符号
组合符号 &&
顺序无所谓，必须都出现
&&组合符
组合符号||
至少要出现一个
组合符号||
组合符号|
只能出现一个
组合符号|
组合符号[]
分组的作用
组合符号[]
数量符号
数量符号为空
数量符号 无
数量符号+
出现一次或者多次
数量符号+
数量符号？
可出现可不出现
数量符号？
数量符号{}
可以出现的次数范围
数量符号{}
数量符合*
可以出现0次或者n次
数量符合*
数量符合#
出现1次或者多次，分隔符为，
数量符合#
举例
@规则语法
两种用法：
1、@标识符 xxx;
2、@标识符 xxx{}
常用规则
@media
@keyframes
@font-face 引入外部字体
@规则
选择器
选择器分类
选择器权重
不进位的计算，即id永远高于所有，10永远高于1，11个1还是不如一个10
举例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#id1{
background: blue;
}
.c1 .c2 .c3 .c4 .c5 .c6 .c7 .c8 .c9 .c10 .c11{
background: red
}
</style>
</head>
<body>
<div id="id1" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">Hello</div>
</body>
</html>
/*即便是11个类选择器，还是不如一个id选择器的权重高*/
简单选择器
简单选择器
标签选择器
标签选择器
类选择器
使用的是.className
类选择器
id选择器
idName
相同的ID只能出现一次，区分大小写
id选择器
标签选择器
通配符选择器
通配符选择器
属性选择器
[attribudeName]
属性选择器1
属性选择器2
[attribudeName = xxx]
属性选择器也可以是
[attribudeName = xxx]
类似于id选择器
idName {}
[id = idName]{}
[attribudeName ~= xxx]
是指属性名包含这个xxx名称的，且是以空格为分隔符的
类选择器就是这种属性选择器的特例。
属性选择器3
显示属性以val开头中间有-或者就是val的
属性选择器4
以某个名称开头的，这里看到有引号将此值引起，是因为如果是特殊符号或者是有空格，则将其引起
属性选择器5
以什么结尾
属性选择器6
属性值是否包含某个字符串
属性选择器7
伪类选择器
link 连接， 只用于a标签
visited 已经访问过的， 只用于a标签
hover鼠标移动上去的时候， 可用于其他标签
active用户点击上去的时候，可用于其他标签
伪类选择器1
伪类选择器2
伪类选择器3
伪类选择器4
伪类选择器5
伪类选择器6
伪元素选择器
使用两个冒号
第一个字母的样式
某段文字前后插入文字
选择块
组合选择器
组合选择器
后代选择器
main所有h2后代元素
.main>h2{color:red;}
image.png
兄弟选择器
h2+p
h2的直接兄弟p
直接兄弟
h2~p
h2的所有兄弟p
所有兄弟元素p
选择器分组
相同的元素用逗号隔开
继承
image.png
可继承属性
不可继承属性
inherited
是否可继承
CSS优先级
a-d优先级依次降低
计算优先级
CSS层叠
image.png
相同后盖前，不同合并
通过放在后面增加优先级
通过放在后面增加优先级
增加选择器增加优先级
增加选择器增加优先级
最后是用!important
最后是用!important
网友评论