CSS 控制文字定位

作者:不详 来源: 日期:2002-8-5
[code]
  <STYLE>
    P.double {line-height: 2}
    P.right {text-align: right}
    P.center {text-align: center}
    P.justify {text-align: justify}
    P.indent {text-indent: 1cm}
    P.capitalize {text-transform: capitalize}
    P.up {text-transform: uppercase}
    P.low {text-transform: lowercase}
    P.underline {text-decoration: underline}
    P.line-through {text-decoration: line-through}
    H3 {color: #cc6600}
  </STYLE>
[/code]
这一节我们将讨论如何用 CSS 来控制网页中文字定位, 这些性质是 

line-height: 行距 
text-align: 向那个方向看齐 
vertical-align: 向上还是向下看齐 
text-indent: 段落第一行空格 
text-transform: 字母的大小写 
text-decoration: 给文字加装饰, 比如下滑线 
行距
我们有时候可能会想把行距加大点使得文字看的清楚一些. CSS 
中的 line-height 可以取得这种调节 

  P.double {line-height: 2}

请看下面的比较. 
[code]

<table border=0 cellspacing=8 cellpadding=1 width=500>
<tr><td bgcolor=666666>
<table border=0 cellspacing=0 cellpadding=6 width=100% bgcolor=ffffcc>
<tr><td bgcolor="#FFFFCC">
<P>这 一 段 的 行 距 是 正常 的.  这 一 段 的 行 距 是 正常 的.  这 一 段 的 行 
距 是 正常 的.  这 一 段 的 行 距 是 正常 的.  </p>
<p class="double"> 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 
的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. </p>
</td></tr></table>
</td></tr></table>
[/code]
你要让 line-height 等于 3 的话, 那行距就更大了. 

看齐
一般来说我们都是向左边看齐. 但有的时候也有其他的选择, 
比如说向右边看齐. 

    P.right {text-align: right}
    P.center {text-align: center}
    P.justify {text-align: justify}

请看下面的比较. 
[code]
<table border=0 cellspacing=8 cellpadding=1 width=500>
<tr><td bgcolor=666666>
<table border=0 cellspacing=0 cellpadding=6 width=100% bgcolor=ffffcc>
<tr><td bgcolor="#FFFFCC">
<p>这 一 行 左 边 看 齐 </p>
<p class="right">这 一 行 右 边 看 齐 </p>
<p class="center">这 一 行 在 中 间 </p>
</td></tr></table>
</td></tr></table>
[/code]
text-align 可以有 left, right, center, 和 justify 

段落的首行空格
如果我们想让第一行的开头空几格, 可以用 text-indent, 比如 

  P {text-indent: 1cm}

请看下面的例子. 
[code]
<table border=0 cellspacing=8 cellpadding=1 width=500>
<tr><td bgcolor=666666>
<table border=0 cellspacing=0 cellpadding=6 width=100% bgcolor=ffffcc>
<tr><td bgcolor="#FFFFCC">
<p class="indent">这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 
这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. </p>
</td></tr></table>
</td></tr></table>
[/code]
字母的大小写
这个性质显然跟中文没关系, 但如果我们要处理英文, 你可以
用 text-transform 来改变英文的大小写. 比如, 让每个字的
第一个字母大写 

    P.capitalize {text-transform: capitalize}
    P.up {text-transform: uppercase}
    P.low {text-transform: lowercase}

请看下面的比较. 
[code]
<table border=0 cellspacing=8 cellpadding=1 width=500>
<tr><td bgcolor=666666>
<table border=0 cellspacing=0 cellpadding=6 width=100% bgcolor=ffffcc>
<tr><td bgcolor="#FFFFCC">
<p class="capitalize">All the words' first letter have been capitalized in this 
line</p>
<p class="up">All the letters are uppercase in this line</p>
<p class="low">All the letters are lowercase in this line</p>
</td></tr></table>
</td></tr></table>
[/code]
文字的装饰
就是在文字上加下滑线, 或中间加条线的. 比如 

    P.underline {text-decoration: underline}
    P.line-through {text-decoration: line-through}

请看下面的比较. 
[code]
<table border=0 cellspacing=8 cellpadding=1 width=500>
<tr><td bgcolor=666666>
<table border=0 cellspacing=0 cellpadding=6 width=100% bgcolor=ffffcc>
<tr><td bgcolor="#FFFFCC">
<p class="underline">Underline line</p>
<p class="line-through">line-through line</p>
</td></tr></table>
</td></tr></table>
[/code]
其实最常用的是我们想去掉联接下面的下滑线. 

  A {text-decoration: none}
相关文章
文章评论