CSS文本属性使您可以非常有效地轻松定义几种文本样式,例如颜色,对齐方式,间距,装饰,变换等。
使用CSS格式化文本
CSS具有几个用于定义文本样式的属性。这些属性使您可以精确控制字符,空格,单词,段落等的视觉外观。
您可以设置元素的以下文本属性:
文字颜色
文本颜色由CSS color属性定义。了解更多关于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-align设置成justify时,可以将内容分散对齐,但是此属性只能对齐非最后一行的内容。。
文字修饰
该text-decoration属性用于设置或删除文本装饰。
此属性的可能值有:none,underline,overline,line-through,blink和inherit。您应避免在非链接的下划线文本,否则可能会使访问者感到困惑。
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }测试看看‹/›
警告:大多数浏览器都不支持blinkCSS text-decoration属性的值。您应该避免使用此值。
删除链接默认下划线
该text-decoration属性通常用于从超链接中删除默认下划线。完全删除下划线可能会使访问者感到困惑。除非您提供其他视觉提示以使其脱颖而出,同时还要设计链接的样式。
例如,您可以使用点而不是实线在链接下划线。
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 direction属性定义的元素内文本的方向。
单词间距
word-spacing用于设置单词之间间距的属性。
字间距可能会受到文本对齐方式的影响。查看text-align属性。
保留空白时,所有空格字符均受单词间距的影响。请参阅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属性定义一行文本的高度(也称为Lead)。
此属性可能的值是:百分比(%),长度,数量,normal和inherit。
p { line-height: 1.2; }测试看看‹/›
当值为数字时,通过将元素的字体大小乘以数字来计算行高。而百分比值则相对于元素的字体大小。
注意:不允许该属性的负值。此属性也是字体简写属性的组成部分。
如果line-height属性的值大于font-size元素的值,则此差异(称为“领先”)将切成两半(称为“半领先”),并均匀分布在in的顶部和底部行框。
p { font-size: 14px; line-height: 20px; background-color: #f0e68c; }测试看看‹/›