常用样式汇总（一）

学习目标：

background 背景颜色；
font 字体设置；
文本设置；
overflow；

background(背景)：

background-color:颜色；（三种形式颜色值：关键词、rgb、十六进制颜色值）；
background-image:url(背景图片地址)；
路径：
- 绝对路径：
- 相对路径：
background-repeat: repeat(重复);repeat-X(x轴重复)；repeat-Y（Y轴重复）；no-repeat(不重复);
background-position:位置；（背景定位，控制背景的位置）；
- 值：
  - 具体数值：（单位：PX）
  - 关键词：
    - top(上)、bottom(下)、left(左)、right（右）、center（居中）；
  - 百分比：（%）
    - 百分比的计算是基于：盒子的宽/高 -背景的宽高得到的结果，计算的；
  - 值的个数：
    - 一个：x center（默认）；当只写一个值的时候，另一个值默认为center；
    - 两个：x y；
- 配合关键词可以更好的指定背景的位置：
  - background-position: right 20px bottom 50px;（设置距离右边和底部的位置）；
- background-size:(放大缩小)：
  - background-size:50%;(当有一个值的时候，另一个值会等比例缩小或放大)；
  - background-size:cover;(优先铺满整个div，可能超出div，等比例缩放)；
  - background-size:contain;（优先展示图片，等比例缩放）；
- background-attachment:(fixed/scroll 背景滚动)：
  - fixed:滚动条发生改变背景图片固定不变；
  - scroll：背景跟随滚动条滚动；
复合样式：
- background:url(../images/1.jpg)(地址，无顺序要求)、no-repeat(不重复，无顺序要求)、#000（颜色，无顺序要求），scroll（滚动，无顺序要求）、postion/size（定位在前面，大小在后面，中间用斜杠隔开，顺序不能错）；

font :文字

font-weight: 文字粗细；
- 正常默认：400；
- 文字粗细；（不需要加单位px）；
- 关键词：normal(正常)、bold(加粗)；
font-family: 字体；
- font-family:'宋体';
- 可到'字体中国'网站下载各种字体，安装到电脑中使用；
- font-family:italic(斜体)；
font-size:字体大小；
- 谷歌最小显示字体12px；
- 不设置情况下，一般默认16px；
@font-face:自定义字体，字体图标（iconfont）；
- iconfont.cn；
line-height : 行高；(一行文字所占用的高度)；
- line-height:100px;（过大可溢出，过小可重叠）；
- 一行文字总是在它的行高里面上下居中；

文本设置

color: 颜色；
- color:#000;
text-indent:
- text-indent:30px；(文字缩进30px距离)；
- text-indent:1em;(文字缩进1个字,不受文字大小影响);
- text-decoration:underline;(下划线);
- text-decoration:line-through;(删除线)；
- text-decoration:overline(上划线)；
word-spacing:10px (词与词之间距离)；（适合用于英文）；
letter-spacing：10px（字与字之间距离）；
word-break：break-all；（打断强制换行）；
white-space：nowrap（强制不换行）
text-shadow:(阴影)；
- text-shadow:3px 3px 5px #f00;(前两个值是设置文字阴影偏移量，第三个值是阴影模糊程度，第四个值是颜色)；（IE6和IE8不兼容）；
overflow：文字超出显示设置；
- overflow：visible；（默认可见）；
- overflow：hidden；(超出隐藏)；
- overflow : scroll;( 超出元素内滚动)；

2_常用样式汇总（一）

常用样式汇总（一）

学习目标：

background(背景)：

font :文字

文本设置