前端学习笔记（四）html文本属性

文本属性

1.1 文本样式的font属性

1. 文本大小：font-size
2. 文本字体：font-family
3. 文本粗细：font-weight
4. 文本倾斜：font-style
5. 文本颜色：color
6. 文本行高：line-height
7. 文字属性font简写(按顺序写出所有属性)

1.2 文本样式的text属性

(1)text-align:水平对齐方式。
属性值：

• left:左对齐
• right：右对齐
• center：居中对齐
• justify：两端对齐（对中文不起作用）

(2)vertical-align:垂直对齐方式
属性值:

• top:顶端对齐
• bottom：底端对齐
• middle：中间对齐

1.3 文本样式修饰的运用规范

(1)文本修饰：text-decoration
属性值：

• none:无任何修饰
• underline：下划线
• overline：上划线
• line-through：删除线
• blink：闪烁（高版本浏览器不支持blink属性）

(2)文本缩进：text-indent

• 缩进单位一般是px，属性值可以取负值
• 只对第一行起作用

(3)字符间距：letter-spacing

• 控制英文字母和汉字的字距。（英文是字母与字母之间）

(4)字间距：word-spacing

• 控制英文单词之间的词距。

(5)元素空白的处理方式：white-space

• white-space:normal/pre/nowrap/pre-wrap/pre-line
• normal:默认处理方式，空白会被浏览器忽略。
• pre:用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行，可查阅pre对象
• pre-wrap:用等宽字体显示预先格式化的文本，不合并字间的空白距离，直到文本结束或者遭遇br对象。
• pre-line:保持文本的换行，不保留文字间的空白距离，当文字彭到边界时发生换行。

(6)控制元素中的字母：text-transform

• text-transform:capitalize(单词首字母大写)/uppercase(所有字母大写)/lowercase(所有小写)

1.4 文字添加阴影和自动换行

(1)text-shadow:规定添加到文本的阴影效果
属性值：

• h-shadow:必需，水平阴影的位置，允许负值
• v-shadow:必需，垂直阴影难过的位置，允许负值
• blur:可选，模糊的距离
• color:阴影的颜色

(2)word-wrap:自动换行
属性值：

• normal:默认，只在运行的断字点换行。
• break-word:在长单词或URL地址内部进行换行