CSS常用文本属性

1.文本颜色

• 属性名：color
• 可选值

1. 颜色名
2. rgb或rgba
3. HEX或HEXA(十六进制)
4. HSL或HSLA

   开发中常用的是：rgb/rgba或HEX/HEXA(十六进制)

2.文本间距

• 字母间距：letter-spacing
• 单词间距：word-spacing(通过空格识别单词，对中文不起作用，除非每个中文之间都加空格)
• 属性值为像素，正值让间距变大，负值让间距缩小。

3.文本修饰属性

• 属性名：text-decoration
• 可选值：

1. none：无装饰线（常用）
2. underline：下划线（常用）
3. overline：上划线
4. line-through：删除线

• 可搭配如下值使用：

1. dotted：虚线
2. wavy：波浪线
3. 可以通过颜色写法指定颜色

• 举例：

.dragon {
  /* 下划的红色波浪线 */
  text-decoration: underline wavy red;
}

4.文本缩进属性

• 属性名：text-indent
• 属性值：CSS 中的长度单位，例如：px
• 举例：

div {
	text-indent: 40px;
}

5.文本对齐

5.1 水平对齐

• 属性名：text-align
• 常用值：

1. left：左对齐（默认值）
2. right：右对齐
3. center：居中对齐

• 举例：

.water {
	font-size: 35px;
	background-color: skyblue;
	text-align: center;
}

6.细说 font-size

![[Pasted image 20240822154823.png]]

• 由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小。例如：font-size设为 40px，最终呈现的文字，可能比 40px 大，也可能比 40px 小
• 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

7.行高

7.1 基础

• 属性名：line-height
• 可选值：

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

• 备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中的，若一行中都是文字，不会太影响观感。
• 举例：

#poety {
	font-size: 40px;
	background-color: greenyellow;
	/* 第一种写法：值为像素 */
	list-style: 100px;

	/* 第二种写法，值为normal */
	list-style: normal;

	/* 第三种写法，值为数值----这个最常用 */
	list-style: 1.5;

	/* 第四种写法，值为百分比 */
	list-style: 150%;
}

7.2 注意事项

• line-height过小会怎么样？ – 文字产生重叠，且最小值是0，不能为负数
• line-height是可以继承的，且为了能更搞的呈现文字，最好写数值
• line-height 和 height 是什么关系？

1. 设置了height，高度就是height的值。
2. 没有设置height，高度就是line-height * 行数

7.3 应用场景

1. 对于多行文字：控制行与行之间的距离
2. 对于单行文字：让height等于line-height，可以实现文字垂直居中

   备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但是如果一行中都是文字，不会太影响观感

8.垂直对齐

1. 顶部：无需任何属性，在垂直方向上，默认都是顶部对齐
2. 居中：对于单行文字，让height=line-height既可；对于多行文字，用定位去实现
3. 底部：对于单行文字，目前一个临时的方式：

   让line-height=(height × 2) - font-size - x
   其中x是根据字体族，动态决定的一个值
   更好的办法还是通过定位去实现

9. Vertical-align

• 属性名：vertical-align\
• 作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式
• 常用值：
  1. baseline(默认值)：使元素的基线与父元素的基线对齐
  2. top：使元素的顶部与其所在行的顶部对齐
  3. middle：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐(父元素字母 x 中心点所在的那一条线)
  4. bottom：使元素的底部与其所在行的底部对齐
• 特别注意：vertical-align不能控制块元素