Css 文本样式(text-align,text-decoration,text-indent,text-shadow,box-shadow,line-height,overflow... )

  
    Css 文本样式
  1. text-align:设置文本的水平对齐方式
       a.text-align:必须用于块状元素,如 <p>,<div>,
                   定义内部文本级内联元素如何横向对齐;
       b.默认值是start,取决于html文档的direction属性设置（默认都是从左至右，所以等同于left）
       c.值
        left：左对齐
        righ：右对齐
        center：居中对齐
        jusify：两端对齐（老浏览器支持不好,新浏览器效果不错）
  2.text-decoration:设置文本的修饰方式
       a.主要是用来对文本添加线条修饰
       b.值 
          none  无修饰（标准文本的默认效果）
          underline 下划线修饰（超链接的默认效果）
          line-through 删除线
          overline 上划线（基本没啥地方用到）
        c.主要是用来消除超链接的默认下划线修饰
  3. text-indent ：设置文本的首行缩进
     a.作用于块状元素,用来在块级元素的内容第一行添加一定的空格,已达到缩进的效果
     b.和font-size属性一样,对于句首行缩进，可以使用px,em或%;
     c.一般使用相对单位em,以元素本身字体尺寸为参考基数;
              中文网页中段落的首行缩进通常是2个文字的距离 ,常用代码p{text-indent:2em};
              可以使用负值,产生一些特殊的效果,如“悬挂缩进”;
     
  4. text-transform:设置文本的转换（针对英文）
     a.用于转换文字中的大小写方式（忽略源文档中的大小写）对中文无效;
     b.值
        uppercase 全部大写
        lowercase 全部小写
        capitalize 单词首字母大写;
  5.text-shadow:设置文本的阴影效果;
   a. text-shaow:用来设置文本的阴影效果，是css3新增的属性;
   b. 实现一种阴影效果需要设定一组值而非一个值,并按照一定顺序来书写;
   c.可以通过添加多组值来设定多重阴影,达到特殊效果,  多组值之间用逗号隔开;
   d.部分老的浏览器版本不支持该属性(IE9以下)
   e.值的写法：
         按顺序书写4个值：水平阴影距离>垂直阴影距离>模糊程度>阴影颜色
         水平阴影位置 ：必须;长度单位，允许负值，用来控制阴影的水平方向;
         垂直阴影位置: 必须;长度单位，允许负值，用来控制阴影的垂直方向;
          模糊程度：可选；不允许为负数 ;不写默认为0,无模糊效果,值越大阴影越模糊;
          阴影颜色: 可选 ;设置阴影的颜色,不写是=是默认等同于文本的颜色;
 6.box-shadow:针对盒子;

    none:无阴影(默认值)
    按顺序书写:阴影水平偏移值>阴影垂直偏移值>阴影模糊值>阴影外延值>阴影的颜色>阴影类型 
    阴影水平偏移值：可以为负值;必须;
    阴影垂直偏移值:可以为负值;必须;
    阴影模糊值:不允许负值;可选；
    阴影外延值:不允许负值;可选；
   阴影的颜色:可选;默认是文字的颜色;
   阴影类型:可选；默认为外阴影;inset:内阴影;
 7.line-height:设置文本的行高
  a. line-height:设置行的高度,是一个简单又复杂的属性;
  b. 可以简单的把行高看成以文字内容本身为中线，上下垂直延伸形成的空隙而成;
  c. 即将行距的值（行高-字号）/2,分别增加到内容区域的上下两边;
  d. 通常使用相对单位来设定行高,英文行高是以文本的字号为基准的;
  e.默认情况下,浏览器将行高呈现为字体的尺寸的1到1.2倍作用，行间紧凑，视觉容易感觉疲劳，所以通常情况下，
     将行高设置为字号的150%到180%之间，阅读行距的实际舒适度较好;
  d.单行文本在容器中垂直居中
     实现办法:让容器的行高等同于容器的高度; .title{height: 30px;line-height: 30px;} 
 8.overflow ：设置文本（容器内部内容(img)）溢出的控制方式;
   a.设置对象处理溢出内容的控制方式，针对的是容器的内部的内容,不仅仅是单纯的文本;
   b.此属性适用于块状元素;
   c.内容的溢出可能是横向或纵向的，因此延展开来，可以分为x轴（横向）和y轴（纵向）
   d. 属性
     overflow 包括横向和纵向的内容溢出的控制
     overflow-x:仅处理横向的内容溢出的控制;
     overflow-y:仅处理纵向的内容溢出的控制; 
   f. 值：
      visible： 内容可见,溢出到容器外部;(默认值)
      hidden：溢出内容被隐藏，无法查看；
      scroll: 无论内容是否溢出, 容器都被添加滚动条(溢出才会激活)
      auto:当内容溢出时, 容器边缘（纵向）出现滚动条;
   g. overflow:hidden;
          使固定了宽和高的容器强制隐藏内容（超出容器的内容）；
          主要防止页面布局被撑开,配合实现文字截取;
    overflow:auto;
         在某个页面或栏目板块的固定区域中调用呈现动态的内容;
 9.letter-spacing:设置字符之间的间距;
   a.设置单个字符之间的间距。中文：单个文字，英文单个字母;
   b.指定的简介将被添加字符之后;
   c.通常以字号为参考,使用相对单位来控制间距;
   d.可以是负值;
   e.怎么使用大幅度letter-spacing的文字水平居中?
    p{tex-aling:center;width:500px;font-size:12px;letter-spacing:2em;border:1px red solid,padding-left:24px}
        首先使用text-aling让文本居中,由于letter-spacing属性的影响,不能完全居中;
        然后给左边一个padding-left:letter-spacing的值;
   
 10.word-spacing:设置词语之间的间距;
    a.设置单词或词语之间的间距，判断单词或词语的依据是文本的"空格";
    b.指定的间距将被添加到单词或词语之后,但最后一个除外;
    c.通常以字号为参考,使用相对单位来控制间距；
    e.可以使用负值;
    e.直接用text-align就可以居中;
 11.word-break:设置文本自动换行的方法;
   a.设置容器中文本的内容换行的行为；
   b.值
      break-all:允许文本在到达容器边缘时,可以任意位置断开,部受词语的限制;
      keep-all:不允许词语断开,只能在出现词语分隔的空格或连接符时才能换行;
   c.word-break:break-all;
      针对数字或英文字母排版，防止出现连续无意义的长字符打破布局;
     浏览器默认以'空格'来分词的,在默认情况不会把超过容器的一个完整单词自动换行;