这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
课程笔记
CCS基础知识
CSS全称为Cascading Style Sheet即层叠样式表，其主要功能就是用于定义页面的元素样式，例如设置字体的大小及颜色、设置背景颜色、设置内容位置和大小、添加动画效果等等与样式相关的东西都需要通过CSS来设置。
在页面中使用CSS
一共有三种方式可以在编写HTML页面时使用CSS，即外链方式、嵌入方式与内联方式。
外链方式为通过<link>标签来引入外部CSS文件。
嵌入方式为通过<style>标签来直接在HTML文件内部书写CSS代码。
内联方式为通过直接在标签上通过style属性设置样式。
<!-- 外链 -->
<link rel="stylesheet" href="/assest/style.css">
<!-- 嵌入 -->
<style>
li{ margin: 0; list-style: none; }
p{ margin: 1em 0; }
</style>
<!-- 嵌入 -->
<p style="margin: 1em 0"> Example Content </p>
通常使用的较多的都是外链方式，即将页面的所有样式都存在一个样式表中，这样既能直观的看到页面的结构布局也能方便的管理页面的样式，内联样式往往是在开发过程中对某个元素或局部样式进行测试的时候使用。
选择器
如何选定一个特定的元素或某些具有共同特性的元素，对其进行样式设定这是使用CSS首要关注的问题，选择器（Selector）就是用于解决这个问题的。通过选择器，我们能够找出页面中的元素以便给他们设置样式，且可以通过多种方式选择元素例如按照标签名、类名或id选取，按照属性选取，按照元素在DOM树中的位置选取等等。常用的选择器有：
-
通配选择器
以
*作为选择器，通过该选择器可以选取页面中的所有元素进行样式设定。 -
标签选择器
以
标签名作为选择器，通过该选择器可以选取所有的同名标签进行样式设定。 -
id选择器
为标签设置
id属性后，以id为选择器，可以选取指定id对应的元素进行样式设定。（id是唯一的） -
类选择器
为标签设置
class属性后，以类名为选择器，可以选取所有拥有指定类名的元素进行样式设定。（类名不唯一，可以在多个元素上使用同一类名） -
属性选择器
使用形如
[disabled]的选择器，即中括号中填上属性名作为选择器，可以选取所有设置了指定属性的元素进行样式设定。 -
伪类选择器
伪类选择器分为
状态伪类选择器、结构性伪类选择器，状态伪类选择器形如a:link、a:visited、a:hover等这些与元素状态有关的选择器。结构性伪类选择器形如li:first-child、li:last-child等这些通过元素在DOM树形结构中的关系来选取元素的选择器。 -
组合选择器
以上的所有选择器都可以通过组合的形式来选取特定位置的元素，常见的组合形式有如下
颜色
常见的颜色格式有RGB和HSL两种，即对于颜色属性的值既可以使用形如#ffff19的六位十六进制的形式也可以使用rgb(74,155,104)和hsl(22,100%,50%)两种形式来指定颜色，其中RGB中的三个值分别代表红绿蓝三种颜色的亮度即通过三原色来调出其他颜色，HSL中的三个值分别代表颜色的色相、饱和度、亮度，色相(H)是色彩的基本属性如红色、黄色等，取值范围是0-360；饱和度(S)是指色彩的鲜艳程度，取值范围为0-100%，值越高越鲜艳；亮度(L)指颜色的明亮程度，取值范围是0-100%，值越高颜色越亮。
RGB取色想必大家都知道，那么既然有了RGB，为什么还需要个HSL呢？因为RGB通过不同亮度的三原色进行混合来取色，但是我们一般记不住哪些数值对应哪一个或哪一类颜色，所以这时候就需要使用HSL了，比如当需要为按钮设置颜色并在点击按钮时按钮颜色会有一些些的变化以标识点击了按钮，这时需要为两种状态设置颜色，此时使用HSL来调色就非常方便，只需保持HSL第一个值一致，稍微调整后面两个值即可得出两个颜色差别不大但又能看出变化的色彩。
还有一种取色方式就是将颜色属性值设置为颜色对应的英文单词，但是颜色英文单词不怎么能容易记得住，常用的就是白色(White)和黑色(Black)，所以除了这两种颜色外还是建议使用RGB和HSL来取色。
透明度(alpha)
使用八位十六进制（多出的两位即为不透明度）或者rgba()和hsla()来设置颜色的不透明度。（取值范围为0-1，越接近1不透明度越高）
字体
-
字体族
font-family属性用于指定文档所需字体族，通用的字体族有 Serif衬线体、Sans-Serif无衬线体、Cursive手写体、Monospace等宽字体等，一般为字体族属性设置多种字体类型以便在不同的设备上能够正常的显示页面的效果，当然除了这些通用的字体族以外还可以通过src属性使用url方法来使用其他网络字体（Web Fonts）。 -
字体大小
font-size属性用于指定元素字体大小可以通过关键字、长度单位、百分数来设置字体大小。- 关键字：small、medium、large
- 长度单位：px、em
- 百分数：相对于父元素的百分比大小
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 5em;
}
p {
font-size: 30%;
color：red;
}
</style>
</head>
<body>
<h1>
这是标题 1
<p>这是一个段落。</p>
</h1>
<h2>
这是标题 2
<p>这是另一个段落。</p>
</h2>
</body>
- 字重
font-weight属性用于指定字体的粗细，可以通过数值来指定也可以使用一些特定值来指定，使用数值指定时并不是所有字体都能一个数值对应一种粗细程度，要视所使用的字体类型而定，比如有的字体类型只支持两种粗细，所以无论值怎么设定也只能在这两种粗细之间转变而已。
调试CSS
浏览器打开文档页面后右键点击页面然后选择检查或者使用快捷键Ctrl+Shift+I（Windows下，Mac下为Cmd+Opt+I）打开开发者工具，在样式一栏便可以看到每个元素所设定的样式，可以在这个地方进行样式修改然后再返回代码编辑器中更改即可（VSCode中有相应的插件可以将浏览器开发者工具中对代码的修改自动同步到VSCode代码中，感兴趣的可以自行搜索）。
深入CSS(上)
还有许多的CSS属性和样式，我们可以通过MDN文档或者W3C规范进行学习。学习完CSS的一些基本知识后，接下来让我们学习一些CSS中比较重要且更加深入的东西。
选择器的特异度
选择器的特异度(Specificity) 用于解决当同一个元素被多个选择器选中且修改了同一属性时应该应用哪个选择器指定的样式在元素上的问题。
根据选择器的优先级及对应选择器个数来设置特异度，优先级越高的选择器个数越多时其特异度越高，个数相同时则比较下一优先级的选择器的个数，以此类推。如若最后比较结果一直相同则后出现的选择器被应用。
属性继承
元素的某些属性会自动继承父元素的计算值，除非显示指定一个值，比如color、font-size等属性。有些属性如box-sizing是不会自动继承父元素的计算值而是使用默认值（不指定的情况下），这时若需要让该属性继承父元素的计算值可以为该类属性设置值为inherit关键字以让其显示继承。
初始值
CSS中，每个属性都有一个初始值，例如background-color的初始值为transparent，margin-left的初始值为0。当我们想要设置某个属性值为初始值则可以设置为initial关键字来显示重置为初始值。
盒子模型
可以将元素视为一个盒子模型，这个“盒子”包括Content（内容）、padding（内边距）、border（边框）和margin（外边距）四部分。
-
width
- 指定 content box 宽度（视盒子模型而定）
- 可取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数为相对于容器（一般为父元素）的 content box 宽度
-
height
- 指定 content box 高度（视盒子模型而定）
- 可取值为长度、百分数、auto
- auto取值由内容计算而来
- 百分数为相对于容器（一般为父元素）的 content box 高度
- 容器有指定的高度时，百分数才生效
-
padding
- 指定元素四个方向的内边距
- 百分数为相对于容器（一般为父元素）的宽度
-
border
- 指定容器四个方向的边框样式、粗细和颜色
- 当只设定一个方向有边框且width和height值都为0时可以得到一个箭头图形（小技巧）
-
margin
- 指定元素四个方向的外边距
- 取值可以为长度、百分数、auto
- 百分数相对于容器的宽度
- 使用margin-left：auto和margin-right：auto可以将元素设置水平居中（小技巧）
元素默认的盒子模型为Content-box，即使用width和height属性设置宽高时，修改的是盒子中Content部分的宽高。若将盒子模型（属性box-sizing）设置为border-box则此时使用width和height属性设置宽高时，修改的是盒子中Content+padding+border一起的宽高值，开发中常用的都是这种盒子模型。
深入CSS(下)
块级和行级
块级盒子不和其他盒子并列摆放，所有盒模型属性都能够适用于块级盒子，而行级盒子是和其他行级盒子一起放在一行或拆开成多行的，盒模型中的width和height属性不适用于行级盒子。
块级元素（典型的代表为div）会生成块级盒子，行级元素会生成行级盒子且元素内容会分散在多个行级盒子中，可以通过设置元素的display属性来指定元素生成的盒模型，关键字
block对应块级盒子inline对应行级盒子inline-block对应可以设置宽高的行级盒子，且其内容作为一个整体不会被拆散成多行none排版时会完全被忽略
行级排版上下文
- 全称为
Inline Formatting Context（IFC） - 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则：
- 盒子在一行内水平摆放
- 一行放不下时换行显示
text-align决定一行内盒子的水平对齐方式vertical-align决定一个盒子在行内的垂直对齐方式- 避开浮动（float）元素
块级排版上下文
- 全称为
Block Formatting Context（BFC） - 某些容器会创建一个BFC：
- 根元素
- 开启了浮动、绝对定位、inline-block的元素
- Flex子项和Grid子项
- 属性
overflow值不是visible的块盒 - 设置
display：flow-root的元素
-
- BFC内的排版规则：
- 盒子从上到下摆放
- 垂直方向上两个元素间的
margin属性值会被合并 - BFC内盒子的
margin属性不会与盒子外面的margin属性值合并 - BFC不会和浮动元素重叠
- BFC内的排版规则：
布局
布局（Layout）是依据元素、容器、兄弟节点和内容等信息来计算确定内容的大小和位置的算法。常用的布局技术有FlexBox、Grid布局、浮动、定位等。
FlexBox
将元素的display属性设置为flex即可让元素变为弹性盒元素，在弹性盒中，可以控制子级盒子的摆放方向、摆放顺序、宽度高度、水平和垂直方向上的对齐方式以及是否允许折行。
在弹性盒中，子级盒子的排列方向称为主轴，垂直于主轴的方向称为侧轴，justify-content属性可以设置主轴方向上子级盒子的排列方式，有许多的可选关键字，如下图所示
align-items属性可以设置侧轴方向上子级盒子的排列方式，有许多的可选关键字，如下图所示
弹性盒之所以称为弹性盒是因为其可以通过设置属性来弹性利用盒内的空间，设置子项的弹性，当容器有剩余空间时会伸展；容器空间不足时会收缩。
flex-grow设置有剩余空间时子项的伸展能力flex-shrink设置容器空间不足时子项的收缩能力flex-basis没有伸展或者收缩时的基础长度
以上三个属性的值均为数值，数值越大所获得的伸展或收缩能力越强（即伸展或收缩的空间越大）
Grid布局
弹性盒是一维的流式布局，而Grid则是二维的网格布局。将元素的display属性设置为grid即可让元素生成一个块级的Grid容器，在Grid容器下使用grid-template相关属性可以将容器划分为网格并设置容器中的每一个子项占据哪些行和列。
将容器内的子项放入容器的网格中需要使用到grid line网格线来进行定位，通过为子项设置grid-area属性来将子项放置至容器对应的网格中，该属性的值为数值即网格线所对应的编号，如下所示
Grid布局方式看起来使用会稍微复杂一些，但在某些情况下其效率会比弹性盒高很多，想要用好Grid布局还得深入学习更多才行，建议到MDN文档或W3C规范上认真学习一遍。
浮动
在现如今的开发中，浮动很少用于布局了，起作用已经回归最初的设计中了即实现文字环绕图片的作用。
定位
设置元素的position属性即可让元素开启定位。其值有
static- 默认值，非定位元素
relative- 相对定位，相对自身原本位置偏移，不脱离文档流
- 流内其他元素当它没有偏移一样布局
absolute- 绝对定位，相对非static祖先元素定位
- 不会对流内元素布局造成影响
fixed- 相对于视口的绝对定位
- 常用于导航栏或者视口中位置固定不变的元素
对于开启了定位的元素都可以通过top、left、bottom、right属性来设置偏移长度。
总结
CSS的内容多而复杂，我们在学习过程中应该一步一步慢慢来，编写页面时的思路来学习，CSS中有很多的属性及对应的值，不是都能记得住，这时候就得多加练习，不会就去查文档，用的多了自然就会记住了，CSS学好了对于页面的编写会有很大的帮助的。
CSS的内容随着时代发展也在不断地更新迭代，我们只有坚持不断的学习才能跟上步伐。
书籍推荐
《CSS揭秘》
《CSS新世界》
第二次写文章，如有不足之处或者错误的地方请指正🙈
