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;
}

当值是一个数字时，通过将元素的字体大小乘以该数字来计算行高，而百分比值则与元素的字体大小有关。

注意：此属性不允许为负值。此属性也是字体速记属性的一个组件。

如果line-height属性的值大于元素的字体大小的值，则将此差异(称为“leading”)对半(称为“half-leading”)，并均匀地分布在内联框的顶部和底部。

p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}

有关文本样式的更多信息，请参见字体和文本相关属性。