H5基础第五课时CSS篇（2）

CSS文本属性
1. 字体、字号：
    (1)font（缩写形式）
    (2)font-weight 粗细
     bold 加粗、bloder 深度加粗、lighter 细体、数值 100-900
    (3)font-size 大小
     具体的px值、百分比（默认字体大小16px）
    (4)font-family 字体系列:
         衬线体 serif 有箭头的字体
         非衬线sans-serif  网页中常用
         等宽体 Monospace
      字体族名称，可以多个以“，”隔开；类族名称，必须以类族名称结尾。
     前面是字体族名称 最后一个是类族名称
     浏览器在显示字体的时候，依次判断是否支持当前的字体，直到最后的字体系列  
p{
    font-family: "宋体","仿宋",sans-serif;
}
    (5)font-style 字体样式
     italic 斜体
    (6)Font简写顺序
         font-style,font-variant,font-weight,font-size,line-       height,font-family
2.字体颜色：
 color
 opacity：0-1（透明度 css3）
3.行距、对齐等：
 (1) line-height 行高 通过设置文本的行高与外部容器的高度一致，可以实现文本垂直居中
     单行字体占用的高度   px、%  
      p{
            border: 1px solid red;
            text-align: center;
            line-height: 100px;
            width: 200px;
            height: 100px;
        }
 (2) text-align 对齐
     justify：两端对齐 start=left：左对齐（默认） end=right：右对齐      center：居中对齐 
 (3) letter-spacing 字符间距
      px、normal
 (4) text-decoration 文本修饰
     上划线 overline、下划线 underline、中划线 line-through
 (5) overflow 溢出
     自动处理 auto、隐藏 hidden、滚动条显示 scroll
 (6) text-overflow
     clip： 当内联内容溢出块容器时，将溢出部分裁切掉。 
     ellipsis： 当内联内容溢出块容器时，将溢出部分替换为（...）。 
     一般无法直接显示 一般和其他配合使用
   比如： overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
 (7) text-shadow 阴影
     text-shadow: length1 length2 （length3）color;
<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
<color>： 设置对象的阴影的颜色。
   例子： text-shadow: 2px 2px yellow;
 (8) -webkit-text-stroke 文本描边颜色 大小 颜色
     -webkit-text-stroke: 大小 颜色;
   例子：-webkit-text-stroke: 2px yellow;
 (9)text-indent 文本缩进
    <length>： 用长度值指定文本的缩进。可以为负值。 
    <percentage>： 用百分比指定文本的缩进。可以为负值。 
    each-line： 定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3） 
    hanging： 反向所有被缩进作用的行。（CSS3） 
   例子：text-indent: 2em; em为相对缩进单位
4.背景属性
  (1)background 缩写形式
  (2)background-color 背景色
  (3)background-image 背景图片
     background-image: url("图片路径"); 
  (4)background-repeat 图片是否平铺
     repeat-x： 背景图像在横向上平铺 
     repeat-y： 背景图像在纵向上平铺 
     repeat： 背景图像在横向和纵向平铺 
     no-repeat： 背景图像不平铺 
     round： 背景图像自动缩放直到适应且填充满整个容器。（CSS3） 
     space： 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3） 
  (5)background-position 背景图片位置 
     <percentage>： 用百分比指定背景图像填充的位置。可以为负值。 
     <length>： 用长度值指定背景图像填充的位置。可以为负值。 
     center： 背景图像居中。 
     left：  背景图像左对齐。 
     right： 背景图像右对齐。 
     top： 背景图像上对齐。 
     bottom： 背景图像下对齐。 
   例子： background-position: right top;
  (6)background-size 背景图片大小 
     <length>： 用长度值指定背景图像大小。不允许负值。 
     <percentage>： 用百分比指定背景图像大小。不允许负值。 
     auto： 背景图像的真实大小。 
     cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 
     contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。