H5入门5：CSS 字体和文本样式

H5入门5：CSS字体和文本样式

概要：

文字样式属性

1. font-family字体属性

2. font-size属性

3. font-size绝对单位

4. font-size相对大小，相对大小是相对父元素的计算值

5. color属性==（注意：color前面没有font-前缀）==

6. font-weight设置字体粗细

7. font-style ：为元素内文字设置样式

7. font-variant 字体变形，设置元素中文本为小型大写字母

8. font属性（各个属性的简写）

• 使用font简写时，至少需要设置font-size和font-family两个属性才会生效
• font-style font-variant font-weight 需要写在前面
• font-size可以和行高一起，中间用“/”隔开

例：设置p标签的font属性：

p{
	font:italic bold small-caps 50px/1.5em "黑体","宋体”
}

CSS文本样式

• text-align：设置元素内文本的水平对齐方式

1. text-align:设置元素内文本的水平对齐方式

2. line-height：设置元素行高

3. vertical-align：设置元素内文本垂直对齐方式

4. 如何设置元素垂直居中

   1. 单行元素： 垂直方向控制：设置line-height和高度相等即可，水平方向控制：text-align:center
   2. 多行元素：垂直方向控制：父元素：display:table，需要居中元素：display:table-cell；vertical-align：center水平方向：text-align:center,

5. 设置文本样式属性

注意：

• text-decoration属性可以作用于块级元素，也可以作用于行内元素
• text-decoration属性是不会被继承的

End