重新学习CSS

选择器进阶

后代选择器

选择器1 选择器2{
    属性:属性值;
    属性:属性值;
    ....
    选择器1和选择器2之间用空格隔开,后代选择器选中的是子孙后代.
    例如: .nav a{};
}

子代选择器

选择器1 >选择器2{
    属性:属性值;
    属性:属性值;
    ....
    选择器1和选择器2之间用大于号隔开,子代选择器只能选中亲儿子.(亲儿子选择器)
    例如: .nav>a{}
}

交集选择器

选择器1选择器2{
    属性:属性值;
    属性:属性值;
    ....
    选择器1和选择器2之间没有空格,交集选择器既又的关系.
    例如 div.red{}
}  

并集选择器

选择器1,选择器2{
    属性:属性值;
    属性:属性值;
    ....
    选择器1和选择器2之间用逗号隔开,逗号理解为和的意思.
    并集选择器习惯竖着写,最后一个选择器的后面不需要逗号
    例如:div,p,ul .red{}
}

伪类选择器

选择器:hover{
    属性:属性值;
    属性:属性值;
    ....
    设置鼠标经过的样式.
    :hover的前面和后面千万不要有空格.
}

背景系列

背景颜色 背景图片 背景是否平铺 背景固定 背景位

background-color:transparent | color ;
background-image:none|url(图片路径)
background-repeat:repeat | no-repeat | repeat-x | repeat-y 
background-attachment : scroll | fixed 
background-position:x y
	方位名词
		水平位置:left|center|right
		垂直位置:top|ceenter|bottom	
	background-positio:center center
	精确单位
		数值+px
	background-position:10px 20px
	混合单位
	background-position:center 20px

元素显示模式

元素(标签)按照什么样的方式进行显示.

块级元素

1. 独占一行

2. 可以设置宽高

3. 如果不给宽度,宽度默认父级宽度的100%

4. 块级元素可以容纳块级元素 行内元素 行内块级(文字类型的块级元素不能包含div h系列 p不能包含div)

行内元素

1. 一行显示多个

2. 设置宽高无效

3. 默认宽高由内容决定

4. 行内元素容纳文本或其他行内元素(a不能包含a,但是a可以包含块级元素,建议转换)

行内块元

1. 一行显示多个

2. 可以设置宽度

元素显示模式转换

/* 转换为块级元素*/
display:block;
/* z转换为行内块元素*/
display:inline-block;
/*转换为行内元素*/
display:inline

CSS三大特性

子元素可以继承父元素的某些样式(子承父业)

可以继承的常见属性

1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. list-style
....

继承的特殊情结: a的颜色 h系列的字体大小不能被继承,因为浏览器给了默认的样式,但是会被浏览器默认的样式覆盖.  

层叠

相同选择器设置相同的样式就会层叠.

相同选择器设置不同的样式就会叠加.

优先级

基础选择器优先级

继承<通配符<标签选择器<类选择器<id选择器<行内样式<!important

权重叠加

<