4.文本属性 text

文本属性是文本的颜色，缩进，行间距这些

目录

1  文本颜色 color

2  水平对齐文本 text-align

2.1  一行文本垂直居中

3  装饰文本 text-decoration

4  文本缩进 text-indent

5  行间距 line-height

6  文字阴影 text-shadow

7  元素内文本不换行

---

1  文本颜色 color

我们前面用过很多，在这里我们简单写一下

除了red这种值，我们还可以写16色，或者RGB值，我们网页上找几个颜色试一下 RGB颜色对照表

我们先写16进制的

• 这里大写小写都一样

• 如果颜色是六个相同的数字，我们写前三个就可以代表这个颜色，比如#666666，我们写#666就可以了
• 如果颜色是#ff00ff，我们可以简写成#f0f

之后我们写rgb的

其实16进制也是一种rgb，如果我们是16进制颜色是#f7f8f9，那么它对应的rgb为(247,248,249),它是这样计算的

247 = 15 * 16 + 7

248 = 15 * 16 + 8

249 = 15 * 16 + 9

15就是f，我上面的f都放在了16的1次方的位置，后面的7,8,9是16的0次方

2  水平对齐文本 text-align

有三个可选值，left(左对齐)，right(右对齐)，center(居中对齐)，默认值是left，我们用一下试试看

有时候我们会让图片在中间显示，这个时候把img标签放在p标签中，然后再对p标签设置text-align显示就可以了

2.1  一行文本垂直居中

那么我想搞垂直居中要怎么办呢，css中没有垂直居中的代码，我们选用的方式为，将文字的行高等于容器的高度

我们首先盒子里搞一行文字

它现在是这样的

我们现在让行高和盒子高度相同

发现它现在处于居中位置

那么你如果是多行文字就需要用到布局了，感兴趣的话可以看一下这个 纯CSS实现多行文字垂直居中几种方法解析 - 古兰精 - 博客园

3  装饰文本 text-decoration

它的取值有四个,underline(添加下划线，a标签自带下划线)，overline(添加上划线),line-through(添加删除线)，none(没有装饰线，大部分文本默认值为none)

我们一次将三条线都画上

我们再给一个a标签，让它没有下划线

这样这个链接就不再有下划线了

4  文本缩进 text-indent

我们再加一段文字

看一下它没缩进前的效果

我们现在让他缩进20px

• text-indent只缩进首行

text-indent也可以给负值

发现这样有的文字就看不到了

也可以使用em作为单位，em就是当前元素1个文字的大小(和font-size相关)

这样就是两字缩进

text-indent后面同样可以加百分比，不过用的不多，我们在后面的流式布局中会使用到 

5  行间距 line-height

行间距由 上间距，文本高度和下间距 三个部分构成，文本高度line-height动不了，所以他改变的是上间距与下间距

• 上边距与下边距默认情况下相等

我们之前在文字属性中提到过，这里我们简单用一下

line-height改变的是一个段落内行与行的距离，而不是段落与段落之间的距离

行高也是可以不加单位的，如果我们这样写就是使用文字大小的50倍作为行距

它就会变成这样

用调试工具查看后，发现它的行高是800px

发现我们的文字大小也正是 800/50 = 16px

6  文字阴影 text-shadow

它的语法是这样的，加粗部分是必填参数

• h-shadow 水平阴影终止点，允许负值
• v-shadow 垂直阴影终止点，允许负值
• blur 模糊的距离
• color 阴影颜色

我们做一个看一下

设置后发现出现阴影效果

参数含义与盒子阴影相同，有兴趣可以看一下这个里面的盒子阴影 11.盒子属性_Suyuoa的博客-CSDN博客_盒子属性 

7  元素内文本不换行

使用 white-space:nowrap 令元素内文本不换行

这样即使超出了宽度限制文本也不会自动换行