CSS文本实例

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
#############################
CSS 文本属性
属性 描述
color  设置文本颜色
direction  设置文本方向。
line-height    设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration    向文本添加修饰。
text-indent    缩进元素中文本的首行。
text-shadow    设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi   设置文本方向。
white-space    设置元素中空白的处理方式。
word-spacing   设置字间距。

#####################
定义
text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。

说明
用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

默认值：   not specified
继承性：   yes
版本：    CSS1
JavaScript 语法： object.style.textIndent="50px"
可能的值
值  描述
length 定义固定的缩进。默认值：0。
%  定义基于父元素宽度的百分比的缩进。
inherit    规定应该从父元素继承 text-indent 属性的值。

#########
定义和用法
text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

默认值：   如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。
继承性：   yes
版本：    CSS1
JavaScript 语法： object.style.textAlign="right"
可能的值
值  描述
left   把文本排列到左边。默认值：由浏览器决定。
right  把文本排列到右边。
center 把文本排列到中间。
justify    实现两端对齐文本效果。
inherit    规定应该从父元素继承 text-align 属性的值。

###############
注释：CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。这个定义没有实际的语义，它只是假设一个文档包含由一个或多个空白字符包围的字。支持 CSS 的用户代理不一定能确定一个给定语言中哪些是合法的字，而哪些不是。尽管这个定义没有多大价值，不过它意味着采用象形文字的语言或非罗马书写体往往无法指定字间隔。

提示：利用这个属性，可能会创建字间隔太宽的文档，所以，使用 word-spacing 时要小心。

可能的值
值  描述
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit    规定应该从父元素继承 word-spacing 属性的值。

######
定义和用法
text-transform 属性控制文本的大小写。
提示和注释
注释：不同的用户代理可能会用不同的方法来确定单词从哪里开始，相应地确定哪些字母要大写。例如，文本 "w3-school" 可以用两种方式显示："W3-school" 和 "W3-School"。CSS 并没有规定哪一种是正确的，所以这两种都是可以的。

可能的值
值  描述
none   默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase  定义仅有大写字母。
lowercase  定义无大写字母，仅有小写字母。
inherit    规定应该从父元素继承 text-transform 属性的值。

###########
定义和用法
text-decoration 属性规定添加到文本的修饰。

注释：修饰的颜色由 "color" 属性设置。
可能的值
值  描述
none   默认。定义标准的文本。
underline  定义文本下的一条线。
overline   定义文本上的一条线。
line-through   定义穿过文本下的一条线。
blink  定义闪烁的文本。
inherit    规定应该从父元素继承 text-decoration 属性的值。
####################

定义和用法
white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

值  描述
normal 默认。空白会被浏览器忽略。
pre    空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap   保留空白符序列，但是正常地进行换行。
pre-line   合并空白符序列，但是保留换行符。
inherit    规定应该从父元素继承 white-space 属性的值。
##########################

下面的表格总结了 white-space 属性的行为：

值  空白符    换行符    自动换行
pre-line   合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre    保留 保留 不允许
pre-wrap   保留 保留 允许

#####################

1.设置文本颜色
本例演示如何设置文本的颜色。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {color: #00ff00;}
        h1 {color:red}
        p.ex {color:rgb(0,0,255)}
    </style>
</head>
<body>
<h1>这是红色</h1>
<p>普通段落，请注意，绿色</p>
<p class="ex">该段落定义了 class="ex". 该段落中得文本是蓝色得</p>
</body>

2.设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span.highlight
        {

        }
    </style>
</head>
<body>
<p>
    <span class="highlight"> 这是文本</span>
    这是文本
    <span class="highlight">这是文本</span>
</p>

</body>

3.规定字符间距
本例演示如何增加或减少字符间距。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1 {
            letter-spacing: -0.5em;}
        h4 {
            letter-spacing: 20px;}
    </style>
</head>
<body>

<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>

4.使用百分比设置行间距
本例演示如何使用百分比值来设置段落中的行间距。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.small {line-height: 90%;background-color: red}
    </style>
</head>
<body>

<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>

<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>

5.使用像素值设置行间距
本例演示如何使用像素值来设置段落中的行间距。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.small
        {
            line-height: 10px;
        }
        p.big
        {
            line-height: 30px;
        }
    </style>
</head>
<body>
<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>

6.使用数值来设置行间距
本例演示如何使用一个数值来设置段落中的行间距。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.small {
            line-height: 0.5;
        }
        p.small {
            line-height: 2;
        }
    </style>
</head>
<body>
<p>
这是拥有标准行高的段落。
默认行高大约是 1。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>

<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>

<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>

</body>
7.对齐文本
本例演示如何对齐文本。
    <style type="text/css">
        h1 {
            text-align: center;}
        h2 { text-align: left;}
        h3 {text-align: right}
    </style>
</head>
<body>
<h1>居中</h1>
<h2>向左</h2>
<h3>向右</h3>
</body>

8.修饰文本
本例演示如何向文本添加修饰。
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1 {text-decoration: overline;}
        h2 {text-decoration: line-through;}
        h3 {text-decoration: underline;}
        h4 {text-decoration: blink;}
        a {text-decoration: none;}
    </style>
</head>
<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>
<h4>这是标题</h4>
<p><a href="test1.html">这是个链接</a></p>

9.缩进文本
本例演示如何缩进文本首行。
    <style type="text/css">
        p {
            text-indent: 1cm;}
    </style>
</head>
<body>
<P>
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
    这是段落中的一些文本。
</P>

10.控制文本中的字母
本例演示如何控制文本中的字母。
    <style type="text/css">
        h1 {text-transform: uppercase}
        p.uppercase {text-transform: uppercase}
        p.uppercase {text-transform: lowercase}
        p.capitalize {text-transform: capitalize}
    </style>
</head>
<body>
<h1>This IS An H1 Elenment</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>

</body>

11.在元素中禁止文本折行
本例演示如何禁止在元素中的文本折行。
    <style type="text/css">
        p {white-space: normal}
    </style>
</head>
<body>
<p>
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>

12.增加单词间距
本例演示如何增加段落中单词间的距离。
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.spread {word-spacing: 30px;}
        p.tight {word-spacing: -0.5em;}
    </style>
</head>
<body>
<p class="spread">This is some text. This is some text.</p>
<p class="tight">This is some text. This is some text.</p>

</body>