【CSS】设置文本样式

大家好，我是翼同学！

1️⃣前言

今天的笔记内容是：

• 文本样式，包括文本颜色、对齐、缩进、行高等

---

2️⃣文本样式

🪄文本颜色

color属性可用于定义文本的颜色，比如div { color: pink; }

举个例子

• 代码：

div {
	background-color: #c6ceff;
	color: #0e6cac;
}
1
2
3
4

• 效果：

---

✔️文本对齐

text-align属性用于设置标签内文本内容的对齐方式。比如div { text-align: center; }

举个例子

• 代码：

div {
	background-color: #c6ceff;
	color: #0e6cac;
	text-align: center;
}
1
2
3
4
5

• 效果：

---

💎文本修饰

text-decoration属性用于修饰文本，比如添加下划线：div { text-decoration: underline; }

如上图所示，我们想去掉李白作者链接中的下划线，那么可以这样设置：

a {
	text-decoration: none;
}
1
2
3

---

🌳文本缩进

text-indent属性用于指定文本第一行是否要缩进，通常文本首行需要缩进。

对于text-indent属性的取值分别有两种写法：

• 第一种写法的长度单位为px，比如div { text-indent: 15px; }
• 第二种写法的长度单位为em，比如div { text-indent: 2em; }，em是一个相对单位，和当前元素一个字体大小相同。

举个例子，将上述文本缩进相对两个单位，那么代码如下：

p {
	text-indent: 2em;
}
1
2
3

效果如下：

---

🌱文本行高

line-height属性用于设置行间的距离，也就是控制文本行与行之间的距离。

比如上面这个例子，设置行高如下：

p {
	line-height: 40px;
}
1
2
3

效果如下：

---

🖊️文本转换

text-transform属性用于转换文本中字母的大小写。

具体如下：

.p1 {
	text-transform: uppercase;
}
.p2 {
	text-transform: lowercase;
}
.p3 {
	text-transform: capitalize;
}
1
2
3
4
5
6
7
8
9

效果如下：

📌属性总结

---

3️⃣写在最后

好了，今天的笔记就到写这。