css文字定位最右边,CSS 控制文字定位

CSS 控制文字定位

作者：不详

来源：

日期：2002-8-5

[code]

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}

[/code]

这一节我们将讨论如何用 CSS 来控制网页中文字定位, 这些性质是

line-height: 行距

text-align: 向那个方向看齐

vertical-align: 向上还是向下看齐

text-indent: 段落第一行空格

text-transform: 字母的大小写

text-decoration: 给文字加装饰, 比如下滑线

行距

我们有时候可能会想把行距加大点使得文字看的清楚一些. CSS

中的 line-height 可以取得这种调节

P.double {line-height: 2}

请看下面的比较.

[code]

这 一 段 的 行 距 是 正常 的.  这 一 段 的 行 距 是 正常 的.  这 一 段 的 行 距 是 正常 的.  这 一 段 的 行 距 是 正常 的.    这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的.

[/code]

你要让 line-height 等于 3 的话, 那行距就更大了.

看齐

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

比如说向右边看齐.

P.right {text-align: right}

P.center {text-align: center}

P.justify {text-align: justify}

请看下面的比较.

[code]

这 一 行 左 边 看 齐  这 一 行 右 边 看 齐  这 一 行 在 中 间

[/code]

text-align 可以有 left, right, center, 和 justify

段落的首行空格

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

P {text-indent: 1cm}

请看下面的例子.

[code]

这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米.

[/code]

字母的大小写

这个性质显然跟中文没关系, 但如果我们要处理英文, 你可以

用 text-transform 来改变英文的大小写. 比如, 让每个字的

第一个字母大写

P.capitalize {text-transform: capitalize}

P.up {text-transform: uppercase}

P.low {text-transform: lowercase}

请看下面的比较.

[code]

All the words' first letter have been capitalized in this line All the letters are uppercase in this line All the letters are lowercase in this line

[/code]

文字的装饰

就是在文字上加下滑线, 或中间加条线的. 比如

P.underline {text-decoration: underline}

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

请看下面的比较.

[code]

Underline line line-through line

[/code]

其实最常用的是我们想去掉联接下面的下滑线.

A {text-decoration: none}