CSS 文本属性
CSS Text (文本) 属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
属性 | 表示 | 行高 |
---|---|---|
color | 文本颜色 | 我们通常用十六进制 |
text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
text-indent | 文本缩进 | 通常我们用于段落首行缩进 2 个字的距离 text-indent: 2em; |
text-decoration | 文本修饰 | 记住添加下划线 underline,取消下划线 none |
line-height | 行高 | 控制行与行之间的距离 |
文本颜色
color
属性用于定义文本的颜色。
div {
color: red;
}
表示 | 属性值 |
---|---|
预定义的颜色值 | red, green, blue, pink |
十六进制 | #FF0000,#FF6600,#29D794 |
RGB代码 | rgb(255, 0, 0) 或 rgb(100%, 0%, 0%) |
文本对齐
text-align
属性用于设置元素内文本内容的水平对齐方式。
给父盒子设置 text-align: center;
,其中的所有行内和行内块元素会水平居中。
div {
text-align: center;
/* 本质是让 div 盒子里面的文字水平居中对齐*/
}
属性值 | 解释 |
---|---|
left | 左对齐 (默认值) |
right | 右对齐 |
center | 居中对齐 |
装饰文本
text-decoration
属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
div {
/* 添加下划线 */
text-decoration: underline;
}
属性值 | 描述 |
---|---|
none | 默认。没有装饰线(最常用) |
underline | 下划线。链接a自带下划线(常用) |
overline | 上划线。(几乎不用) |
line-through | 删除线。(不常用) |
a {
/* 取消链接 a 默认的下划线 */
text-decoration: none;
color: #333;
}
文本缩进
text-indent
属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
p {
/* 文本的第一行 首行缩进 当前元素2个文字的大小 */
text-indent: 2em;
font-size: 24px;
}
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
em 是一个相对单位,就是当前元素( font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。
行间距
line-height
属性用于设置行间的距离 (行高)。可以控制文字行与行之间的距离
p {
line-height: 25px;
}
行间距 = 上间距 + 文本高度 + 下间距
上间距 = 下间距
单行文字垂直居中的原理
CSS 没有给我们提供文字垂直居中的代码。
这里我们可以使用一个小技巧来实现。
解决方案:让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中
div {
height: 40px;
line-height: 40px;
}
简单理解:行高的上空隙和下空隙把文字挤到中间了。如果行高小于盒子高度,文字会偏上;如果行高大于盒子高度,则文字偏下。