web前端基础：CSS字体与文本样式

CSS文字样式

文字样式属性
• 字体：font-family
• 文字大小：font-size
• 文字颜色：font-color
• 文字粗细：font-weight
• 文字样式：font-style
font-family字体属性
定义元素内文字以什么字体来显示
语法：
font-family:[字体1][,字体2][,…]
说明：
• 含空格字体名和中文，用英文引号(“ )括起
• 多个字体，用英文逗号“，”隔开
• 引号嵌套，外使用双引号，内使用单引号
font-family属性值: 具体字体名，字体集
字体集:
• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy
font-size文字大小
定义元素内文字大小
语法：
font-size: 绝对单位|相对单位
• px 像素
• em/%

属性值	说明
in	Inch,英寸1英寸=2.54厘米
cm	厘米1厘米=0.394英寸
mm	毫米1毫米=0.1厘米
pt	磅，印刷的点数 72磅=1英寸
pc	Pica，1pc=12pt

属性值	CCS2缩放系数1.2
xx-small	9px
x-small	11px
small	13px
medium	16px
large	19px
x-large	23px
xx-large	28px

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

font-weight文字粗细
为元素内文字设置粗细
语法：
font-weight: normal | bold | bolder | lighter | 100~900
说明：
默认值：normal
400 等同于 normal，而 700 等同于 bold

font-style文字样式
为元素内文字设置样式
语法：
font-style: normal|italic|oblique

font-variant字体变形
设置元素中文本为小型大写字母
语法：
font-variant: normal | small-caps

font属性（简写）
语法：
font : font-style font-variant font-weight font-size/line-height font-family
说明：
• 值之间空格隔开
• 注意书写顺序

CSS文本样式

text-align
设置元素内文本的水平对齐方式
语法：
text-align: left | right | center | justify
注：该属性对块级元素设置有效

line-height属性
设置元素中文本行高
语法：
line-height: 长度值 | 百分比
说明：一行文字的高度。
行高指文本行的基线间的距离。

vertical-align属性
设置元素内容的垂直方式
语法：
vertical-align: baseline | sub | super | top | text-top
middle | bottom | text-bottom
长度 | 百分比

文本样式属性

字体属性	说明
word-spacing	设置元素内单词之间间距
letter-spacing	设置元素内字母之间间距
text-transform	设置元素内文本的大小写 capitalize、uppercase 、lowercase 、none
text-decoration	设置元素内文本的装饰underline 、overline、line-through 、blink 、none