样式声明——文本属性

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

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

---

---

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 全部转换为小写字母

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog