系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

文章目录

• 系列文章目录
• • 1.文本的颜色： color
  • 2.文本的对齐方式： text-align
  • 3.文本的行高： line-height
  • 4.文本的线条修饰： text-decoration
  • 5.缩进元素中文本的首行： text-indent
  • 6.设置元素的垂直对齐： vertical-align
  • 7.设置字间距： letter-spacing
  • 8.设置词间距： word-spacing
  • 9.设置元素中空白的处理方式： white-space
  • 10.元素中的字母： text-transform:

1.文本的颜色： color

1. 十六进制值(0-9A-F),
2. 一个RGB值(0-255)
3. 颜色的名称

• eg:
  纯白 #fff / rgb(255,255,255) / white
  纯黑 #000 / rgb(0,0,0) / black

2.文本的对齐方式： text-align

1. left 排列到左边
2. right 排列到右边
3. center 排列到中间
4. justify 两端对齐

3.文本的行高： line-height

• normal 默认，设置合理的行间距

• number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距

• 特殊用法：
  1. 单行文本的垂直居中，将行高设置为和父元素高度一致
  2. 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上；
  3. 当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下

4.文本的线条修饰： text-decoration

1. none 默认，定义标准的文本
2. underline 文本下方的一条线
3. overline 文本上方的一条线
4. line-through 穿过文本的一条线

5.缩进元素中文本的首行： text-indent

可以设置负数，但是不建议使用 !!!

text-indent: 2em;

• em 是什么？
• em 是相对长度单位，他会继承父级元素的字体大小，因此不是一个固定的值

6.设置元素的垂直对齐： vertical-align

• baseline 默认,元素放置在父元素的基线上
• top 把元素的顶端与行中最高元素的顶端对齐
• bottom 使元素及其后代元素的底部与整行的底部对齐
• middle 把此元素放置在父元素的中部
  • 需要配合行高line-height使用

解决img下方3-6像素间距问题 — 行内块元素存在的问题

给img的父元素设置 font-size:0 img {vertical-align: top;值不是默认的 baseline 即可 方案一float:left; 方案二display:block; 方案三}

7.设置字间距： letter-spacing

• normal 默认，定义单个字间的标准空间

• length 定义单个字间的固定空间

• 每一个中文文字作为一个“字”，而每一个英文字母也作为一个“字”

8.设置词间距： word-spacing

• normal 默认，定义单词间的标准空间

• length 定义单词间的固定空间

• 以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词

• 如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效

9.设置元素中空白的处理方式： white-space

• normal 默认，空白会被浏览器忽略
• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
  标签为止

10.元素中的字母： text-transform:

• none 默认，定义带有小写字母和大写字母的标准的文本
• capitalize 文本中的每个单词以大写字母开头
• uppercase 全部转换为大写字母
• lowercase 全部转换为小写字母