一、今日知识点
1 CSS的复合选择器
1.1 什么是复合选择器
1、在CSS中，可以根据浏览器的分类把选择器分为基础选择器和复合选择器
2、复合选择器可以更加准确搞笑的定位元素
3、复合选择器是由两个或两个以上基础选择器以不同的方式组合而成的
1.2 后代选择器
1、概念：后代选择器又叫包含选择器，是可以选择父元素里面的所有符合条件的子元素
2、语法：
元素1元素2{css 样式}
元素1代表父元素，元素2代表子元素
元素1和元素2之间要用空格隔开
元素2可以是儿子也可以是孙子
元素1和元素2可以是任意类型的选择器
1.3 子选择器
1、概念：子选择器只能选择某个父元素最近的一级子元素，简单理解就是只能选择亲儿子，不能选择其他
2、语法：
元素1>元素2{css样式代码}
表示选择元素1里面最近一级元素2
1.4 并集选择器
概念：
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
并集选择器是各组选择器通过英文的逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分
1.5 伪类选择器
1、概念：伪类选择器是附加在其他选择器之上的一种选择器，可以来添加特殊的效果，比如给链接标签添加鼠标悬浮效果
2、语法：用：来进行表示 比如：hover :first-child
3、链接伪类选择器：因为伪类选择器比较多，链接伪类的使用是最频繁的
a:hover 选择鼠标指针悬浮到连接上
a:link 选择所有未被访问过的链接
a:active 选择活动链接，当鼠标按下链接时
a:visited选择所有已访问过的链接
4、焦点伪类选择器
focus：焦点伪类选择器用于选取获得焦点的元素，因为一般只有表单元素才会获取焦点，所以对于input类的表单元素使用较多
5、伪类选择器的总结
为了选择器和css类选择器一样，可以附加在其他的选择器上
向选择器添加伪类选择器的额时候，必须保证这个选择器支持这种伪类状态
2 CSS的元素显示模式
2.1 什么是CSS的元素显示模式
简单来说就是元素的显示方式，以什么样的形式来展示，比如：h1独自占一行
2.2 块元素
块元素的特点
自己独占一行
高度和宽度可以设置
宽度默认是和父元素宽度保持一致的
块元素里面可以放行内元素也可以放块元素
常见的块元素
h1~h6，<p></p>，<div></div>最有特点的，最典型的，<ul></ul>,<ol></ol>,<li></li>
注意点
文字类的元素内不能使用块元素
比如p标签中只能放文字，不要放其他的块元素，特别是div，因为会造成语义混乱
2.3 行内元素
特点：
相邻的行内元素在一行上进行展示，一行可以显示多个
宽高设置无效
默认的宽度和高度是里面内容的高度
行内元素只能容纳文本或者其他的行内元素
常见的行内元素：
<span></span>,<strong></strong>,<a></a>等等
注意点：
链接里面不要再套链接
如果a标签里面嵌套块元素，那么需要先将a标签转化为块元素才可以
2.4 行内块元素
特点：
相邻的元素在一行上进行显示，他们之间会有空白空隙（行内元素特点）
高度和宽度都可以设置（块元素）
默认的宽度是他本身内容的大小（行内元素特点）
常见的行内块元素：
input，img，
2.5 元素的显示模式转换
转化为块元素：display:block;
转化为行内元素 display:inline;
转化为行内块元素 display:inline-block;
3 CSS的背景属性
3.1 背景颜色
属性是background-color
属性值：预定义颜色，16进制颜色，rgb颜色，transparent（透明，默认值）
3.2 背景图片
属性background-image
属性值：none（默认值，代表没有背景图），URL地址
3.3 背景平铺
background-repeat
属性
repeat背景图像平铺（横纵都平铺）
no-repeat图像不平铺
repeat-x横向平铺
repeat-y纵向平铺
3.4 背景图片定位:background-position
属性值:
具体像素单位
方位名词：left，right，top，bottom，center
注意点：
1、参数是方位名词
如果指定的两个值都是方位名词，先后顺序不会影响最后结果
如果只指定了一个方位名词，另一个默认居中
2、参数是精确单位
第一个值一定是x坐标，第二个值是y坐标
如果只有一个值，那就是x坐标，y轴默认居中
3、参数是混合单位
如果方位名词和精确单位混合使用，第一个值是x轴坐标，第二个值是y坐标
3.5 背景图片滚动：background-attachment
属性值
scroll 默认值，图片跟随浏览器进行滚动
fixed图片不随浏览器滚动
3.6 背景的复合写法
1、为了简化背景属性的代码，我们可以将属性写在复合属性background中
2、一般情况下顺序为：background：背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置
3、背景属性的顺序不是固定的，可以改变顺序，但是建议参照上面的顺序来书写
4、背景复合属性中的各个属性都可以省略。
3.7 背景半透明
CSS3为我们提供了背景半透明的效果
语法：
background:rgb(0,0,0,0,3)
最后一个参数是alpha透明的，取值范围在0~1之间
我们实际开发过程中会将0.3中的0给省略掉
背景半透明并不会影响盒子中的内容
3.8 背景缩放：background-size
属性值
具体像素值
cover
contain
4 CSS的三大特性
4.1 层叠性
如果选择器相同，设置了相同的样式，就会出现样式冲突的问题
层叠性原则
样式冲突，遵循的原则是就近原则，那个样式距离结果近就用那个
样式不冲突，会重叠
4.2 继承性
CSS中的继承，子元素会继承父元素的某些样式，比如文本属性，字体属性
4.3 优先级(权重)
当同一个元素被指定了多个选择器
|
