【零基础】页面化妆师——CSS字体和文本样式

文字

1.字体：font-family

定义元素内文字以什么字体来显示。

语法：font-family:[字体1][,字体2][,…]。

说明：

• 含空格字体名和中文，用英文引号"括起
• 多个字体，用英文逗号,隔开
• 引号嵌套，外使用双引号，内使用单引号

font-family属性值: 具体字体名，字体集。字体集有：

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

Serif和Sans-serif区别：

2.文字大小：font-size

定义元素内文字大小。

语法：font-size: 绝对单位|相对单位。

绝对单位：


相对单位：

• px 像素
• em/%

3.文字颜色：font-color

定义元素内文字颜色。

语法：color: 颜色名|十六进制|RGB。

4.文字粗细：font-weight

为元素内文字设置粗细。

语法：font-weight: normal | bold | bolder | lighter | 100~900。

说明：

• 默认值：normal
• 400 等同于 normal，而 700 等同于 bold

5.文字样式：font-style

为元素内文字设置样式。

语法：font-style: normal | italic| oblique。

6.文字变形：font-variant

设置元素中文本为小写大写字母。

语法：font-variant: normal | small-caps。

7.font属性简写

语法：font : font-style font-variant font-weight font-size/line-height font-family。

说明：

• 值之间空格隔开
• 注意书写顺序

文本

1.水平对齐方式：text-align

设置元素内文本的水平对齐方式。注：该属性对块级元素设置有效。

语法：text-align: left | right | center | justify。

2.行高：line-height

设置元素中文本行高。

语法：line-height: 长度值 | 百分比

说明：一行文字的高度。行高指文本行的基线间的距离。

文字基线：

行高和行距：

行框和行内框：

3.垂直对齐：vertical-align

设置元素内容的垂直方式。

语法：vertical-align: baseline | sub | super | top | text-top middle | bottom | text-bottom 长度 | 百分比。