css文本样式

一、  CSS字体和文本样式作用

• 文字：颜色、字体大小、字体、加粗等
• 文本：行高、对齐方式、文本装饰

二、文字样式属性 

• 字体: font-family
• 文字大小: font-size
• 文字颜色: color
• 文字粗细: font-weight
• 文字样式: font-style

1.font-family字体属性

①定义

　　定义元素内文字以什么字体来显示
②语法:
　　font-family:[字体1][,字体2][..]

③说明:

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

④font-family属性值:具体字体名,字体集
⑤字体集:

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

⑥font-size文字大小

font-size:绝对单位|相对单位

2.color文字颜色

定义元素内文字颜色
语法:
color:颜色名|十六进制|RGB

3.font-style文字样式

为元素内文字设置样式

语法：

font-style: normal|italic|oblique

4.font-variant字体变形

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

语法：

font-variant: normal | small-caps

5.font属性(简写)

语法:

font : font-style font-variant font-weight font-size/line-height font-family

说明:

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

6.text-align属性

设置元素内文本的水平对齐方式

语法：

text-align: left | right | center | justify

7.vertical-align属性

设置元素内容的垂直对齐方式

语法：

vertical-align: baseline | sub | super I top I text-top
　　　　　　middle I bottom I text-bottom

　　　　　　长度|百分比

三、文本样式属性

四、CSS文本样式应用

经验技巧:

1. 网页制作从整体到局部
2. 借助手册和网络