一,复合样式
1,background : 复合的值通过空格隔开,并且没有顺序要求。(未在复合样式中规定的属性值会赋一个默认值)
backgroung-size : 如果想添加到复合样式中,一般加在background-position后,用/隔开 (x y / w h)
background-size : 还可以将该样式添加在复合样式后
2,border : 复合的值通过空格隔开,并且没有顺序要求。(未在复合样式中规定的属性值会赋一个默认值)
3,font : 复合写法是有顺序的,并且最少要写两个值(size family)
weight style size family
style weight size family
style weight size/line-height family
注 : text是没有复合写法的。
注 : 尽量不要混写,如果非要混写,那么先写复合样式再写单一样式。
二,CSS选择器
1,ID选择器:
快捷键创建 : div#elem + tab键 - > <div id="elem"></div>
ID选择器规范 :
在一个页面中, ID是唯一值。(身份证)
命名规范 : 由数字,字母,_组成,(命名的第一位不能是数字)
除了常规写法外,命名方式还有 : 驼峰式,下划线式,短线式。
常规:leftsidebar
驼峰式:leftSideBar
下划线式: left_side_bar
短线式:left-side-bar ( W3C推荐的写法 )
2,CLASS选择器(类选择器)
1,class选择器是可以复用的。
跟ID选择器有很大区别,复用代码的能力非常强。(在网页中使用的频率十分高)
2,可以添加多个class样式
与ID选择器的区别 : ID只能写一个, class可以写多个, 通过空格隔开。
3,多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序。
看CSS样式的优先级,不看class属性的顺序。
4.标签加类的写法 :
div.elem{}
3,标签选择器(TAG选择器)
div{} - > <div></div>
使用场景 : 1,ul{list-style:none} 2, a{text-decoration:none}
4,群组选择器(分组选择器)
div, p, h1{color: red;}
5,通配选择器
*{}(*是所有标签的意思)
使用场景 : 有时候需要去掉所有标签的默认样式。
6,层次选择器
后代 : M N
找M下的所有N。
父子 : M>N
找M下的子标签N。
兄弟 : M~N
相邻 : M+N
特点 : ~找M标签下所有的N标签
+找M标签下相邻的N标签(仅一个)
无论是 ~ + 都是找下面的兄弟,上面的兄弟不会有作用。
7,属性选择器
M [ ] : [class="elem"] * ^ $
*(模糊搜索)class里面只要有elem,div[class*="elem"]
^(起始值搜索)class起始值为elem,div[class^="elem"]
$(结束值搜索)class结束值为elem,div[class$="elem"]
组合属性选择器 : M [ ] [ ] [ ]{}
8,伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
:link 访问前的选择器 ( 只能加给a标签 )
:visited 访问过后的选择器 ( 只能加给a标签 )
:hover 鼠标移入的选择器 ( 所有标签都能添加 )