目录
1、字体样式
1.1、字体大小
1.2、字体粗细
1.3、文字样式(是否倾斜)
1.4、字体
1.5、层叠性
1.6、字体font相关属性的连写
2、文本样式
2.1、文本缩进
2.2、文本水平对齐方式
2.3、文本修饰
3、行高
1、字体样式
1.1、字体大小
属性名:font-size取值:数字+px注意点: 谷歌浏览器默认字体大小是16px单位需要设置,否则无效1.2、字体粗细
属性名:font-weight取值: 关键字纯数字:100~900的整百数:
注意点:
不是所有字体都提供了九种粗细,因此部分取值页面中无变化
实际开发中以:正常、加粗两种取值使用最多
1.3、文字样式(是否倾斜)
属性名:font-style取值:1.4、字体
属性名:font-family常见字体系列(了解): 无衬线字体(sans-serif) 特点:文字壁画粗细均匀,并且首位无装饰场景:网页中大多采用无衬线字体常见该系列字体:黑体、Arial等宽字体(monospace) 特点:每个字母或文字的宽度相等场景:一般用于程序代码编写,有利于代码的阅读和编写常见该系列字体:Consolas、fira code 衬线字体(serif) 特点:文字笔画粗细不均,并且首尾有笔锋装饰场景:报刊书籍中应用广泛常见该系列字体:宋体、Times New Roman<style>div {/* font-family: 宋体; *//* 如果用户电脑没有安装微软雅黑,就按黑体显示文字 *//* 如果电脑没有安装黑体,就按任意一种非衬线字体系列显示 */font-family: 微软雅黑,黑体,sans-serif;}</style>
1.5、层叠性
问题: 给同一个标签设置了相同的样式,此时浏览器会如何渲染?结果: 如果给同一个标签设置了相同的属性,此时样式会叠层(覆盖),写在最下面的会生效TIP: CSS(Cascading style sheets)层叠样式表所谓的层叠即叠加的意思,表示样式可以一层一层的层叠覆盖1.6、字体font相关属性的连写
属性名:font(复合属性)取值: font : style weight size family;省略要求: 只能省略前两个,如果省略了相当于设置了默认值注意点:如果需要同时设置单独和连写形式 要么把单独的样式写在连写的下面要么把单独的样式写在连写的里面2、文本样式
2.1、文本缩进
属性名:text-index取值: 数字 + px数字 + em (推荐:1em = 当前标签的font-size大小)2.2、文本水平对齐方式
属性名:text-align取值:注意点:
如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
水平居中方法总结:
text-align : center 可以让文本、span标签、a标签、input标签、img标签水平居中
注意点:如果需要让以上元素水平居中,text-align : center 需要给以上元素的父元素设置
2.3、文本修饰
属性名:text-decoration取值:注意点:
开发中会使用text-decoration : none ; 清除a标签默认的下划线