### 六 背景
1 背景颜色：background-color
2 背景图片：background-image:url(图片路径)---双引号可加可不加
3 背景图片平铺：background-repeat:repeat(默认)/no-repeat/repeat-x/repeat-y
4 背景图片定位：background-position:①px(v1-一起设置x，y轴；v1 v2 分别设置x轴y轴)；②% 以高度为标准,也分x轴y轴；③关键字：x轴（left/center/right）y轴（top/center/bottom）
5 背景图片的尺寸：background-size:①v1 同时设置x，y轴，v1,v2分别设置；②px/%；③cover：覆盖，要求容器被全部填满，图片可能显示不全；④contain：容器包含完整的图片，容器可能填不满
6 背景图片固定：background-attactment:①scroll 默认值，背景图片跟随页面滚动条而滚动；②fixed：固定，背景图片相对页面位置固定，不会随页面滚动条而滚动，永远显示可视区域内，但是只有在当前元素内可见，改变了背景图片定位的参照物，变为了body。
**简写方式： background:color image repeat attachment position**
**最简方式：background：color/image**
**可以使用背景图片固定实现页面滚动效果
编写样式的思路：
1 找到目标元素
从上往下
从外往内
从左往右写
2 给这个元素编写样式
①先写宽高，大体位置
②边框和背景的所有
③文本的所有操作
④微调
### 七 渐变
多种颜色平缓变化的一种效果
渐变的主要因素:色标---颜色,以及颜色出现的位置
渐变分类:
##### (1)线性渐变:
直线的方式填充渐变色;
background-image:linear-gradient(方向,色标1(#aaa 0%),色标2...)
方向表示方式:(终点:to top/bottom.../)(角度:0deg-to top;90deg-to right;180deg-tobottom;270deg-to left)
##### (2)径向渐变:
以圆形的方式填充颜色
background-image:radial-gradient(半径 at center center(圆心坐标),色标1,色标2...)
半径:px为单位的数字;
圆心坐标:①关键字:x left/center/right ;y top center bottom②x% y%;③px单位的数字
##### (3)重复渐变:
线性,径向渐变重复几次实现
repeat-linear-gradient(方向,色标1...)
repeat-radial-gradient(半径 at 坐标,色标1...)
##### (4)渐变浏览器兼容性问题
为了让样式可以在低版本浏览器中运行,写的css代码,叫做css hack
浏览器内核:(********)
**-webkit-**: chrome/safari
**-moz-**:firefox
**-ms-**:IE
**-o-**:opera
-webkit-linear-gradient(top,#ff0,#0ff);(不写to)
#### 八 文本格式化
##### 1 字体样式
字号大小---font-size:px/pt/em/rem
字体设置---font-family:字体1,字体2;(找到字体库中有的第一个字体应用)
字体加粗---font-weight: ①关键字:lighter/normal/bold/bolder;②无单位100-1000(100的整倍数)
字体样式---font-style:italic(斜体)/normal(正常)
大型小写字母---font-variant:small-caps;
**简写:font:style varient weight size family;**
**最简: font:size family;**