html笔记（4）

大小

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

颜色

color：颜色的英文｜#16进制值｜rgb（r,g,b）｜rgba(r , g ,b 透明度)

粗细

font-weight:400normal|700bold;
400或者normal代表正常粗细；
700或者bold代表粗

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

font-family：['类型1'，'类型2'];

字体样式【是否倾斜】

font-style：noymal;itlic
 normal：正常
 italic：倾斜

行高

一行文字所占的高度【文字本身大小+间隔】
line-height：*px
应用：单行文字垂直居中；
多行文字，调整行间距## 

文本水平对齐

text-align:left ｜ center | right | justify
justify是针对多行文字对齐

文本缩进

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

文本修饰线

text-decoration:none | underline | line-through
none:没有线
underline：下划线
line-through：删除线、贯穿线

font符合属性

可以设置多个样式，但是最简的形式都必须带字体大小和类型

列表相关的属性

list-style：none；去掉序列的样式

继承

有上下级关系的元素之间，上级元素的样式被下级元素拥有，这就是继承
文本和列表相关的属性可以被继承
  a>继承
  样式标签：span 无意义标签

背景相关的属性

  1.背景颜色：background-color 颜色
  2.背景图片：background-image：url（图片路径）
  3.背景平铺：background-repeat：no-repeat；｜设置图片不重复
  4.背景起始位置：background-position：x的坐标，y的坐标 //也可以是对应方向的英文
  5.背景的大小：background-size：宽度，高度
  6.背景的固定：background-attachment：fixed
  7.背景的复合属性：background：属性值；

精灵图的步骤

  1.实现一个指定大小的盒子
  2.设置精灵图为背景图
  3.通过background-position调整背景图的位置
  优缺点：
  1.性能好
  2.命名少
  3.步骤繁琐，增删图标麻烦

单行文本溢出显示省略号

  1.设置宽度：width：*px
  2.强制不换行：white-space：nowrap；pre（保留空白）
3.溢出隐藏：overflow：hidden；
4.文本溢出的标识为省略号：text-overflow：ellipsis