这是我参与「第四届青训营」笔记创作活动的的第2天
前言
小宝宝之前学完了HTML基础操作，直呼简单，因此他接下来打算前端三件套的第二个：CSS！众所周知，我们用HTML可以规定网页中出现的内容，但是目前我们敲出来的代码展现出来的网页都比较丑，这个时候我们就可以用CSS来进行页面的美化了。
第一条CSS语句
CSS，是层叠样式表（Cascading Style Sheets）的缩写。那么顾名思义，它规定了很多的样式。一条典型的CSS语句长这样：
h1{
color: pink;
size: 15em;
}
我们从上往下看：
首先h1是选择器（selector），也就是说下面的这些样式是应用在所有的h1标签上的。
其次是下面的color和size，这两个就是属性了。顾名思义我们这里规定的是所有h1标签的颜色和大小。冒号后面的pink和15em就是这两个属性的值了。
一个属性和对应的属性值可以成为一条声明。比如上面代码片段的color: pink就是一句声明。
现在我们写好了一个CSS语句，我们应该怎么样使用它呢？目前来说常用的使用方法有三种。
第一种是外链使用。我们将刚才的语句另存为style.css，然后在网页中这样写：
<!-- 外链方式使用CSS-->
<link rel="stylesheet" href="style.css">
我们可以看到上一行的那个用<!-- -->包起来的标签，那就是HTML的注释。
第二种就是嵌入使用，我们需要新建一个叫做style的非空元素，里面塞入你的css代码：
<style>
h1{
color: pink;
size: 15em;
}
</style>
最后一种就是内联使用，我们在具体使用某一个元素的时候，在这个元素的标签中定义它的样式：
<h1 style=" color: pink; size: 15em; " >title</h1>
三种方式都能达到同样的效果：
CSS的工作原理
还记得上一篇文章中讲的DOM树吗？我们在打开一个网页的过程中，首先会加载HTML，然后解析HTML，在解析的同时加载并解析CSS，等HTML解析好并创建了DOM树之后，浏览器就会把CSS中的样式添加到对应的DOM树节点。具体的流程图就像这样：
（图源HTML之CSS层叠样式表_松鼠MaSaKi的博客-CSDN博客）
前几篇介绍的肯定还是简简单单的东西，所以这里依旧不深入讲解渲染工作的流程。
选择器
选择器，顾名思义就是选择页面中的元素。有的时候我们需要给特定的元素展示特定的样式，这个时候，灵活的使用选择器就变得非常重要。接下来我们就看看常用的选择器到底有哪些。
通配选择器
我们直接用*，代表所有的元素，表示页面上所有的元素全部加载这个样式表（由于CSS是解释型语言并且会尽量减少无法运行的情况发生，所以即使某些元素没有我们写的样式表中的属性也不会导致网页无法打开）。
<h1> title</h1>
<p>text</p>
<style>
*{
color: pink;
size: 15em;
}
</style>
这里的p标签代表一个段落，虽然添加不是必须的，但是为了页面的模块化和观感，还是建议大家加上。
此时效果就是这样的：
标签选择器
这个就是我们在上一节的那种代码，就是选择某个特定的标签，对这个标签的所有元素进行样式的设置，这里就不再赘述了。
ID选择器
这个选择器和上一个相比就精准了许多捏。我们可以给每一个标签都设定一个字符串作为id，然后把选择器改成#加上指定的id，就可以让对应的id使用这个样式表了，注意一个id只能被一个元素拥有。
<h1 id="certainid"> title</h1>
<h1>title</h1>
<style>
#certainid{
color: pink;
size: 15em;
}
</style>
使用效果就长这样：
类选择器
和上一个ID选择器类似，把id换成class，把#换成.，就可以实现类选择器。你可能会问：那既然和上一个没有区别，那么为什么还需要类选择器呢？我全部用ID选择器不就可以了吗？当然是有区别的。区别就在于id只能出现一次，而class是可以出现多次的。所以我们可以基于这个特性给某一个特定类别的元素添加特定的样式。
<h1 class="certainclass"> title</h1>
<h1>title</h1>
<style>
.certainclass{
color: pink;
size: 15em;
}
</style>
我们会发现使用效果和上一个是一样的。
属性选择器
有的时候我们想只对某些特定属性有特定值的元素使用样式表，比如我们希望所有的密码输入框变成红色而其他类型的输入框不受影响，我们就可以使用一个属性选择器。
<input type="password">
<br>
<input type="text">
<style>
input[type = "password"]{
color: pink;
size: 15em;
}
</style>
那么这个选择器的意思就是我们只对type属性为password的input标签使用样式表。运行后可以发现确实只有密码框中输入的文字为粉色。
当然了我们除了使用=之外，还可以使用^=来找某属性值的开头匹配，或者使用$=来寻找某属性值的结尾匹配，这点还是比较实用的，感兴趣的小宝宝可以自己试一试。
伪类选择器
为什么叫伪类选择器呢？这是因为这种选择器不会去选择某些特定的元素，而是会在某些元素处于某种状态的时候来进行样式表的渲染。比如我们可以让某个链接在被访问之前、被访问之后和鼠标移到连接上时都拥有不同的样式，我们就可以这样写。
<a href="https://juejin.cn">掘金社区官网</a>
<style>
/*当链接已经被访问过*/
a:visited{
color: aqua;
}
/*当鼠标移到链接上时*/
a:hover{
color: coral;
}
/*当链接没有被访问过的时候*/
a:link{
color: pink;
}
</style>
可以注意到上面用/* */括起来的部分就是CSS的注释，和HTML的注释格式是不一样的哦。
因为我们在上一篇文章中已经访问过掘金社区官网了，因此我们目前的链接变成了青色。当你的鼠标移动上去的时候链接就会变成珊瑚色。
伪类选择器其实有特别多，不光可以对应状态，还可以对应很多的特殊位置，比如各种列表的first-child和last-child，就代表了列表的第一个元素和最后一个元素，这个就比你再用id去弄更加的方便快捷了。大家可以自己写一写试一下。
选择器的组合
假设现在我们有一个标题和一个段落，它们都属于类cls，我们现在想让标题和段落的字号全部改变，而只想改变标题的颜色，我们应该怎么办？一个自然而然的想法是设计一个需要同时匹配h1和.cls的匹配器。这就是选择器的组合。我们直接创建一个新的h1.cls选择器就可以完成这项任务。
<h1 class="cls">Title</h1>
<p class="cls">text</p>
<style>
h1.cls{
color: aqua;
}
.cls{
size: 20px;
}
</style>
除了刚才的那种组合，我们还有很多其他的组合，具体的组合类型可以参考CSS 组合选择符 | 菜鸟教程 (runoob.com)。
部分文字基础CSS属性
我们先学习一些基础的CSS文字属性，来大概了解这些属性都是干什么用的。
首先是color属性，就是颜色啦，我们既可以用RGB值，也可以用HSL，还可以用css标准里写好的一些单词来代表颜色。
还有字体的设置，这是通过font-famliy属性来设置的，不过我们通常来说设置的不是字体而是字体族，设置了多个属性中间用逗号分隔，当你的设备不存在前面的字体时，它就会调用后面的字体。如果你不放心的话，还可以使用通用字体族（比如无衬线字体Sans-Serif），来保证所有页面上都可以看到相同的字体。
还可以用Web Fonts，即从链接位置获取字体来使用。我们只需要使用@font-face规则（关于规则是什么之后再讲），规定好他的font-family和src属性，就可以使用了，既可以使用本地字体也可以使用网络上的字体。
字体的大小使用font-size属性来进行调整。我们既可以用不同的单位（px、em或%），也可以使用标准中提供的关键字（如large）等；我们还可以调整字体的属性，使用font-style来进行调整（只要字体支持），可以使用normal的常规模式，也可以使用italic的斜体模式，不过一般用的不是很多；字体的粗细我们用font-weight来进行调整，通常采用的值是，数值越大字体越粗，不过还是需要字体支持。
总结
这部分属于是CSS的基础知识，我们在下一篇文章中会讲一些CSS的进阶用法，学完了这些我们就可以写自己喜欢的CSS样式了捏。