这是我参与「第四届青训营」笔记创作活动的的第2天，今天的课程是「理解CSS」，老师主要讲解了 CSS是什么、如何在页面中使用CSS 、 CSS是如何工作的、关于选择器、伪类、颜色、常用样式这几部分内容，深入讲解了CSS。

一些概念和铺垫

CSS是什么

CSS是Cascading Style Sheets的缩写，意为层叠样式表。
CSS用来定义页面元素的样式，如设置字体和颜色、位置和大小、添加动画效果等。

h1{
    color: white;
    font-size:14px;
}

1、开头的h1是选择器Selector，大括号中的样式会添加在选择器选择的元素上，如该代码中，颜色和字体的样式会添加在页面中所有的h1元素上。
2、一个属性和它的属性值在一起被称为一条声明Declaration。多条声明之间用分号隔开，放在大括号中组成一个声明块。一个选择器加一个声明块称作一条规则。

在页面中使用CSS

外链式

<!--在html文件中书写link标签-->
<link rel="stylesheet" href="/assets/style.css">

外链式使用CSS先将样式写在单独一个CSS文件中，然后使用link标签将CSS样式表引入页面中。

嵌入式

<!--直接在html文件中书写样式-->
<style>
    li{margin:0; list-style:none;}
    p{margin:1em 0;}
</style>

嵌入式直接在HTML文件中书写样式，不需要单独写CSS文件，样式外面用style标签包裹。

内联式

<!--在html文件具体的元素中用style属性书写样式-->
<p style="margin:1em 0">Example Content</p>

内联式直接在要添加样式的元素的标签中书写style属性，将样式作为属性值书写在里面。

总结：三种样式中一般更推荐使用外链式。

CSS是如何工作的

关于选择器

选择器Selector

找出页面中的元素，以便给它们设置样式
使用多种方式选择元素
1、按照标签名类名或id
2、按照属性
3、按照DOM树中的位置
通配选择器*

<style>
    *{
        color:red;
        font-size:20px;
    }
</style>

通配选择器匹配所有，例如在上面这段代码中，页面中所有元素都会被添加括号中的样式。

标签选择器

<style>
    h1{
        color:gray;
        font-size:20px;
    }
</style>

标签选择器匹配对应的标签，例如在上面这段代码中，页面中所有h1元素都会被添加括号中的样式。

id选择器

<style>
    #logo{
        color:gray;
        font-size:20px;
    }
</style>

同时给某个元素设置id：

<h1 id="logo">一级标题</h1>

那么id为logo的元素就会添加对应的样式。PS：id在页面中一般是唯一的。

类选择器

<style>
    .done{
        color:gray;
        font-size:20px;
    }
</style>

同时给某些元素设置类：

<h1 class="done">一级标题</h1>
<h2 class="done">二级标题</h2>

那么类名为done的元素都会添加对应的样式。

属性选择器

<style>
    [disabled]{
        background:#eee;
    }
</style>

同时给某些元素设置属性：

<input value="zhao" disabled/>

那么带有disabled属性的元素都会添加对应的样式。

其他

一些类似于模糊搜索的选择器

1、^=
例如a[href^="#"]
该选择器匹配的是a标签中href属性的值以#开头的元素。

2、$=
例如a[href$=".jpg"]
该选择器匹配的是a标签中href属性的值以.jpg结尾的元素。

伪类

伪类（pseudo-classes）不基于标签和属性定位元素，分为状态伪类和结构伪类。

状态伪类

当元素处于某一特定的状态下会被选中。

<!--设置一个链接-->
<a href="http://example.com"></a>

设置状态伪类选择器：

<style>
    a:link{
        color:black;
    }
    a:visited{
        color:gray;
    }
    a:hover{
        color:orange;
    }
    a:active{
        color:red;
    }
</style>

在上面这段代码中
1、当链接没有被访问过，匹配a:link，呈现黑色。
2、当链接已经被访问过，匹配a:visited，呈现灰色。
3、当鼠标移到链接上时，匹配a:hover，呈现橙色。
4、当鼠标按下链接之时，匹配a:active，呈现红色。

PS：选择器:focus匹配聚焦的元素。

结构伪类

根据元素在DOM树中节点出现的位置来决定是否选中元素。

<!--设置一个有序列表-->
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

设置结构伪类选择器：

<style>
    li:first-child{
        color:red;
    }
    li:last-child{
        color:blue;
    }
</style>

在上面这段代码中
1、如果某个li标签是父级的第一个子节点，则被选中，呈现红色。
2、如果某个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

选择器组中的多个选择器用逗号隔开。

颜色

HSL

HSL是Hue、Saturation、Lightness的简写。
1、Hue色相
色彩的基本属性，取值0~360。
2、Saturation饱和度
色彩的鲜艳程度，越高越鲜艳。
3、Lightness亮度
色彩的明亮程度，越高越明亮。

Alpha

alpha透明度：数值越高越不透明。
rgba，hsla

常用属性

字体

1、字体属性是font-family，由于不同设备下载的字体不同可设置多种字体以防不同设备无法加载没有的字体。
2、可使用Web Fonts，浏览器会先访问和下载字体再进行载入。

<style>
    @font-face{
        font-family:"Megrim";
        src:url("字体地址") format('woff2');
    }
    h1{
        font-family:Megrim,Cursive;
    }
</style>

字体效果

字体效果属性是font-style，默认属性值normal，斜体italic。

字体粗细

字体粗细属性是font-weight，默认属性值400（normal），粗体属性值700（bold），属性值范围100~900，数值越大字体越粗。

行高

行高属性是line-height。

深入CSS

CSS求值过程

布局

布局常见有三种：常规流、浮动、绝对定位。
常规流：行级、块级、表格布局、FlexBox、Grid布局。

标准盒模型

怪异盒模型

溢出

溢出属性是overflow：
1、当值为visible时，溢出部分可见。
2、当值为hidden时，溢出部分不可见。
3、当值为scroll时，溢出部分可通过滚动条查看。

块级VS行级

1、块级盒子不和其他盒子并列摆放，适用所有的盒模型属性。
2、行级盒子和其他行级盒子放在一行或拆开放在多行，不适用盒模型的width、height属性。

display属性

1、block：块级盒子
2、inline：行级盒子
3、inline-block：本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行
4、none：排版时完全忽略

行级排版上下文

行级排版上下文IFC是Inline Formatting Context的简写。
只包含行级元素的容器会创建一个IFC。
IFC内的排版规则：
1、盒子在一行内水平摆放
2、一行放不下时，换行显示
3、text-align决定一行内盒子的水平对齐
4、vertical-align决定一个盒子在行内的垂直对齐
5、避开浮动（float）元素

块级排版上下文

行级排版上下文BFC是Block Formatting Context的简写。
以下容器会创建一个BFC。
1、根元素
2、浮动、绝对定位、inline-block
3、Flex子项和Grid子项
4、overflow值不是visible的块盒
5、display:flow-root;
BFC内的排版规则：
1、盒子从上到下摆放
2、垂直margin合并
3、BFC内盒子的margin不会与外面的合并
4、BFC不会和浮动元素重叠

Flex Box

弹性盒Flex Box是一种新的排版上下文。display:flex;
弹性盒中的摆放根据主轴的方向来决定，与主轴垂直的方向叫侧轴。
弹性盒中的摆放：

Grid布局

Flex Box的布局是单向的，Grid布局是二维的。
1、display:grid;使元素生成一个块级的Grid容器。
2、使用grid-template相关属性将容器划分为网格。
3、设置每一个子项占哪些行/列。通过grid-area

position属性

位置position属性常用四个值：
1、static：默认值，非定位元素。
2、relative：相对自身原本位置偏移，不脱离文档流。
3、absolute：绝对定位，相对非static祖先元素定位。 4、fixed：相对视口绝对定位。

PS：
1、position:relative在常规流中布局，相对于自身原本位置进行偏移，使用top、left、bottom、right设置偏移长度，流内其他元素当它没有偏移一样布局。
2、position:absolute脱离常规流，相对于最近的非static祖先元素定位，不会对流内元素布局造成影响。

理解CSS ｜ 青训营笔记