文本及字体属性
字体属性
font-size 字体大小
font-size 表示设置字体大小,如果设置成inherit
表示继承父元素的字体大小值
font-weight 字体粗细
font-weight:字体粗细
取值范围:
值 | 描述 |
---|---|
normal | 默认值,标准粗细 |
bold | 粗体 |
bolder | 更粗 |
lighter | 更细 |
inherit | 继承父元素字体的粗细值 |
100~900 | 设置具体粗细,400等同于normal,700等同于bord |
font-style 字体风格
font-style 属性定义字体风格
属性值:
值 | 描述 |
---|---|
normal | 默认值,浏览器显示一个标准样式 |
italic | 斜体的字体样式 |
oblique | 倾斜的字体样式 |
inherit | 继承父元素字体样式 |
font-family 字体系列
font-family 属性规定元素的字体系列
font_family 可以把多个字体名称作为一个"回退"系统来保存,如果浏览器不支持第一个字体,则会尝试下一个,也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
/*如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。*/
文本属性
color 字体颜色
color 属性设置字体颜色
支持三种颜色值:
- 十六进制 如:#FFFFFF
- RGB值 如:RGB(255,0,0)
- 颜色英文名称 如:white
line-height 行高
针对单行文本垂直居中
公式:行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适合单行文本
针对多行文本垂直居中
、
公式:行高的高度不能小于字体的大小,不然上下字之间会紧挨一起
例:
第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px; 那么就知道行高*5=150px
第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
text-align 文本对齐
text-align 属性规定元素中的文本的水平对齐方式
属性值:
值 | 描述 |
---|---|
left | 把文本排列在左边。默认值,由浏览器决定 |
right | 右对齐 |
center | 居中 |
justify | 两端对齐 |
text-indent 文本首行缩进
text-indent 属性规定文本块中首行文本的缩进的距离,单位建议使用em
注:可以使用负值,如果使用负值,那么首行会被缩进到左边
text-decoration 文本修饰
text-decoration 属性规定添加到文本的修饰
注:修饰的颜色由"color" 属性设置
属性值:
值 | 描述 |
---|---|
none | 默认值,定义标准的文本 |
underline | 定义文本下的一条线 |
overline | 定义文本上的一条线 |
line-through | 定义穿过文本下的一条线 |
blink | 定义闪烁的文本 |