CSS文本

时间:2020-02-23 14:30:13  来源:igfitidea点击:

在本教程中,我们将学习CSS文本样式属性。

颜色

我们使用color属性来设置文本的颜色。
这可以采用颜色名称,十六进制,rgb,rgba的值。

单击此处获取CSS颜色教程。

在下面的示例中,我们将文本的颜色设置为红色。

p {
	color : red;
}

背景颜色

我们使用background-color属性设置文本的背景色。

在下面的示例中,我们将背景色设置为浅黄色。

p {
	background-color : lightyellow;
}

行高

我们使用line-height属性来设置行之间的间距。

在下面的示例中,我们将line-height设置为16px,font-size设置为14px;

p {
	font-size : 14px;
	line-height : 16px;
}

文字装饰

我们使用text-decoration属性来装饰文本。
我们可以使用的值是" none"," underline"," overline"和" line-through"。

在下面的示例中,我们将文本装饰设置为下划线。

p {
	text-decoration : underline;
}

在下面的示例中,我们将文本装饰设置为overline。

p {
	text-decoration : overline;
}

在下面的示例中,我们将文本装饰设置为直通。

p {
	text-decoration : line-through;
}

文字对齐

我们使用text-align属性来水平对齐文本。
我们可以设置的一些值是" left"," center"和" right"。

在以下示例中,我们将text-align设置为right。

p {
	text-align : right;
}

在下面的示例中,我们将文本对齐设置为居中。

p {
	text-align : center;
}

字母间距(字距调整)

我们使用letter-spacing属性设置字符之间的间隔。

在印刷品中,字符之间的间距称为字距调整。

在下面的示例中,我们将字母间距设置为5px。

p {
	letter-spacing : 5px;
}

文字转换

我们使用text-transform属性来转换文本的大小写。

以下是我们可以设置的值。

  • lowercase小写字母-这将产生小写字母
  • uppercase大写字母-这将给出大写字母
  • capitalize大写-这将大写每个单词的第一个字母

在下面的示例中,我们将文本转换设置为大写。

p {
	text-transform : uppercase;
}

文字缩进

我们使用text-indent属性为文本的第一行指定缩进。

在下面的示例中,我们将text-indent设置为30px;

p {
	text-indent : 30px;
}

我们正在讨论text-indent属性。
我们使用它来缩进文本的第一行。
在此示例中,我们将text-indent设置为30px。
因此,显示此段落时,第一行向右缩进30px,然后其余各行正常显示(没有任何缩进)。

字距

我们使用word-spacing来设置单词之间的间隔。

在下面的示例中,我们将单词间距设置为10px;

p {
	word-spacing : 10px;
}