一、什么是CSS
作为前端三剑客之一的CSS是每个前端开发工程师必须掌握的技术，那么什么是CSS呢？
CSS全称 Cascading Style Sheets,是用来定义页面元素的技术。我们把HTML比作雏鸟身体的话，那么CSS就是我们的羽毛，是用来装饰我们的。
二、CSS如何使用
在我们的页面中如何使用CSS呢？
1.外链
<!-- 外链 --> <link rel="stylesheet" href="./style1.css">
在我们的title标签后面利用link标签引入即可
2.嵌入
<!-- 嵌入 --> <style> div { color: hsl(250,60%,60%); } </style>
利用style的标签直接在HTML结构里面书写
3.内联
<body> <!-- 内联 --> <div style="color: skyblue">青训我来啦</div> </body>
在html元素标签内写入
三、如何学习CSS
对于CSS学习，大致分为以下几点
1.CSS选择器
2.元素属性
3.布局方式
（一）CSS选择器
1.选择器的种类
2.CSS与选择器挂钩的三大属性
（1）选择器种类
1.通配符选择器
<style> * { list-style: none; font-size: 50px; } </style>
选中页面所有元素
2.id选择器
<style> #root { font-size: 25px; background-color: #ff1; } </style>
选中id名为root的标签
3.类选择器
<style> .container { width: 100px; height: 100px; } </style>
选择class属性为container的标签
4.伪类选择器
<style> .container:first-child { width: 50px; height: 50px; } .container:last-child { font-size: large; } .container:nth(2)-child { background-color: #ff3; } </style>
通过代码展示易知选择类名为container下的第几个子元素
类似的还有first-of-type伪类，大家下去参考文档便可
5.属性选择器
<style> [type='text']{ background-color: #ff8; border: 1px solid #333 } </style>
选择type属性为text的标签
6.标签选择器
<style> div { width: 1314px; height: 520px; } </style>
表示选择所有div标签
7.选择器的组合
使用组合选择器可以方便定位到我们要使用的标签上。
更多的选择器属性请大家参考(MDN Web Docs (mozilla.org))
(2)CSS与选择器挂钩的三大属性
1.CSS的层叠性
指多种CSS样式的叠加。
是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
原则：
1、样式冲突，遵循的原则是就近原则，即越靠近body标签，越会选择此属性
2、样式不冲突，不会层叠
<style> div { width: 1314px; height: 520px; font-size: 12px; } div { font-size: 28px; background-color: #dd5; } </style>
这里font-size会执行19px的覆盖了上面的，但是不冲突的属性不会层叠
2.CSS继承性
写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。
注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。
子元素可以继承父元素的样式（text-,font-，line-这些元素开头的都可以继承，以及color属性）
对于无法继承的属性我们可以通过为该属性添加Inherit，让它能够被继承。
<style> html { box-sizing: inherit; } </style>
3.CSS的优先级
选择器类型及权重：
选择器 权重
标签选择器 0001
class类选择器 0010
属性选择器 0010
伪类选择器 0010
伪元素选择器 0010
id选择器 00100
行内样式 1000
多个选择器 选择器权重之和
当元素用组合选择器时无可避免的会遇到优先级问题
前面的就近原则就是一种， 通过对权重的计算，可以让我们避免遇到权重问题导致的样式被层叠或者无法显示
（二）元素属性
常见的元素属性
1.颜色属性
2.字体属性
(1)颜色属性
1.表示颜色的方式
RGB 十六进制 HSL 颜色名称
对于十六进制和RGB，可以参考CodePen 加深对颜色属性的理解，找到适合的颜色值。
HSL的表示方法
HSL的三个数值也是据此定义的
<style> div { color: hsl(250,60%,60%); } </style>
2.alpha透明度
对于透明度的理解，请大家参考CodePen，自行尝试
（2）字体属性
1.font-family
对于字体选择有原则:
(1).字体列表最后写上通用列表
(2).英文字体放在中文字体前面
2.sapce-white
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
(三).布局方式
1.布局技术
2.IFC和BFC
（1）布局技术
1.盒子模型
重要分析盒子模型
2.Flexbox
通过flex布局让我们对整个页面的划分更加清晰
1.通过flex-direction对主轴方向进行调整
2.通过justfiy-content对子元素进行特定的排版
3.通过align-items调整侧轴方向
4.通过align-self调整某个子元素自己的排版
5.给子元素指定order值 调整前后顺序
6.flex其他属性
（二）IFC和BFC
什么是IFC和BFC呢？
对于BFC的排版规则如下有：
1.盒子从上到下摆放
2.垂直margin合并
3.BFC内盒子不会和外面的合并
4.BFC不会和浮动元素重叠
总结
有些CSS新特性进入青训营学习时第一次接触到，比如(inherit显示继承)，希望大家保持心态，一起加油!
