主要介绍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
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
多行文字居中
例子
输入文本
Welcome to Website
CSS层叠样式，用于网页样式设置，使网页更美观。