文本属性和背景属性

文本属性和背景属性

一、文本属性：

1. 大小

   ​ font-size：*px | *em | *rem；
   ​ px是像素，绝对大小
   ​ em是父元素的字体大小的倍数
   ​ rem是根元素的字体大小的倍数，即【html】

2. 颜色

   ​ color:颜色英文 |#16进制 |rgb(R,G,B) 透明度rgba(R,G,B,0-1透明度)

3. 粗细

   ​ font-weight:400 normal | 700 bold;
   ​ 400或者normal为正常
   ​ 700或者bold为加粗

4. 字体类型【宋体、微软雅黑】

   ​ font-family:‘类型’,‘类型2’…;

5. 字体样式【是否倾斜】

   ​ font-style:normal | italic; 正常|倾斜

6. 行高:(由文字本身的大小+间隔)上下间隔均分 注：单行文字

   ​ line-height:*px;

7. 文本缩进

   ​ text-indent:*px;
   ​ 注意：行级元素不行

8. 文本水平对齐

   ​ text-aline:left | center | right | justify;
   ​ justify针对于多行文字两行对齐

9. 文本修饰线

   ​ text-decoration:none(没有线) | underline（下划线） | line-through（删除线）;

二、列表相关的属性

​ list-style:none; 去掉序列的样式

三、继承

有上下级关系的元素之间，上级元素的样式被下级元素拥有，这就是继承
只有文本和列表相关的属性可以被继承，宽高属性不能继承。

四、背景相关的属性

1. ​ 背景颜色 background-color：颜色；
2. ​ 背景图片background-image：url（图片路径）
3. ​ 背景平铺 background-repeat：no-repeat； //设置背景图片不重复
4. ​ 背景起始位置background-position：x的坐标 y的坐标； //left right center top bottom;
5. ​ 背景大小background-size：宽度 高度；
6. ​ 背景图是否固定 background-attachment：fixe；
7. ​ 背景的复合属性background：属性值；
   通常都使用背景的复合属性background： 不区分属性值先后，除了背景起始位置和背景大小先写背景起始位置 用/分隔，再写背景大小

• 重点：精灵图(Sprite)的步骤：

  ​ 1.实现一个指定大小的盒子
  ​ 2.设置精灵图为背景图 background-image：url（）；
  ​ 3.通过调整background-position的位置。

  ​ 优缺点：性能好
  ​ 命名少
  ​ 步骤繁琐，增删图标麻烦。