通过 CSS 的 Text 属性，你可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等
Text Color
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如"＃FF0000"
一个RGB值 - "RGB（255,0,0）"
颜色的名称 - 如"红"
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本的对齐方式
文本可居中或对齐到左或右,两端对齐.
当 text-align 设置为justify，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
文本修饰
text-decoration属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration 属性主要是用来删除链接的下划线：
a {text-decoration:none;} /*不要划线*/
h1 {text-decoration:overline;} /*顶部划线*/
h2 {text-decoration:line-through;} /*删除线*/
h3 {text-decoration:underline;} /*下划线*/
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度。
p {text-indent:50px;}
文本间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
p { word-spacing:30px; }
注意：是单词之间的水平间隔。
文本间隔
指定字符之间的空间
这个例子演示了如何增加或减少字符之间的空间。
h1 {letter-spacing:5px;}
h2 {letter-spacing:-3px;}
...
指定行与行之间的空间
这个例子演示了如何指定在一个段落中行之间的空间
p.small {line-height:70%;}
p.big {line-height:200%;}
...
设置元素的文本方向
这个例子演示了如何改变元素的文本方向。
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style type="text/css">
div.ex1 {direction:rtl;}
</style>
</head>
<body>
<div>一些文本。 默认书写方向</div>
<div class="ex1">一些文本。从右到左的书写方向。</div>
</body>
</html>
...
增加单词之间的空白空间
这个例子演示了如何增加一个段落中的单词之间的空白空间。
p{word-spacing:30px; }
h4{word-spacing: -0.5em;}
...
在元素内禁用文字环绕
这个例子演示了如何禁用一个元素内的文字环绕。
p{white-space:nowrap;}
效果：一段文字时表现为不折行
...
垂直对齐图像
这个例子演示了如何设置文本的垂直对齐图像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>一个 <img src="/statics/images/w3c/intro.png" alt="w3cschool" width="121" height="74" /> 具有默认对齐方式的图像.</p>
<p>一个 <img class="top" src="/statics/images/w3c/intro.png" alt="w3cschool" width="121" height="75" /> 文本顶部对齐的图像.</p>
<p>一个 <img class="bottom" src="/statics/images/w3c/intro.png" alt="w3cschool" width="121" height="75" /> 图像与文本底部对齐.</p>
</body>
</html>
...
添加文本阴影
这个例子演示了如何设置文本阴影。
h1 {text-shadow:2px 2px #FF0000;}
所有CSS文本属性。
属性 | 描述
color | 设置文本颜色
direction | 设置文本方向。
letter-spacing | 设置字符间距
line-height | 设置行高
text-align | 对齐元素中的文本
text-decoration | 向文本添加修饰
text-indent | 缩进元素中文本的首行
text-shadow | 设置文本阴影
text-transform | 控制元素中的字母
unicode-bidi | 设置或返回文本是否被重写
vertical-align | 设置元素的垂直对齐
white-space | 设置元素中空白的处理方式
word-spacing | 设置字间距
Tag: CSS 笔记