css文本样式和属性 – CSS教程 _css文本样式

上一章CSS教程请查看：css字体属性font
CSS文本属性允许你定义几个文本样式，如color, alignment, spacing, decoration, transformation等非常容易有效。
用CSS格式化文本CSS有几个定义文本样式的属性。这些属性使你能够精确地控制字符、空格、单词、段落等的视觉外观。
可以设置元素的以下文本属性：
文本颜色文本颜色由CSS color属性定义。

h1 { color: #ff0000; } p { color: green; }

注意：虽然文本的颜色看起来像是CSS文本的一部分，但它实际上是CSS中的一个独立属性。
文本对齐方式text-align属性用于设置文本的水平对齐。
此属性的可能值为：left, right, center, justify和inherit。

h1 { text-align: center; } p { text-align: justify; }

注意：当文本对齐被设置为对齐时，每一行都会被拉伸，这样每一行的宽度都是相等的，左右边距都是直的。
文本装饰text-decoration属性用于设置或删除文本中的装饰。
此属性的可能值为：none、underline、overline、line-through、blink和inherit。你应该避免下划线文本不是一个链接，因为它可能会混淆访问者。

h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }

警告：大多数浏览器都不支持CSS文本装饰属性text-decoration的blink值，你应该避免这个值。
删除链接的默认下划线文本装饰属性通常用于删除超链接的默认下划线。完全删除下划线会使访问者感到困惑。除非你提供一些其他的视觉提示，使它脱颖而出，而样式的链接。
例如，你可以使用点来下划线，而不是实线。

a { text-decoration: none; border-bottom: 1px dotted; }

注意：当你创建一个HTML链接时，浏览器会在样式表中自动添加下划线，这样读者就可以看到哪些文本是可以点击的。
文本转换text-transform属性用于设置文本的大小写。
它可用于将元素的文本内容设置为大写或小写字母，或将每个单词的第一个字母大写，文本转换text-transform属性的可能值是：none, capitalize, uppercase, lowercase和inherit。

p.up { text-transform: uppercase; } p.cap { text-transform: capitalize; } p.low { text-transform: lowercase; }

文本缩进text-indent属性用于设置元素的第一行文本的缩进，text-indent属性的可能值是:百分比(%)、长度(指定缩进空间)或继承inherit。
下面的示例演示如何缩进段落的第一行。

p { text-indent: 100px; }

注意：文本是从左边缩进还是从右边缩进取决于元素内文本的方向，由CSS方向属性定义。
字间距word-spacing用于设置单词之间间距的单词间距属性。

字间距会受到文本对齐的影响，查看文本对齐属性。
当保留空白时，所有空格字符都受到单词间距的影响，参见CSS空白属性white-space。

单词间距属性word-spacing的可能值为：length(指定单词之间插入的空格)、normal和inherit。

p.one { word-spacing: 20px; } p.two { word-spacing: 20px; text-align: justify; } p.three { word-spacing: 20px; white-space: pre; }

字符间距letter-spacing属性用于设置文本字符之间的额外间距。
此属性的可能值为：length(指定除了默认的字符间空间之外，还要在字符之间插入额外的空间)、normal和inherit。

h1 { letter-spacing: -3px; } p { letter-spacing: 10px; }

行高line-height行高属性定义了一行文本的高度(也称为前导)。
此属性的可能值为:百分比(%)、长度、数值、normal和inherit。

p { line-height: 1.2; }

当值是一个数字时，通过将元素的字体大小乘以该数字来计算行高，而百分比值则与元素的字体大小有关。
【css文本样式和属性 – CSS教程】注意：此属性不允许为负值。此属性也是字体速记属性的一个组件。
如果line-height属性的值大于元素的字体大小的值，则将此差异(称为“leading”)对半(称为“half-leading”)，并均匀地分布在内联框的顶部和底部。