中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

CSS文字定位

这一节我们将讨论如何用 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}

 

  《DHTML Builder》 Jie/文


  
相关报道




本站检索



中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿,强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈?
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统





   

网络教室编辑信箱