背景图片相关

1） 设置背景图片

background-image : url("路径")

设置背景图片，指定图片路径，如果路径中出现了中文或空格，需要加引号

2） 设置背景图片的重复方式

默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：

1 如果元素尺寸大于图片尺寸，会自动平铺，直到铺满整个元素

2 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见

background-repeat:repeat/repeat-x/repeat-y/no-repeat

取值：

1. repeat：默认值，沿水平和垂直方向重复平铺
2. repeat-x：沿x轴重复平铺
3. repeat-y：沿y轴重复平铺
4. no-repeat：不重复平铺

3） 设置背景图片的显示位置

默认显示在元素左上角

background-position:x y;

取值方式：

1. 像素值：设置背景图片的在元素坐标系中的起点坐标

2. 方位值：

1. 水平：left/center/right
2. 垂直：top/center/bottom
3. 注： 如果只设置某一个方向的方位值，另外一个方向默认位center

4） 设置背景图片的尺寸

background-size: width height;

取值方式：

1. 像素值

1. 500px 500px; 同时指定宽高
2. 500px; 指定宽度，高度自适应

2. 百分比

        百分比参照元素的尺寸进行计算

1. 50% 50%; 根据元素宽高，分别计算图片的宽高
2. 50%；根据元素宽度计算图片宽高，图片高度等比例缩放

背景属性简写

background: color url("") repeat postion;

注意：

1. 如果需要同时设置以上属性，遵照相应顺序书写
2. background-size 单独设置 

文本属性

1.字体相关

1） 设置字体大小：

font-size:20px;

2) 设置字体粗细程度

font-weight: normal;

取值：

1. normal（默认值）等价于400
2. bold （加粗） 等于700

3) 设置斜体 

font-style: italic;

4) 设置字体名称

font-family: Arial, "黑体";

取值：

1. 可以指定多个字体名称作为备选字体，使用逗号隔开
2. 如果字体名称位中文，或者名称中出现了空格，必须使用引号

 5） 字体属性简写

font: style weight size family;

注意：

1. 如果四个属性都必须设置，严格按照顺序书写
2. size family 是必填项

 

2 文本样式

1） 文本颜色

color:red;

2) 文本装饰线

text-decoration: none;

取值：

1. underline       下划线
2. overline         上划线
3. line-through   删除线
4. none              取消装饰线

3） 文本内容的水平对齐方式

text-align: center;

取值：

1. left(默认)：左对齐
2. center：居中对齐
3. right ：右对齐

line-height: 30px;

使用：

文本在当前行中永远居中，可以借助行高调整文本在元素中的垂直显示位置

• line-height=height：设置一行文本在元素中垂直居中
• line-height>height：文本下移显示
• line-height<height ：文本靠上显示

特殊：line-height可以采用无单位的数值，代表当前字体大小的倍数，以此计算行高