这是我参与「第五届青训营」伴学笔记创作活动的第 2 天
一、本堂课重点内容：
本堂课讲述了的CSS代码构成、使用方法以及CSS的流程之选择器组、文本渲染和如何调试 CSS。
二、详细知识点介绍：
CSS代码构成
CSS即Cascading Style Sheets，h1 {color: white;}这一段简单的代码就是CSS的代码，由它我们可以看出来CSS由选择器、属性、值这三个部分构成。在这段代码中，h1即为选择器，意思是选择html中标签为h1的元素，而color即为属性，代表了h1字体的颜色，而white则是属性对应的值，为白色。这段代码的意思就是选择html中的h1元素，另这个元素中的字体颜色为白色。
CSS使用方法
CSS在页面中有三种使用方法，分别是外链式、嵌入式和内联式。其中外链式就是将CSS放在单独的文件中，使用link标签将文件引入；嵌入式就是直接在html（style标签）的标签里写样式代码；内联式直接对当前元素写样式，不需要选择器。
CSS的流程之选择器组、文本渲染
在加载了HTML文件后进行解析，加载CSS然后进行解析，在创造DOM树后，为DOM树上的每个元素添加它们对应的样式，渲染后展示出页面。
如何调试 CSS
将代码运行至浏览器后，右键点击检查或者使用快捷键Ctrl+Shift+I或者按F12可以查看HTML和CSS代码，获取元素可以进行样式的调试。
三、实践练习例子：
不同选择器的使用：
p {
font-size: large;
}
#id {
color: aqua;
}
.class {
color: red;
}
<p>标签选择器</p>
<p id="id">id选择器</p>
<p class="class">类选择器</p>
四、课后个人总结：
CSS是一种能够为结构化文档添加样式的语言，它可以被玩出许多的花样来。熟练地掌握CSS可以帮助我们快速地给页面布局和增添样式，当我们接触到一个页面的时候，我们最先有印象的一定是页面的样式是什么样的，一个好的样式可以给用户带来良好的使用体验。并且CSS也可以代替JS来实现一些功能，能够更简单地做到一些效果相同的事情。如果CSS没写好，可能会导致在不同终端、不同浏览器显示的效果差异大而影响到体验的事情。因此，学好CSS还是很有必要的。
