字体——font-family
font-family="a,b,c……"
为多重保障,可同时写多个字体,每个字体用逗号隔开,依次解析。
大小——font-size
px 物理像素
em 为父元素的大小,一般用于适配移动端机型
rem 根据根元素HTML的大小
浏览器默认大小16px;设计图常用字号12px.
风格——font-style
- italic 倾斜
- oblique 更倾斜
- normal 正常 (行内元素em,i也有设置斜体作用,尽量使用块元素包裹)
粗细——font-weight
- 100:lighter:细 用数字描述最小到100,300与100的区别不大,不会有视觉上的变化;
- 400:normal:正常 数值在400至500之间;
- 700:bold:粗 600至900都是加粗,且区别不大,不会有视觉上的变化;
- 900:bolder:更粗 用数字描述最大到900,与bold区别不大,只是在语意上更强调。
颜色——color
- 英文描述
eg:color:red; - 十六进制颜色
eg:color:#ffffff;
由#+六个字符或数字组成,范围在0至9,a至f之间 - rgb(red,green,blue)
eg:color:rgb(42,58,61);
数值范围在0至255 - 透明度rgba
eg:color:rgb(42,58,61,0.3);
数值范围在0~1,0表示全透明,1表示不透明。
对齐方式——text-align
- center 居中(适用于图片)
- lift 左对齐(适用于图片)
- right 右对齐(适用于图片)
- justify 两端对齐(只适用于多行文本)
首行缩进——text-indent
单位为px或em
行间距——line-heght
数值单位为px,一般选择比字体大一点,这样不会挤到一起也不会过大。
字符间距——letter-spacing
字母与字母之间的距离。
单词间距——word-spacing
单词与单词之间的距离。
文字上的线条——text-decoration
- underline 下划线
- line-through 删除线
- overline 上划线
- none 可取消自带的下划线(例如a元素超链接默认有下划线) 可以同时存在:text-decoration:underline line-through overline;
大小写——text-transform
- capitalize 将文字中每个单词的首字母变成大写
- lowercase 将文字全部变成小写
- uppercase 将文字全部变成大写
- none