DIV+CSS基础DIV+CSS补充知识:通过CSS改变文本外观

DIV+CSS补充知识:通过CSS改变文本外观

在CSS中,可以从多个方面对文本的外观进行改变,下面我们分别来说说这些属性的定义方法:

1. 文本缩进 text-indent属性

使用text-indent属性,可以给某个元素的第一行文本缩进一个给定的长度,例如我们最常用的给每个段落的段首空两格:

p {text-indent:2em;}

这里的2em表示两个文本的宽度,也可以设置为具体的数值或百分比,例如text-indent: 10px,所有块级元素都可以运用该属性,无法将应用于行内元素。

2. 水平对齐 text-align属性

text-align:center 设置文本居中;

text-align:left 设置文本居左;

text-align:right 设置文本居右;

text-align:justify 实现两端对齐文本效果,并不常用。

3. 改变字间距 word-spacing属性

p {word-spacing:3px;}

这里可以通过具体数值调整文字之间的距离,当然也可以是负值。

4. 改变字母之间的距离 letter-spacing属性

h1 {letter-spacing:5px;}

word-spacing属性不同的时,前者是调整字与字的距离,而letter-spacing属性是用于改变字母之间的距离。

5. 改变字母的大小写 text-transform属性

text-transform:capitalize 文本中的每个单词以大写字母开头;

text-transform:uppercase 定义仅有大写字母;

text-transform:lowercase 定义有小写字母。

6. 文本装饰 text-decoration属性

text-decoration:underline 定义文本下划线;

text-decoration:overline 定义文本上划线;

text-decoration:line-through 定义删除线;

text-decoration:blink 定义闪烁的文本。

在默认的情况下,链接文本会显示下划线,则相当于给文字加上了text-decoration:underline效果。

7. 对文本中出现的空白符的处理方式 white-space属性

默认的情况下html会把所有空白符合并为一个空格,即使给文字间打很多空格,实际显示的时候各个字之间只会显示一个空格,同时忽略元素中的换行。这是white-space属性的默认情况,而它还可能出现下面这些情况:

white-space:pre 该元素中的空格就会和<pre>标签那样空格不会被忽略,相当于任何元素都可以模拟pre标签所出现的对空格处理的效果。

white-space:nowrap 防止元素中的文本换行,也就是文本强制不换行。

white-space:pre-wrap 该元素中的文本会保留空白符序列,但是文本行会正常地换行。

white-space:pre-line 该元素中的文本会合并空白符序列,但保留换行符。

下面以一个示例来感知一下这几个定义的显示效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试网页标题</title>
<style type="text/css">
.div1 {white-space:pre;color:red;}
.div2 {white-space:nowrap;color:blue;}
.div3 {white-space:pre-wrap;}
.div4 {white-space:pre-line;color:pink;}
</style>
</head>
<body>
<div class="div1">
王师北定中原日
           家祭无忘告乃翁
</div>
<div class="div2">
卖炭翁,伐薪烧炭南山中。 
满面尘灰烟火色,两鬓苍苍十指黑。 
卖炭得钱何所营?身上衣裳口中食。 
可怜身上衣正单,心忧炭贱愿天寒。 
夜来城外一尺雪,晓驾炭车辗冰辙。 
牛困人饥日已高,市南门外泥中歇。 
翩翩两骑来是谁?黄衣使者白衫儿。
</div>
<div class="div3">
卖炭翁,伐薪烧炭南山中。 
满面尘灰烟火色,两鬓苍苍十指黑。 
卖炭得钱何所营?身上衣裳口中食。 
可怜身上衣正单,心忧炭贱愿天寒。 
夜来城外一尺雪,晓驾炭车辗冰辙。 
牛困人饥日已高,市南门外泥中歇。 
翩翩两骑来是谁?黄衣使者白衫儿。
</div>
<div class="div4">
远 上 寒 山 石 径 斜            白云生处有人家
停 车 坐 爱 枫 林 晚            霜叶红于二月花
</div>
</body>
</html>

浏览这个网页,我们看到显示效果如下图:

文本换行及处理空格属性.png

下面的表格总结了white-space属性对空白符和换行处理的方式:

white-space属性.png

8. 定义文本的颜色 color属性

使用color属性定义文本的颜色,这个属性是最简单的,不需要做太多的说明,相信大家都会使用。请注意不要将文本颜色定义的和背景颜色太接近,这样会导致阅读困难……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/15.html