这是我参与「第四届青训营 」笔记创作活动的第3天
CSS字体属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式（如斜体）
字体系列
CSS使用font-family属性定义文本的字体系列
p {
font-family: '微软雅黑';
}
div {
font-family: Arial,'Microsoft Yahei','微软雅黑';
}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号（单引号双引号都可以）
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
- 设置多个字体的意义是，如果用户电脑未安装第一种字体，就执行第二个字体，以此类推
- 最常见的几个字体：
body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}
字体大小
CSS 使用font-size属性定义字体大小
p {
font-size: 20px;
}
- px（像素）大小是我们网页的最常用的单位
- 谷歌浏览器默认的字体大小为16px
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
- 可以给 body 指定整个页面文字的大小，标题标签比较特殊，需要单独指定文字大小
字体粗细
CSS使用font-weight属性设置文本字体的粗细
p {
font-weight: bold;
}
| 属性值 | 描述 |
|---|---|
normal | 默认值（不加粗的） |
bold | 定义粗体（加粗的） |
lighter | 比父元素轻一个相对的字体权重，详情见Zeal |
bolder | 比父元素重一个相对的字体权重，详情见Zeal |
权重100~900 | 400等同于nomal，700等同于bold，注意这个数字指的是权重，后面不跟单位 |
- 学会让加粗标签（比如
h和strong等）不加粗，或者其他标签加粗 - 实际开发时，我们更喜欢用数字表示粗细
文字样式
CSS使用font-style属性设置文本的风格
p {
font-style: normal;
}
| 属性值 | 作用 |
|---|---|
normal | 默认值，浏览器会显示标准的字体样式 font-style: normal; |
italic | 浏览器会显示斜体的字体样式 |
注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体
字体复合属性
字体属性可以把以上字体样式综合来写，这样可以更节约代码
body {
font: font-style font-weight font-size/line-height font-family
}
- 使用
font属性时，必须按照上面语法格式中的顺序书写，不能更改顺序，并且各个属性间以空格隔开 - 不需要设置的属性可以省略（取默认值），但必须保留
font-size和font-family属性，否则font属性将不起作用
字体属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
font-size | 字号 | 我们通常用的单位时px 像素，一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位 |
font-style | 字体样式 | 记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal |
font | 字体连写 | 1.字体连写是有顺序的 不能随意换位置 2.其中 字号 和 字体 必须同时出现 |
CSS文本属性
CSS Text(文本)属性可定义文本的外观，比如文本的颜色对齐文本、装饰文本、文本缩进、行间距等
文本颜色
color属性用于定义文本的颜色
div {
color: red;
}
| 属性表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue等 |
| 十六进制 | #FF0000,#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)，rgb(100%,0%,0%) |
开发中最常用的是十六进制
对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center;
}
| 属性值 | 解释 |
|---|---|
left | 左对齐（默认值） |
right | 右对齐 |
center | 居中对齐 |
装饰文本
text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等
div {
text-decoration: underline;
}
| 属性值 | 描述 |
|---|---|
none | 默认 没有装饰线（最常用） |
underline | 下划线 链接a自带下划线（常用） |
overline | 上划线 （几乎不用） |
line-through | 删除线 （不常用） |
文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
div {
text-indent: 10px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
p {
text-indent: 2em;
}
em 是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
行间距
line-height属性用于设置行间距间的距离（行高），可以设置文字行与行之间的距离,真正改变的是上下间距
p {
line-height: 16px;
}
文本属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
color | 文本颜色 | 我们通常用 十六进制 比如 而且是简写形式 |
text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
text-indent | 文本缩进 | 通常我们用于段落首行缩进2个字的距离 text-align: 2em; |
text-decoration | 文本装饰 | 记住 添加下划线 underline 取消下划线 none |
line-height | 行高 | 控制行与行之间的距离 |
CSS引入方式
按照CSS样式书写的位置（或者引入方式），CSS样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style></style>标签中
<style>
div {
color: red;
font-size: 12px;
}
</style>
<style></style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head></head>标签中- 通过此种方式，可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但是并没有实现结构与样式完全分离
行内样式表
行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式，适合修改简单样式
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
style其实就是标签的属性- 在双引号中间，写法要符合CSS规范
- 可以控制当前的标签设置样式
- 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
- 使用行内样式表设定CSS，通常也被称为行内式引入
外部样式表
实际开发都是外部样式表，适合样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
引入外部样式表分为两步：
- 新建一个后缀名为
.css的样式文件，把所有CSS代码都放入此文件中 - 在HTML页面中，使用
<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
| 属性 | 作用 |
|---|---|
rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件 |
href | 定义所连接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
- 使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式
引入方式总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，吐血推荐 | 控制多个页面 |
CSS复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
- 复合选择器可以更准确、更高效的选择目标元素（标签）
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等
后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写到前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代
语法：
元素1 元素2 {样式说明}
上述语法表示选择元素1里面的所有元素2（后代元素）
例如：
ul li {样式说明} /*选择 ul 里面所有的 li 元素*/
- 元素1和元素2中间用空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器
子选择器
**子元素选择器（子选择器）**只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素
语法：
元素1 > 元素2{样式说明}
上述语法表示选择元素1里面的所有直接后代（子元素）元素2
例如：
div > p {样式说明} /*选择 div 里面所有最近一级 p 标签元素*/
- 元素1和元素2中间用大于号隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子，其孙子、重孙之类都不归他管，你也可以叫他亲儿子选择器
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体说明
并集选择器是各选择器通过英文逗号（ , ）链接而成，任何形式的选择器都可以作为并集选择器的一部分
语法：
元素1,
元素2 {样式说明}
上述语法表示选择元素1和元素2
例如：
ul,
div {样式说明} /*选 ul 和 div 标签元素*/
- 元素1和元素2中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体说明
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个元素，第n个元素
伪类选择器书写最大的特点是用冒号（ : ）表示，比如:hover、:first-child
伪类选择器有很多，有链接伪类、结构伪类等
链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接 （鼠标按下未弹起的链接）*/
链接伪类选择器注意事项：
- 为了确保生效，请按照 LVHA 的顺序声明：:link - :visited - :hover - :active
- 因为
a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
链接伪类选择器实际工作开发中的写法：
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red;/* 鼠标经过的时候，由原来的灰色变成了红色 */
}
:focus 伪类选择器
:focus 伪类选择器用于选取获焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
input:focus {
background-color: yellow;
}
复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格.nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于.nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号.nav,.header |
| 链接伪类选择器 | 选择不同状态的来链接 | 跟链接相关 | 较多 | 重点记住a {}和a:hover {}实际开发的写法 |
| :focus伪类选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus记住这个写法 |
