这是我参与「第五届青训营」笔记创作活动的第2天，emm坚持学习还好，坚持笔记是难事，希望能坚持下去。

一、本堂课重点内容：

CSS简介
CSS语法

其中，语法内容仅作概括，详细知识点请查询相关资料。

二、详细知识点介绍：

CSS是如何工作的：

先加载HTML，然后解析HTML的同时开始加载CSS，并解析CSS，然后一同回到创建DOM树，此时CSS添加了样式到DOM节点里，最终展示页面。

选择器：找出页面中的元素，设置其样式

通配选择器
标签选择器
id选择器
类选择器
属性选择器
等

伪类：

状态伪类：根据与用户交互状态的不同，设置样式
结构伪类：元素在DOM树的不同结构位置，设置样式

组合选择器：

直接组合
后代组合
亲子组合
兄弟选择器
相邻选择器

颜色：

RGB
HSL
指定颜色
透明度alpha

字体：

可设置多个通用字体，按顺序使用，因为不一定都有所设置的字体库
大小、粗细
换行 此片段原视频画面卡住了

选择器规则（优先级）

由特异度决定，特异度越高（越特殊），则优先级更高

特异度：由 id ，（伪）类，标签数量决定。

继承：

部分属性会继承父元素的值，除非显式指定一个值

CSS中每一个属性都有其初始值，可用关键字initial重置属性值为初始值

CSS求值过程

graph TD
DOM树-->id(filtering)
样式规则--> id(filtering:筛选规则) --声明值-->cascading:选出最高优先级的属性值--层叠值-->defaulting:当层叠值为空时使用继承or初始值--指定值-->resolving:将一些相对值or关键字转化为绝对值--计算值-->formatting:进一步转化为绝对值--使用值-->constraining:小数像素转化为整数-->实际值

布局

常规流
浮动
绝对定位

基本属性：

width
height
padding(四个方向内边距)
border(边框样式、粗细、颜色)
margin(外边距)
box-sizing(容器度量模式)

常规流排版：

块级(盒子从上到下)
行级(盒子左右排布)
Table(好像没讲)
Flex(有主轴副轴两个流向)
Grid(二维网格式布局)

布局部分比较抽象，且内容较多，我理解不深。

三、实践练习例子：

今天的课程内容较多，因此只选部分知识点进行实验，帮助理解。

行块布局

<div>
This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
<img src="https://assets.codepen.io/59477/cat.png" alt="cat">And <em>Inline Block</em>
</div>
<style>
  div {
width: 10em;
//overflow-wrap: break-word;/*是否允许断单词换行*/
background:#c33;
}
em {
display: inline-block;
width: 3em;
background: #ac5;
}
</style>

flex布局

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container{
    display: flex;
    border: 2px solid  #966;
    width: 100px;
  }
  .a .b .c{
    text-align: center;
    padding: 1em;
  }
  .a {
    background: #fcc;
    flex-grow: 2;/*弹性分配*/
  }
  .b {
    background: #ac5;
    flex-grow: 1;
  }
  .c {
    background: #2dc;
  }
</style>

此处有个问题：文本没有居中

grid布局

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container{
    display: grid;
    border: 2px solid  #966;
    grid-template-columns:100px 1fr 1fr ;
    grid-template-rows:100px 1fr 1fr 1fr 1fr;
  }
  
  .a .b .c{
    text-align:center;
    padding: 1em;
  }
  .a {
    background: #fcc;
    grid-area:1/1/2/3;
  }
  .b {
    background: #ac5;
    grid-area:2/2/4/4;
  }
  .c {
    background: #2dc;
  }
</style>

四、课后个人总结：

今天课程内容有点多，而且大部分是语法内容，需要课后一边实践一边消化。通过今天的课程，我对CSS有了进一步的理解，要想做好一个页面的样式与排版，并不是那么简单的，背后还有很多要学的地方。最重要一点就是，一定要自己动手去练习，才能熟悉其语法，死记硬背是学不好代码的。

类选择器与伪类选择器易混淆

如有错误请多多包涵

CSS | 青训营笔记