复合选择器
复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成
快速定位到所需要的标签
1.后代选择器->包含关系
2.子代选择器
只能选择作为一种某元素最近的元素
3.并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式。
元素1,元素2{样式声明}表示选择元素1和元素2 元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
约定的语法规范，我们并集选择器喜欢竖着写
注意：最后一个选择器 不需要加逗号
4.链接伪类选择器
（1）未访问过得链接a:link 把没有点击过得链接选出来
（2）a:visited 选择点击过得
（3）a:hover 选择鼠标经过的链接
（4）a:active 选择鼠标正在按下还没有弹起鼠标的那个链接
5.focus伪类选择器->用于选取获得焦点的表单元素
焦点：光标 input表单元素才能获取到 针对表单元素
把获得光标的input表单元素选取出来
复合选择器总结
选择器 作用 特征 使用情况 符号和用法
后代选择器 用来选择后代元素 可以子孙后代 较多 空格
子代选择器 选择最近一级元素 只能是亲儿子 较少 大于
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 逗号
链接伪类选择器 选择不同状态的链接 跟链接相关 较多 a{} a：hover
focus伪类选择器 选择获得光标的表单 跟表单相关 较少 input：focus
元素的显示模式
什么是元素的显示模式
元素（标签）以什么方式进行显示 div 自己占用一行
元素显示模式的分类
HTML元素一般分为块元素和行内元素两种类型
（1）块元素
常见的块元素 h1 – h6 p div ul ol 。。。 div是最典型的块元素
块元素的特点：
1.霸道 自己占用一行
2.高度，宽度，外边距以及内边距可以控制的
3.块元素宽度容器的100%
4.块元素------里面放行内元素
注意：
文字类的元素内不能使用块级元素
p标签 存放文字，p里面不能放块级元素 特别不能放div
同理 h1 - h6 都是文字类块级标签 ，里面不能放其他块级元素
（2）行内元素
常见的行内元素 a strong b em i del s ins u span 。。。 span标签最典型的行内元素
行内元素的特点
1.相邻的行内元素在一行 一行可以显示多个
2.高、宽度直接设置是无效的
3.默认的宽度就是本身的内容的宽度
4.行内元素只能容纳文本或者其他行内元素
注意：
链接里面不能再去放链接
特殊的情况a 里面可以放块级元素
（3）行内块元素
特殊的标签 img input td 他们同时具有块元素和行内元素的特点
行内元素的特点
1.和相邻的行内元素（块元素）在一行上，但是他们之间空白的缝隙，一行显示多个
2.默认宽度是内容的宽度（行内元素的特点）
3.宽度、行高、边距以内边距都可以控制（块元素的特点）
元素显示模式的总结：
元素显示模式的分类
块级元素 一行只能放一个 可以设置宽高 容器100% 容器可以包含任何标签
行内元素 一行多个行内元素 不能设置宽高 内容的高度 容纳文本或者其他的行内元素
行内块元素 一行放多个行内块元素 可以设置宽高 内容的宽高
学习元素显示模式主要的目的就是分清他们各自的特点，网页布局的时候，在合适的地方使用合适的标签元素
元素显示模式的转换
转换为块元素：display：block；
转换为行内元素：display：inline；
转换为行内块元素：display：inline-block
CSS没有提供让蚊子垂直居中的代码。 技巧实现
解决：让文字的行高等于盒子的高度，就可以完成文字在当前的盒子垂直居中
CSS的背景：页面元素添加背景样式
背景属性可以设置背景颜色、背景的图片、背景的平铺、背景的图片位置、背景图片固定
1.背景颜色：background-color 颜色值 透明的transparent
2.背景图片：background-image 属性 背景图像 超大的背景图片
none代表没有背景图片（默认值）url可以使用绝对或者相对路径
3.背景的平铺
CSS背景属性，可以给页面元素添加背景样式
HTML中页面对背景图片进行平铺 background-repet 参数值：repeat 背景图像在纵向上和横向上平铺的（默认的）
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
页面元素既可以背景颜色也可以添加背景图片，只不过，背景图片会把你的背景颜色盖住
4.背景图片的位置：background-position 属性 改变图片在背景中的位置
background-position：x y；参数表示：x、y坐标 方位名称
top center bottom left right
如果方位名词right center和center right 效果是一样的 跟顺序没有关系
如果方位名词只给right 此时水平一定靠右对齐 第二参数省略了y轴 垂直居中显示的
如果方位名词只给top 此时水平一定靠上对齐 第一参数省略了x轴 靠上居中显示的
背景图片的位置
1.参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关 left top top left等价的
如果只指定了一个方位名词，另一个省略了 则第二个默认居中对齐
2.参数是精确的单位
如果说参数是精确的坐标 那么第一个x坐标 第二个y坐标
如果只指定了一个数值 那么数值一定是x坐标 另一个垂直居中的
3.参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，第一个值是x坐标，第二个值y坐标
CSS背景图像固定
background-attachment：属性设置背景图像是否固定或者随着页面的其他部分滚动
background-attachment 后期制作视觉滚动效果
scroll 背景图片随着对象内容滚动
fixed 背景图像固定的
背景属性的复合写法
为了实现代码的简化，可以将以上谢在同一个属性background
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
实际开发中 提倡这种写法
CSS3中提供了背景颜色半透明效果
background：rgba（0,0,0,0.3）
alpha透明度，取值0-1之间
习惯吧0.3的0省略掉，background（0，0，0，.3）
注意：背景半透明指盒子背景的半透明，盒子中内容不受影响
CSS3新加属性IE9+
背景总结：
background-color 背景颜色
background-image 背景图片
background-repeat 是否平铺
background-position 背景定位
background-attachment 背景附着
背景简写 书写简单（背景颜色、背景图片、背景平铺、背景滚动、背景附着）
半透明 背景颜色半透明（background：rgba（）后面必须4个值）
1572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
