- ### 六 背景 1 背景颜色: background-color2 背景图片: background-image:url(图片路径)--- 双引号可加可不加 3 背景图片平铺: background-repeat:repeat(默认)/no-repeat/repeat-x/repeat-y4 背景图片定位: background-position:1px(v1 - 一起设置 x,y 轴; v1 v2 分别设置 x 轴 y 轴);2% 以高度为标准, 也分 x 轴 y 轴; 3 关键字: x 轴 (left/center/right)y 轴 (top/center/bottom)5 背景图片的尺寸: background-size:1v1 同时设置 x,y 轴, v1,v2 分别设置; 2px/%;3cover: 覆盖, 要求容器被全部填满, 图片可能显示不全; 4contain: 容器包含完整的图片, 容器可能填不满 6 背景图片固定: background-attactment:1scroll 默认值, 背景图片跟随页面滚动条而滚动; 2fixed: 固定, 背景图片相对页面位置固定, 不会随页面滚动条而滚动, 永远显示可视区域内, 但是只有在当前元素内可见, 改变了背景图片定位的参照物, 变为了 body.** 简写方式: background:color image repeat attachment position**** 最简方式: background:color/image**** 可以使用背景图片固定实现页面滚动效果编写样式的思路: 1 找到目标元素从上往下从外往内从左往右写 2 给这个元素编写样式 1 先写宽高, 大体位置 2 边框和背景的所有 3 文本的所有操作 4 微调 ### 七 渐变多种颜色平缓变化的一种效果渐变的主要因素: 色标 --- 颜色, 以及颜色出现的位置渐变分类:##### (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 为单位的数字; 圆心坐标: 1 关键字: x left/center/right ;y top center bottom2x% y%;3px 单位的数字 ##### (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: 1 关键字: lighter/normal/bold/bolder;2 无单位 100-1000(100 的整倍数) 字体样式 ---font-style:italic(斜体)/normal(正常) 大型小写字母 ---font-variant:small-caps;** 简写: font:style varient weight size family;**** 最简: font:size family;**
来源: http://www.bubuko.com/infodetail-3456531.html