300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 前端笔记之CSS基础 - 字体和文本样式

前端笔记之CSS基础 - 字体和文本样式

时间:2021-05-31 18:39:23

相关推荐

前端笔记之CSS基础 - 字体和文本样式

目录

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标签默认的下划线

3、行高

作用:控制一行的上下行间距属性名:line-height取值: 数字+px倍数(当前标签font-size的倍数)应用: 让单行文字垂直居中可以设置line-height:文字父元素高度网页精准布局时,会设置line-height:1 可以取消上下间距行高与font连写的注意点: 如果同时设置了行高与font连写,注意覆盖问题font : style weight size/line-height family ;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。