CSS文本
在本教程中,我们将学习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; }