文字属性
color :字体颜色
- 直接英文颜色名字 如(red、blue);
- rgb 三原色;
- rgba 三原色 透明度,a 表示透明度(取值范围:0~1);
- #ff6700 16进制的颜色值;
font-size:字体大小
常用单位:
- px 像素;
- em 1em代表的实际物理像素有父元素的字体大小决定;
- rem 1rem代表的实际物理像素有由根节点html的字体大小决定;
font-family : 设置元素的字体系列
font-family : "微软雅黑";
重点:如果值是中文,需要用引号引起来,如果是两个及以上的英文单词代表的字体,也需要用引号引起来,各个字体之间用逗号隔开,解析顺序是从左到右,如果都没有的话,就默认使用电脑中子代的字体。
font-style : 设置字体是否倾斜
font-style:normal;
- normal: 默认值,不倾斜;
- italic 倾斜;
- oblique 倾斜;
如果要设置字体倾斜的话,建议使用 italic 。
font-weight : 字体是否加粗
font-weight : bold;
- normal 默认字体不加粗;
- bold 字体加粗;
- bolder 更粗;
- 如果给数值的话,不加粗是(100~500),加粗是(600~900)
line-height : 行高
行高是基线到基线之间距离称之为行高!
注意:如果文字的行高和父元素的高度一样的话,就会实现文字垂直居中的效果!
常用单位: px 具体的像素值; 数字 1 字体大小的倍数,1就是本身字体大小的1倍;
font 组合简写
font : font-style font-weight font-size/line-height font-family;
例子: font:normal bold 30px/18px "微软雅黑";
注意:
- 简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。
- 使用font属性时,必须按照此顺序书写,不能更换顺序,个个属性以空格隔开。
-
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用!