CSS文本相关属性

118 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第14天,点击查看活动详情

1 text-decoration

text-decoration有如下常见取值:

  • none:无任何装饰线 ✓ 可以去除a元素默认的下划线

  • underline:下划线

  • overline:上划线

  • line-through:中划线(删除线)

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

2 text-align(重要)

定义行内内容(例如文字)如何相对它的块父元素对齐;

常用的值

  • left:左对齐(对于里面的文本,如果单行不满则右边空着)

  • right:右对齐(对于里面的文本,如果单行不满则左边空着)

  • center:正中间显示

  • justify:两端对齐(效果如下)

注意:text-align 只能让 (子元素 && 行内级元素)居中,如:img或文本

3 text-indent

text-indent用于设置第一行内容的缩进

text-indent: 2em; 刚好是缩进2个文字

4 text-transform

text-transform用于设置文字的大小写转换

text-transform有几个常见的值:

  • capitalize:(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写

  • uppercase:(大写字母)将每个单词的所有字符变为大写

  • lowercase:(小写字母)将每个单词的所有字符变为小写

  • none:没有任何影响

5 word/letter-spacing

letter-spacing、word-spacing分别用于设置字母、单词之间的间距

  • 默认是0,可以设置为负数