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

Serif和Sans-serif区别

font-size文字大小

定义元素内文字大小
语法:
font-size: 绝对单位|相对单位

• px 像素
• em/%

 

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

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
长度 | 百分比

单行文字垂直方向居中使用line-height

文本样式

 

 

文章参考于慕课网课程

https://www.imooc.com/

发布者

deng

听闻余生久不遇,相逢别错过。

发表评论

电子邮件地址不会被公开。 必填项已用*标注