html在text写文本,CSS Text(文本)

CSS Text(文本)

CSS文本属性使您可以非常有效地轻松定义几种文本样式，例如颜色，对齐方式，间距，装饰，变换等。

使用CSS格式化文本

CSS具有几个用于定义文本样式的属性。这些属性使您可以精确控制字符，空格，单词，段落等的视觉外观。

您可以设置元素的以下文本属性：

文字颜色

示例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;

}测试看看‹/›

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