CSS样式属性之文本

一.写在前面

---

大家好🎃，我是一名前端初学者，今天要学习和讲解的内容是CSS的文本属性，在前面的文章中我们学习了HTML标签和CSS最常用的几个属性，其实有了这些知识我们就能编写最基础的网页了，但是如果想要开发更加复杂的网页需要扩展更多的知识，CSS的文本内容就是开发更加复杂网页必须要掌握的基础知识，废话不多说那么让我们开始吧🐧~

二.text-decoration

---

text-decoration用于设置文字的装饰线，decoration是装饰/装饰品的意思，text-decoration有如下常见的取值

1. none：无任何装饰线，可以去除a元素默认的下划线
2. underline：下划线
3. overline：上划线
4. line-through：中划线(删除线)

💡提示：a元素有下划线的本质就是被添加了text-decoration属性

css

代码解读

复制代码

.lineStyle { font-size: 25px; text-decoration: none; } .lineStyle2 { font-size: 25px; color: aqua; text-decoration: underline; } .lineStyle3 { font-size: 25px; color: blue; text-decoration: line-through; } .lineStyle4 { font-size: 25px; color: red; text-decoration: overline; }

三.text-transform

---

text-transform用于设置文字的大小写转换，Transform单词是使变形/变换(形变) 有几个常见的值：

1. capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写。
2. uppercase：(大写字母)将每个单词的所有字符变为大写。
3. lowercase：(小写字母)将每个单词的所有字符变为小写。
4. none：没有任何影响。

💡提示：在实际开发中使用JavaScript控制的比较多。

css

代码解读

复制代码

.textClass { text-transform: capitalize; } .textClass2 { text-transform: uppercase; } .textClass3 { text-transform: lowercase; } .textClass4 { text-decoration: none; }

四.text-indent

---

text-indent用于设置第一行内容的缩进 text-indent: 2em; 刚好是缩进2个文字.

css

代码解读

复制代码

.indentClass { width: 800px; height: 200px; background-color: antiquewhite; text-indent: 2em; }

五.text-align

---

text-align直接翻译过来是设置文本的对齐方式，MDN的解释是定义行内元素如何相对于它的块父元素对齐

1. left：左对齐
2. right：右对齐
3. center：正中间对齐
4. justify：两端对齐

💡提示：justify这个属性在使用的时候面对多行文本的时候最后一行是不生效的。

css

代码解读

复制代码

.inlineStyle { width: 800px; height: 300px; text-align: center; line-height: 300px; background-color: beige; } 六.word/letter-spacing（了解）

---

letter-spacing word-spacing分别用于设置字母，单词之间的间距，默认是0，可以设置为负。

css

代码解读

复制代码

.box{ letter-spacing:20px; word-spacing:20px; }

七.总结

---

这篇文章到这里就结束了🎉，这篇文章我们学习了CSS的文本常见的属性，经常用到的是text-align这个属性在开发中会经常用到，虽然现在flex布局在一定程度上可以代替这个属性做到自己想要做到的事，但是实际上在进行文本的居中的时候经常使用的依然是这个~

原文链接：https://juejin.cn/post/7419230431243403300