CSS3-FOUR-文本

                    css3 文本（文本实例.html）
Ａ－－－－－
    设置文本样式，三大板块：    字体，颜色，文本

Ｂ－－－－－
    
        字体：
            font-family :         定义字体的类型    
            font-style:        定义字体样式    normal(默认值)，italic（斜体），oblique（倾斜）
            font-weight:        定义字体粗细。除了关键词设置外，还可以设置数字。数字越大越粗.常用100~900
                                normal(默认体) , bold(粗体) , bolder(特粗体) , lighter(细体)
            font-size-adjust:　    定义是否强制对文本使用同一尺寸
            font-stretch:        定义是否横向拉伸变形字体
            font-variant:        定义字体大小写。    normal(默认），small-caps(小型的大写字母字体）

    font:    font-style font-weight/line-height font-family;

        文本：
            word-spacing :        词与词之间的间距 　    normal（默认),length(词与词之间的距离值，可以是负数）
            letter-spacing:        字符之间的间距        normal（默认），length(同上）
            vertical-align:        文本的垂直对其方式    baseline(默认），sub(上标对齐），super（下标对齐),bottom(行框底端对齐),
                                　　　　text-bottom(行内文本底端对齐),top(顶端对齐),middle（居中对齐)、百分比，长度
            text-decoration:    文本修饰线        none(默认),underline（下划线),overline(上滑线),
                                    line-through(删除线),blink（闪烁线）
            text-indent:        文本的首行缩进        length和百分比
            text-align:        文本水平对齐方式    left(左对齐），center（水平居中）,right（右对齐),justify（两端对齐)
            line-height:        文本行高        normal(默认),长度值，百分比，数字
            line-transform:        文本大小写        none(默认),uppercase(大写),lowercase(小写),capitalize(首字大写）
            text-shadow:        文本阴影
            white-space:        文本与文本间的空白符间隔　normal(默认），nowrap(空白符合并，换行符忽略），pre(空白符换行符保留）
                                    ,pre-wrap(空白符换行符保留），pre-line(空白符合并，换行符保留）
            direction:        文本流入方向        ltr(默认),rtl(右到左），inherit(由继承得到)
        颜色
            color:            设置文本颜色

Ｃ－－－－－
        
        text-shadow：    
            用法：    text-shadow:    none | <length> none | [<shadow>,] * <shadow>或none | <color> [,<color>]*
            即：    text-shadow:    [color]　 x轴位移　y轴位移　模糊半径

                color:        设置颜色，可首可尾，可选，未设置以文字颜色为主
                x-offset:    阴影水平偏移量，正负，左﹣右﹢
                y-offset:    阴影垂直偏移量，正负，正下负上（同三维坐标系）
                blur-radius:    阴影模糊半径，可选，正值或０
                （多阴影下：指定阴影可能覆盖后面）
            为解决浏览器兼容问题，可以使用滤镜filter:shadow来处理。filter-shadow与dropshadow类似（可以渐进更细腻）
            Ｅ {filter: shadow(Color=*** ,Direction=***,Strength=***)
                color:    颜色
                direction:    投影方向，０度文本上面，180文本下面...
                strength:    阴影强度
            
            ！！！text-shadow不会改变元素的盒子尺寸，但可能会延伸到边界之外）！！！    
        

        text-overflow
            用法：    text-overflow: clip | ellipsis
                    clip:        不显示省略标志(...)，只是简单的裁剪
                    ellipsis:    文本溢出时候显示(...),省略标志插入的位置是最后一个字符
                
                －－－－决定文本溢出时候是否显示省略标记    
                    ！！！要实线文本溢出时　裁切文本显示省略标记(...）需要两个属性 + 定义容器宽度：
                        white-space:     nowrap
                        overflow:    hidden    
        
        文本换行：    
            word-wrap:    实现长单词和url地址的自动换行
                用法：
                word-wrap: normal | break-word
                    normal :     默认值，浏览器只在半角空格或连字符的地方进行换行
                    break-word:    将内容在边界内换行（不截断英文单词换行）

            wrod-break:    决定自动换行
                用法：
                word-break: normal | break-all | keep-all
                    normal:     默认，根据语言自己的规则换行，中文到边界上的汉字换行，英文从整个单词换行    

                    keep-all:    不允许字断开。中文：把前后标点符号内的一个汉字短语整个换行，英文单词：整个换行
                                    英文字符长度超过容器边界，后面部分将撑破容器，边框固定：后面不显示
                            （取值为此，中文在不同浏览器中会有不同，甚至想Chrome会没有作用。但针对英文本来说都是一样）

                    break-all:    可以强行截断英文单词，达到词内换行效果
            
            white-space:    声明建立布局过程中如何处理元素中的空白符
                用法：
                white-space: normal | pre | nowrap | pre-line | pre-wrap | inherit
                
                normal:　默认值，空白会被浏览器忽略
                pre:    文本空白将被浏览器扣留，类似于<pre>标签效果
                nowrap:    文本不会换行，文本将在同一行，直到碰到<br/>
                pre-line:合并空白符序列，保留换行符。但不支持IE7.0- Firefox3.0- Opera9.2-以下版本
                pre-wrap:保留空白符序列，但是正常换行，不支持IE7.0- and Firefox3.0-
                inherit: 继承父元素属性，不支持IE                
                



        !!!文本中常用换行

ＯＮＥ：    
    pre标签自动换行
        pre{
            white-space: pre;              /css2.0/
            white-space: pre-wrap;        /css2.1/
            white-space: pre-line;        /css3.0/
            white-space: -pre-wrap;        /Opera 4-6/
            white-space: -o-pre-wrap;    /Opera 7/
            white-space: -moz-pre-wrap;    /MOzilla /
            white-space: -hp-pre-wrap;    /HP Printers/
            word-wrap:   break-word;    /IE 5+/
        }
ＴＷＯ：
    单元格td自动换行
        table{
            table-layout: fixed;
            width: **px ;
        }
        table td{
            overflow: hidden;
            word-wrap: break-word;        
        }
ＴＨＲＥＥ：
    除pre、td等标签外其他标签自动换行：
        element{
            overflow: hidden;
            word-wrap: break-word;
        }
ＦＯＵＲ：
    标签内容强制不换行：
        element{
            white-space: nowrap;
            word-break: keep-all;
        }