这是我参与「第五届青训营 」伴学笔记创作活动的第 2天
一、本堂课重点内容：
本节课全程在学习CSS的基础语法、使用方式与工作原理，CSS作为前端三件套一员，作用在于设计页面元素及样式，起学习的引导作用。
二、详细知识点介绍：
- CSS(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css，通过使用 CSS 我们可以大大提升网页开发的工作效率，以下为css的工作原理。
- 如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
- 若在 1 中，id 选择器有 1个（#nav），类与伪类共有 2个（.list 与 :link）,元素与伪元素共有 2个（li 与 a）。所以在 1 中的特异度为 122。在 2 中，id 选择器有 0个，类与伪类共有 2个（.hd 与 .links）,元素与伪元素共有 2个（ul 与 a）。所以在 2 中的特异度为 22。因为，在 1 中的特异度为 122 大于在 2 中的特异度为 22，所以，在 2 中的选择器的优先级更高。
我们能够借助这一特性实现代码的重复利用：
<button class="btn">普通按钮 </button>
<button class="btn primary">主要按钮 </button>
<style>
.btn {
display: inline-block;
padding: .36em .8em;
margin-right: .5em;
line-height: 1.5;
text-align: center;
cursor: pointer;
border-radius: .3em;
border: none;
background: #e6e6e6;
color: #333;
}
.btn .primary {
color: #fff;
background: #218de6;
}
</style>
- 网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
其中头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo，菜单导航条包含了一些链接，可以引导用户浏览其他页面，内容区域一般需要区分手机端、pc端与平板端。下面是一小段尝试编写的布局：
.column {
float: left; width: 33.33%;
}
.row:after {
content: "";
display: table; clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
下为结合html的运行结果
- 颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合，CSS中定义颜色使用十六进制（hex）表示法为红，绿，蓝的颜色值结合。可以是最低值是0（十六进制00）到最高值是255（十六进制FF）
3个双位数字的十六进制值写法，以＃符号开始。
三、课后个人总结：
本节课主要学习了选择器的优先级、继承与布局、颜色的知识，因为时间关系没有把三节课上完，等后期上完以后再来完善此笔记。
四、引用参考：’
参考了cdsn、菜鸟教程
