- 热门文章:
- · 巧用CSS制作文字变图象特效
- · CSS鼠标属性
- · CSS分级属性
- · CSS分级属性
- · CSS容器属性
- · CSS颜色和背景属性
- · CSS+VBScript制作的酷酷光照效果
- · 带你了解样式表滤镜
- · 主页的秘密
- · CSS的宣告
- · CSS有关条列项目的设定
- · CSS定位:z-index
上一篇: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}
下一篇:巧用CSS制作文字变图象特效 >>
相关文章:
- · CSS应用技巧十四例
- · CSS教程(一)--什么是CSS
- · CSS教程(二)--建立样式表
- · CSS教程(三)--将样式套用到网页上
- · CSS教程(四)--样式选择器
- · CSS教程(五)--标记的继承属性
- · CSS教程(六)--样式表的优先顺序
- · CSS教程(七)--IE的多媒体特效滤镜
- · CSS教程(八)--视觉化滤镜
- · 鼠标在文本上移动时层的显示与消失
- · 巧用css改变鼠标样式
- · 标格阴影
- · 5.9 复习
- · 5.8 第5日的练习
- · 5.7 放眼未来
- · 5.5 叠放文字和图象
- · 5.4 控制定位了的要素
- · 5.3 相对定位
- · 5.2 绝对定位
- · 5.1 第5日
- · 4.8 复习
- · 4.8 复习
- · 4.7 第4天的练习
- · 4.6 快捷特性
- · 4.5 控制背景图象
- · 4.4 背景图象
- · 4.3 背景颜色
- · 4.2 为你的世界添加色彩
- · 4.1 第4天
- · 3.9 复习
- · 3.8 第3天的练习
- · 3.7 浮动要素
- · 3.6 边框
- · 3.5 边距及空格填充
- · 3.4 文字对齐及缩行
- · 3.3 行距
- · 3.2 字间距及字母间距
- · 3.1 第3日
