6.2 我只想睡一个自然醒的觉

属性选择器
**选择器                          **含义
E[attr]****                     存在attr属性即可
E[attr=val]****              存在attr属性即可
E[attr*=val]****             存在attr属性即可
E[attr^=val]****            存在attr属性即可
E[attr$=val]****            存在attr属性即可

伪元素选择器
1. E::first-letter 文本的第一个单词或字 (如 中文 日文 韩文等)
2. E::first-line 文本第一行
3. E::selection 可改变选中文本的样式
例：p::first-letter {
    font-size: 20px;
    color: hotpink;
}
/* 首行特殊样式 */
p::first-line {
    color: skyblue;
}
p::selection {
 /* font-size: 50px; */
 color: orange;
}

4. E::before和E::after
在E元素内部的开始位置和结束位置创建一个元素 该元素为行内元素 并且需要结合content属性使用
div::before {
content:"开始";
}
div::after {
content:"结束";
}
E:after E:before在旧版本中是伪元素 CSS3的规范里":"用来表示伪类 "::"用来表示伪元素 但是在高板浏览器下E:after E:before会被自动识别为 E::after E::before 这样做的目的是用来做兼容处理
E:after E:before 后面的联系中会反复用到 目前只需要有个大致的了解
":"与"::"区别在于区分未来和伪元素

CSS书写规范
空格规范
[ 强制 ] 选择器与 { 之间必须包含空格
示例 : .selector {} 
[ 强制 ] 属性名 与之后的 : 之间不允许包含空格 : 与属性值之间 必须要包含空格
示例 : font-size: 12px;

选择器规范
[ 强制 ] 当一个 rule 包含多个 selector 时 每个选择器声明必须独占一行
示例 : 
```
/* good */
.post,
.page
.comment {
    line-height: 1.5;
}
/* bad */
.post, .page, .comment {
    line-height: 1.5;
}
[ 建议 ] 选择器的嵌套层级应不大于 3 级 位置靠后的限定条件应尽可能精确

示例 : 
/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
,comment div * {}

属性规范
[ 强制 ] 属性定义必须另起一行
示例 : 
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0;}
[ 强制 ] 属性定义后必须以分号结尾
示例: 
/* good */
.selector {
padding: 0;
}
/* bad */
.selector {
margin: 0;
}

CSS背景(background)
背景图片(image)
语法: background-image: url(图片的路径)

背景平铺(repeat)
语法: background-repeat: no-repeat; /* 不平铺 */  查手册

背景位置(position)
语法: 
background-position : length || length
background-position : position || position
参数:
length : 百分数 | 由浮点数字和单位标识符组成的长度值 请参阅长度单位
position : top | center | bottom | left |center | right

说明:
1. position后面是X坐标和Y坐标 可以使用方位名词或者精确单位
2. 如果和精确单位和方位名字混合使用 则必须是X坐标在前面 Y坐标在后面 比如 background-position: 15px top; 则 15px 一定是 X坐标 top 是Y坐标

背景附着
语法:
background-attachment : scroll | fixed
参数:
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
说明 : 设置或检索背景图像是随对象内容滚动还是固定的

背景简写
background属性的值的书写顺序官方并没有强制标准的 为了可读性 建议大家如下写:
background : 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0;

背景透明(CSS3)
background: rgba(0,0,0,0.3);
最后一个参数是alpha透明度 取值范围 0~1 之间
注意 : 背景半透明是指盒子背景半透明  盒子里面的内容不受影响
同样 可以给文字和边框透明 都是用 rgba的格式来写

背景缩放(CSS3)
通过background-size设置背景图片的尺寸 就像我们设置img的尺寸一样 在移动Web开发中做屏幕适配应用非常广泛 其参数设置如下 : 
a) 可以设置长度单位(px)或百分比(设置百分比时, 参照盒子的宽高)
b) 设置为cover时 会自动调整缩放比例 保证图片始终填充满背景区域 如有溢出部分则会被隐藏
c) 设置为 contain 会自动调整缩放比例 保证图片始终完整显示在背景区域
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

多背景(CSS3)
以逗号分隔可以设置多背景 可用于自适应布局
background-iamge: url('images/gyt.jpg'),url('images/robot,png');

凹凸文字
body {
background-color: gray;
font: bold 6em "microsoft yahei";
}
div {
margin: 30px;
color: gray;
}
.to {
text-shadow: -1px -1px white,1px 1px #000;
}
.ao {
text-shadow: -1px -1px #000, 1px 1px white;
}

文本的装饰
text-decoration  通常我们用于给链接修改装饰效果