常用的字体修饰属性
属性 | 描述 |
---|---|
font-size | 字体大小 单位:数字+px |
font-weight | 字体粗细 单位:数字 |
font-style | 字体倾斜 |
line-height | 行高 单位:数字+px/数字(当前size的倍数) |
font-family | 字体族 |
font | 字体复合属性 |
text-indent | 文本缩进 |
text-align | 文本对齐 |
text-decoration | 修饰线 |
color | 颜色 |
事项
行高
行高实际由上间距+文本高度+下间距
测量方法:从一行文字的最顶端到下一行文字的最顶端。
单行文字想要垂直居中时,可以设置行高属性值与盒子高度属性值一致。
字体族
font-family属性值可以书写多个字体名用逗号隔开,依次从左到右查找。
复合属性
属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开。(必须按顺序书写)
font:是否倾斜 是否加粗 字号/行高 字体
注:字号和字体必须书写,否则font不生效
文本缩进
属性名:text-indent
属性值:
- 数字+px
- 数字+em (1em表示当前标签的字号大小)
文本对齐方式
作用:控制内容水平对齐方式
属性名:text-align
属性值 | 效果 |
---|---|
left | 左对齐(默认) |
center | 居中对齐 |
right | 右对齐 |
想让图片居中,可以给图片加一个父级标签例如<div>设置居中
修饰线
属性名:text-decoration
属性值 | 效果 |
---|---|
none | 无 |
underline | 下划线 |
line-through | 删除线 |
overline | 上划线 |
color文字颜色
写法:
颜色表示方法 | 属性值 | 说明 |
---|---|---|
颜色关键字 | 颜色的英文单词 | |
rgb表示法 | rgb(r,g,b) | r,g,b表示红绿蓝,取值0-255 |
rgba表示法 | rgba(r,g,b,a) | a表示透明度,取值0-1 |
十六进制表示法 | #RRGGBB | 两两一组表示红绿蓝 |
如果一组当中两个数是一样的,可以简写为一位数:例如#00ffcc简写为#0fc