CSS 文本属性

以下为CSS文本常用属性:

  1. text-indent 设置或检索对象中的文本缩进
    语法:text-indent : length ,length :百分比数字,由浮点数字和单位标识符组成的长度值,允许为负值。
  2. vertical-align 设置对象内容的垂直对齐方式
    vertical-align应用最多的应该是在td内,控制内部对象位置,和td的valign属性极其相似。
    语法:vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length
    baseline : 将支持valign特性的对象的内容与基线对齐
    sub :  垂直对齐文本的下标
    super : 垂直对齐文本的上标
    top :  将支持valign特性的对象的内容与对象顶端对齐
    text-top : 将支持valign特性的对象的文本与对象顶端对齐
    middle :将支持valign特性的对象的内容与对象中部对齐
    bottom :将支持valign特性的对象的文本与对象底端对齐
    text-bottom :将支持valign特性的对象的文本与对象顶端对齐
    style.css部分:

    #sample div {background-color:#ccccff; margin:4px;} .rei {font-size:60px;} .oya {font-size:30px; background-color:#ccffcc;} .sample1 {font-size:12px; background-color:#ffccff; vertical-align:baseline;} .sample2 {font-size:12px; background-color:#ffccff; vertical-align:top;} .sample3 {font-size:12px; background-color:#ffccff; vertical-align:middle;} .sample4 {font-size:12px; background-color:#ffccff; vertical-align:bottom;} .sample5 {font-size:12px; background-color:#ffccff; vertical-align:text-top;} .sample6 {font-size:12px; background-color:#ffccff; vertical-align:text-bottom;} .sample7 {font-size:12px; background-color:#ffccff; vertical-align:super;} .sample8 {font-size:12px; background-color:#ffccff; vertical-align:sub;}

    HTML部分:
    <html> <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
    <div id="sample">
    <div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample1">baseline</span></span></div>
    <div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample2">top</span></span></div>
    <div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample3">middle</span></span></div>
    <div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample4">bottom</span></span></div>
    <div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample5">text-top</span></span></div>
    <div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample6">text-bottom</span></span></div>
    <div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample7">super</span></span></div>
    <div><span class="rei">CSS 学习指南</span><span class="oya">Example.<span class="sample8">sub</span></span></div>
    </div>
    </body>
    </html>
    CSS 学习指南Example.baseline
    CSS 学习指南Example.top
    CSS 学习指南Example.middle
    CSS 学习指南Example.bottom
    CSS 学习指南Example.text-top
    CSS 学习指南Example.text-bottom
    CSS 学习指南Example.super
    CSS 学习指南Example.sub
  3. text-align 设置或检索对象中文本的对齐方式。
    语法:text-align : left | right | center | justify
    left左对齐,right右对齐,center居中,justify两端对齐。
  4. dirextion 用于设置文本流的方向(文本流的值不可继承)
    语法:direction : ltr | rtl
    ltr是文本流从左到右,rtl文本流从右到左。
  5. unicode-bidi 用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用。
  6. whitle-space 设置或检索对象内空格的处理方式。
    语法:white-space : normal | pre | nowrap
    normal : 默认处理方式
    pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。
    nowrap :强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。