CodeBetter
工程化
性能优化
云服务器
项目笔记
三方库
其它
工程化
性能优化
云服务器
项目笔记
三方库
其它

文本属性

color 文本颜色

1div {
2  color: red;
3}
color属性值
  • 支持颜色名、rgb/rgba、HEX/HEXA（十六进制）、HSL/HSLA。
  • 开发中常用的是：rgb/rgba 或 HEX/HEXA（十六进制）。

letter-spacing 字母间距

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

1div {
2  letter-spacing: 2px; /* 增加字母间距 */
3}

word-spacing 单词间距

单词间距通过空格识别,属性值同为像素（px）。

1div {
2  word-spacing: 2px; /* 增加单词间距 */
3}

text-decoration 文本修饰

1p {
2  text-decoration: overline green dotted; /* 上划绿色虚线 */
3}
4span {
5  text-decoration: underline red wavy; /* 下划红色波浪线 */
6}
7div {
8  text-decoration: line-through; /* 删除线 */
9}
10a {
11  text-decoration: none; /* 无装饰线 */
12}
text-decoration属性值
  • none ：无装饰线（默认值）
  • underline ：下划线 （链接a自带下划线）
  • overline ：上划线
  • line-through ：删除线

text-indent 文本缩进

1div {
2  text-indent: 20px; /* 文本首行缩进 */
3}
注意

单位：可以使用 px 单位,也可以使用 em 单位。正值向右缩进,负值向左缩进,通常与方向有关。

em 是一个相对单位,就是当前元素（font-size) 1 个文字的大小,如果当前元素没有设置大小,则会按照父元素的 1 个文字大小。

text-align 文本对齐

1div {
2  text-align: center; /* 文本居中对齐 */
3}
text-align属性值
  • left ：靠左（默认值）
  • right ：靠右
  • center ：居中
  • justify ：两端对齐

line-height 行间距

1div {
2  line-height: 1.5; /* 行间距基于字体大小的倍数 */
3}
line-height属性值
  1. normal ：由浏览器根据文字大小决定的一个默认值。
  2. 像素（px）
  3. 数字：参考自身 font-size 的倍数（推荐）
  4. 百分比：参考自身 font-size 的百分比

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

注意

  • 行高过小可能导致文字重叠,最小值为0,不能为负数。

  • 行高可以继承,推荐使用数值以更好地呈现文字。

  • 设置了height的元素,高度就是height的值；未设置时,高度为line-height * 行数。

vertical-align 垂直对齐方式

用于同一行元素之间或表格单元格内文字的垂直对齐。

1div {
2  vertical-align: middle; /* 垂直居中对齐 */
3}
vertical-align属性值
属性值 说明
baseline 默认值,使元素的基线与父元素的基线对齐。
top 使元素的顶部与其所在行的顶部对齐
middle 使元素的中部与父元素的基线加上父元素字母x的一半对齐
bottom 使元素的底部与其所在行的底部对齐
  • 基线：浏览器文字类型元素排版中存在用于对齐的基线。
  • 浏览器处理行内元素和行内块元素时,默认按照文字的特点去解析,基于基线对齐。
  • vertical-align用于处理行内块和文字对齐,或者行内块和行内块对齐,或转为块元素。
  • 多数用于图片和文字对齐。
解决的问题
  • 文本框和表单按钮对齐问题。
  • input和img对齐问题。
  • div中的文本框贴顶问题。
  • div不设高度由img标签撑开时的间隙问题。
  • 使用line-height让img标签垂直居中问题。