CSS（2）

(一）CSS 的复合选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格.nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于.nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号.nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus记住这个写法

链接伪类选择器实际工作开发中的写法：

/* a是标签选择器所有的链接*/
a {
color: gray;
}
/* :hover是链接伪类选择器鼠标经过*/
a:hover {
color: red;
/*鼠标经过的时候，由原来的灰色变成了红色*/
}

:focus 伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus
	{
		background-color:yellow;
	}

(二）CSS 的元素显示模式

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度和高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

1.常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
2.常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。
3.在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素

元素显示模式转换

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block

一个小工具的使用snipaste

1.F1 可以截图. 同时测量大小, 设置箭头书写文字等
2.F3 在桌面置顶显示
3.点击图片, alt 可以取色(按下shift 可以切换取色模式)
4.按下esc 取消图片显示

一个小技巧单行文字垂直居中的代码

让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

(三）CSS 的背景

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background–image	背景图片	url(图片路径）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是X和Y坐标
background-attachment	背景附着	scroll(背景滚动）/fixed(背景固定）
背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3);后面必须是4个值

1.参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2.参数是精确单位
如果参数值是精确坐标，那么第一个肯定是x 坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
3.参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标