繁体中文
设为首页
加入收藏
当前位置:在线教程首页 >> 网页设计 >> CSS与特效 >> css新手上路<四>

css新手上路<四>

2005-10-09 06:02:00  作者:unknown   来源:兵马俑bbs   浏览次数:253  文字大小:【】【】【

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

此文章不能满足您的需求?那就就Google一下吧:)
Google
 

责任编辑:Lucy


相关文章
SA空口令破解和保护
怎样使MySQL更安全?
Mysql数据库的安全配置、实用技巧
如何安全的配置和应用MySQL数据库?
Oracle数据库安全策略分析
SQL Server 2000的安全配置
使一个新的MySQL安装更安全
教您如何安全的应用MySQL
MySQL数据库安全配置
MySQL安全性指南(1)
MySQL安全性指南(2)
 

最新文章

更多

· 关于CSS你只需知道的十件事
· CSS网站实用技巧:word-...
· CSS实战:解决图片下面有...
· 中文网页制作中段落缩进...
· 巧用CSS制作树状目录
· CSS重新定义项目符号和编号
· 网页特效大公开
· css新手上路<七>
· css新手上路<六>
· css新手上路<五>

推荐文章

更多

· 关于CSS你只需知道的十件事
· CSS网站实用技巧:word-...
· CSS实战:解决图片下面有...
· 中文网页制作中段落缩进...
· 巧用CSS制作树状目录
· CSS重新定义项目符号和编号
· 网页特效大公开
· css新手上路<七>
· css新手上路<六>
· css新手上路<五>

热点文章

更多