CSS常用属性（文本属性）

原创已于 2024-07-28 22:14:39 修改 · 1.7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-07-28 22:12:29 首次发布

前端基础专栏收录该内容

17 篇文章

订阅专栏

一、文本颜色

属性名： color

作用：控制文字的颜色。

可选值：

颜色名
rgb 或 rgba
HEX 或 HEXA （十六进制）
HSL 或 HSLA

开发中常用的是： rgb/rgba 或 HEX/HEXA （十六进制）。

举例：

div {
    color: rgb(112,45,78);
}

二、文本间距

字母间距： letter-spacing

单词间距： word-spacing （通过空格识别词）

属性值为像素（ px ），正值让间距增大，负值让间距缩小。

三、文本修饰

属性名： text-decoration

作用：控制文本的各种装饰线

可选值：

none ：无装饰线（常用）
underline ：下划线（常用）
verline ：上划线
line-through ：删除线

可搭配如下值使用：

dotted ：虚线
wavy ：波浪线
也可以指定颜色

举例：

a {
    text-decoration: none;
}

四、文本缩进

属性名： text-indent 。

作用：控制文本首字母的缩进。

属性值： css 中的长度单位，例如： px

举例：

div {
    text-indent:40px;
}

五、文本对齐_水平

属性名： text-align 。

作用：控制文本的水平对齐方式。

常用值：

left ：左对齐（默认值）
right ：右对齐
center ：居中对齐

举例：

div {
    text-align: center;
}

六、font-size

1. 由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小。（例如： font-size 设为 40px ，最终呈现的文字，可能比 40px 大，也可能比 40px小。）

2. 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

七、行高

属性名： line-height

作用：控制一行文字的高度。

可选值：

normal ：由浏览器根据文字大小决定的一个默认值。
像素( px )。
数字：参考自身 font-size 的倍数（很常用）。
百分比：参考自身 font-size 的百分比。

（由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。）

举例：

div {
    line-height: 60px;
    line-height: 1.5;
    line-height: 150%;
}

行高注意事项：

line-height 过小会怎样？—— 文字产生重叠，且最小值是 0 ，不能为负数。
line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。
line-height 和 height 是什么关系？
- 设置了 height ，那么高度就是 height 的值。
- 不设置 height 的时候，会根据 line-height 计算高度。