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

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

  P.double {line-height: 2}
请看下面的比较. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的.

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




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

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

    P.right {text-align: right}
    P.center {text-align: center}
    P.justify {text-align: justify}
请看下面的比较. 这 一 行 左 边 看 齐

这 一 行 右 边 看 齐

这 一 行 在 中 间




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

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

  P {text-indent: 1cm}
请看下面的例子. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米.




字母的大小写
这个性质显然跟中文没关系, 但如果我们要处理英文, 你可以
用 text-transform 来改变英文的大小写. 比如, 让每个字的
第一个字母大写

    P.capitalize {text-transform: capitalize}
    P.up {text-transform: uppercase}
    P.low {text-transform: lowercase}
请看下面的比较. 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




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

    P.underline {text-decoration: underline}
    P.line-through {text-decoration: line-through}
请看下面的比较. Underline line

line-through line




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

  A {text-decoration: none}

评论 (0) All

登陆 还没注册？