三、字体和文本相关样式
一）字体样式
1.字体大小：font-size
取值：数字+ px（单位）
注意点：
*谷歌浏览器默认的字体大小是16px
*必须加上单位
2.字体粗细：font-weight
取值：
*关键字：
| 正常 | normal |
|---|---|
| 加粗 | bold |
*纯数字：100~900的整百数
| 正常 | 400 |
|---|---|
| 加粗 | 700 |
注意点：
*不是所有字体都提供了九种粗细，因此部分取值页面中无变化
*实际开发中一般使用关键字居多
3.字体样式：font-style（倾斜）
取值：
正常：normal
倾斜：italic
4.常见字体系列(了解)
*无衬线字体( sans - serif )
1.特点:文字笔画粗细均匀,并且首尾无装饰
2.场景:网页中大多采用无衬线字体
3.常见该系列字体:黑体、 Arial
*衬线字体( serif )
1.特点:文字笔画粗细不均,并且首尾有笔锋装饰
2.场景:报刊书籍中应用广泛
3.常见该系列字体:宋体、 Times New Roman
*等宽字体( monospace )
1.特点:每个字母或文字的宽度相等
2.场景:一般用于程序代码编写,有利于代码的阅读和编写
3.常见该系列字体: Consolas 、 fira code
4.字体类型：font-family
属性名: font - family
常见取值:具体字体1,具体字体2,具体字体3,具体字体4…字体系列
(字体与字体之间用英文逗号隔开，如果有的字体名字是多个单词组成则需要用引号包裹，最后写明字体系列的类型三选一，不能用引号)
*具体字体:" Microsoft YaHei "、微软雅黑、黑体、宋体、楷体等……
*字体系列: sans - serif 、 serif 、 monospace 等
渲染规则
- 从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体
- 如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
注意点:
- 如果字体名称中存在多个单词,推荐使用引号包裹，
- 最后一项字体系列不需要引号包裹
- 网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示
5.如何在css中引入一个新的字体样式
第一步：将所需字体下载至项目文件夹中（新建字体文件）
第二步：在css中用@font-face声明字体，写在最上面：
@font-face{
font-family: "snow";/*自定义字体的名称*/
src: url("../font/digital-7_mono.ttf");/*字体所保存的位置*/
}
第三步：在相关选择器中使用该字体
p{font-family: snow;}
6.字体 font 相关属性的连写
属性名: font →取值:
font : style weight size family ;→顺序要求固定，之间由空格隔开 记忆口诀： swsf (稍微舒服)
p{font:italic bolder 30px 楷体,宋体,sans-serif;}
省略要求: 只能省略前两个,如果省略了相当于设置了默认值
注意点:
如果需要同时设置单独和连写形式，要么把单独的样式写在连写的下面；要么把单独的样式写在连写的里面
二）文本样式
1.文本缩进：text-indent
取值：
数字+px
数字+em（推荐：1em=当前标签的字体大小）
2.文本水平对齐方式：text-align
取值：
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
适用元素：
1.文本
2.行内元素：span标签、a标签等
3.行内块块元素：input标签、img标签等
注意点：
如果要让相关元素水平居中，text-align属性应给文本所在标签（文本的父元素）设置
补充：另一种居中方法（margin：0 auto）
适用元素：div、p、h（大盒子，转变为块/行内块）
注意点：
1.如果需要让 div . p 、 h (大盒子)水平居中,直接给当前元素本身设置即可；
2.margin : 0 auto 一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度；
3.文本修饰：text-decoration
取值：
| 属性值 | 效果 |
|---|---|
| underline | 下划线 |
| line-through | 中划线（删除线） |
| overline | 上划线 |
| none | 无装饰线 |
注意点：最常使用于清除a标签自带的下划线
三）行高
作用:控制行间距(给一行上下增加间距
属性名: line - height 取值: 1.数字+ px 2.倍数(当前标签 font — size 的倍数)
应用: 1.让单行文本垂直居中可以设置 line — height :文字父元素高度
2.网页精准布局时,会设置 line — height :1 ，可以取消上下间距
行高与 font 连写的注意点: *如果同时设置了行高和 font 连写,注意覆盖问题
*font : style weight size / line - height family ;
四）颜色相关
css中所有颜色值都是用RGB色域定义的，目前在css中表示RGB的方式有四种：
1.关键字表示法
red、blue.......
例：
h1{color: blue;}
2.HEX016进制表示法
- 16进制颜色由一个# 后面跟一个3位或6位数字组成；
例：
h1{color: #111111;}
- 数字用0-9以及大小写a-f字符组成。
例：
h1{color：#f00;}
3.RGB值
- 由RGB（）函数声明，每个值都是从0-255的整数，0为纯白，255为纯黑
例：
h1{color: rgb(161, 20, 126)}
又可调整饱和度：
4.HSL值
-
由hsl（）函数声明
色度hue值由0-360无单位数字，表示色环上的角度
饱和度saturation、亮度lightness值从0-100%表示
