字体样式
- 字体大小:font-size: 数字 + px (谷歌浏览器默认16px)
- 字体粗细:font-weight: (①关键字(多使用):normal正常 bold加粗 ②纯数字:100~900整百数, 400正常 700加粗)
注意: ①不是所有字体都提供了九种粗细,部分取值在页面中是没有变化的
②实际开发中,要么使用关键字,要么使用400和700来设置字体粗细
- 字体样式:font-style: (normal正常 italic倾斜)
- 字体系列:font-family: (可写多种字体,字体由多个单词组成时,用'' "包裹,中间以,隔开,最后以字体系列结束,不需要" "包裹)
注意: ①windows默认微软雅黑,macOS默认苹方
②从前往后识别字体,如果电脑中未安装该字体,则会显示下一个字体,假如都不支持,则会显示系统默认字体
③实际开发中,尽量使用系统常见自带字体,懂得都懂
④常见字体系列:sans-serif: 无衬线字体 (粗细均匀无装饰可用于大部分网页)
serif: 衬线字体(粗细不均有笔锋可用于报刊书籍)
monospace: 等宽字体(宽度相等可用于程序代码的编写)
- 字体font相关属性连写形式
font:style weight size family;
小Tip:swsf(稍微舒服)
注意:①只能省略前两个属性,后两个不能省略(如果省略了取值,相当于设置了默认值)
②单独样式必须要写在连写的后面,否则单独样式不生效,这其实是一个样式的层叠问题,很简单,如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效
文本样式
- 文本缩进:text-indent: 数字 + px 或者 数字 + em(推荐:1em=当前标签中font-size的大小)
- 文本水平对齐方式:text-align:(left左对齐 right右对齐 center居中)
注意:如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
- 文本修饰:text-decoration:(none无装饰线(常用) underline下划线(常用) line-through删除线(不常用) overline上划线(几乎不用))
注意:开发中会使用text-decoration: none; 去清除a标签默认的下划线
- 行高:line-height: 数字 + px 或者 倍数(当前标签font-size的倍数)
注意:①让单行文本垂直居中可以设置line-height:文字父元素的高度
· ②网页精准布局时,会设置line-height:1,可以取消上下间距
③行高和font连写属性存在覆盖问题,line-height和size是等价的,故需要防止发生覆盖