这是我参与「第五届青训营 」笔记创作活动的第2天
一、本堂课重点内容：
- 介绍了CSS基本语法和在浏览器中的简要执行过程
- 讲解了CSS中选择器、颜色、字体相关知识
二、详细知识点介绍：
CSS概述
CSS是什么
全称Cascading Style Sheets，用来定义页面元素的样式，包括但不限于：
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
基本语法
基本单元分为选择器、属性、属性值
CSS书写位置
在页面中使用CSS有三种方法：外链（推荐）、嵌入、内联（不推荐）
传统喜欢用外链，现在组件式喜欢用嵌入
<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">
<!-- 嵌入 -->
<style>
li { margin: 0; list-style: none; }
p { margin: lem 0;}
</style>
<!-- 内联 -->
<p style="margin:lem 0">Example Content</p>
CSS如何工作
简单来说就是把解析出来的CSS添加到DOM树上形成渲染树
CSS各部分讲解
选择器
选择器的功能是找出页面中的某些元素，给它们设置样式，主要包括：
利用标签和属性定位
- 通配符选择器：
* {样式} - 标签选择器：
标签名 {样式} - id选择器：在标签上添加id属性，这个id属性的值必须在该页面唯一，然后CSS中
#id的属性值 {样式} - 类选择器：在标签上添加class属性，class属性中可以有多个值，用空格隔开，然后CSS中
.类型名 {样式} - 属性选择器
-
- 只要标签中包含某个元素就能选中：
[属性名] {样式} - 包含某个属性并且等于特定的值：
[属性名=所要求的的属性值] {样式} - 包含某个属性并且属性的值可以匹配上某些规则
- 只要标签中包含某个元素就能选中：
-
-
[属性名^=xx] {样式}，比如说a[href^="#"]{样式}就是会选中所有a标签中href属性以#开头的a标签[属性名$=xx] {样式}，比如说a[href$=".jpg"]{样式}就是会选中所有a标签中href属性以.jpg结尾的a标签
-
伪类选择器
主要是利用状态和结构来定位，语法是写上你用到的选择器，然后在其后面加一个英文冒号":"，在冒号后面写上用到的伪元素
- 状态伪类，某一个元素要处于特定的状态才会被选中，
-
:link，比如说a:link，表示未访问的链接:visited，比如说a:visited，表示已访问的链接:hover，比如说a:hover，表示鼠标悬停到的链接:active，比如说a:active，表示选定的链接:focus，比如说input:focus，表示聚焦的输入框
- 结构伪类，就是根据DOM树中的节点位置来定位
-
:first-child，比如说li:first-child{样式}，就是选li标签中的第一个元素:last-child，比如说li:last-child{样式}，就是选li标签中的最后元素
组合
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果它是A的子元素 | section > p |
| 兄弟选择器 | A~B | 选中B，如果它在A后并且和A同级 | h2 ~p |
| 相邻选择器 | A+B | 选中B，如果它紧跟在A后面 | h2 + p |
选择器组
同时选中多个选择器，用逗号将其分隔
颜色
RGB模型
三原色混合比例，有两种表示方法
HSL模型
相比如RGB更加符合人类直觉一点，可以用在按钮颜色变暗变亮
直接用名称
可以，但是没必要，最多用的就是black和white
不透明度
1代表完全不透明
字体相关
font-family
字体一般要写多个，像下面这样。因为你不能保证你写的字体所有设备上都有
h1 {
font-family: Optima, Georgia, serif;
}
font-family最后一个一定要加通用字体族，CSS一共支持五种通用字体族，这是一个风格不是一个具体的字体。比如说你如果最后写的是serif，那么当你前面的字体都没有的话，那么CSS会从电脑中拿出一种属于serif字体组的字体显示。
如果中英文混排，那么建议英文字体写在中文字体前面，因为浏览器是逐个字符渲染，中文字体写在前那么所有的英文字母都将按照中文字体来显示。
如果要完全确保和设计稿一模一样，那么就使用Web Fonts把字体放在服务器上，浏览器请求的时候把字体一起拿过来。
中文字体要注意需要进行一些裁切，因为中文字体太大了，可以用字蛛。
@font-face{
font-family:"你给字体取一个名字";
src:url(字体文件的url地址)foramt('字体文件的后缀');
}
font-size
- 关键字
-
- small、medium、large
- 长度
-
- px、em
- 百分数
-
- 相对于父元素字体大小
font-weight
可以数值表示（100-900），可以用关键词normal（400），bold（700）来表示。注意使用的字体是否提供了多个字重的字体。
line-height
行高就是两条基准线之间的距离，如果不带单位，那么行高就是自身字体的xxx倍
字体多个属性合并表示
text-align
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
- inherit 规定应该从父元素继承 text-align 属性的值。
spacing
- letter-spacing： 可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等。
- word-spacing： letter-spacing作用于所有字符，但word-spacing仅作用于空格字符，即只用来增加空格的间隙宽度
- white-space： 用于如何处理元素内的空白字符，这类空白字符包括Space(空格)键、Enter(回车)键、Tab(制表符)键产生的空白。因此，white-space可以决定图文内容是否在一行显示（回车空格是否生效），是否显示大段连续空白（空格是否生效）等。其属性值包括下面这些。
-
- normal：合并空白字符和换行符。
- pre：空白字符不合并，并且内容只在有换行符的地方换行。
- nowrap：该值和normal一样会合并空白字符，但不允许文本环绕。
- pre-wrap：空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕。
- pre-line：合并空白字符，但只在有换行符的地方换行，允许文本环绕。
text-indent
首行缩进
text-decoration
三、实践练习例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog</title>
<style>
h1 {
color: orange;
font-size: 24px;
}
p {
color: gray;
font-size: 14px;
line-height: 1.8;
}
</style>
<body>
<h1>Web框架的架构模式探讨</h1>
<p>在写干货之前，我想先探讨两个问题模式的局限性? 模式有什么用? </p>
</body>
</html>
效果如下
四、课后个人总结：
- 不要想着去背，多查多练
