这是我参与「第四届青训营 」笔记创作活动的的第2天
本堂课重点内容：
- CSS基本概念，选择器，基本样式
- CSS的继承，求值过程，5种布局
详细知识点介绍：
什么是CSS？
CSS，即层叠样式表，用来定义网页的风格和样式，通过CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。如果把HTML比作一个人，那么CSS就是这个人所穿的衣服。
CSS工作原理
浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）
如何引用CSS？
- 外链式
- 嵌入式
- 内联式
如何给指定标签添加CSS？
CSS选择器
- 通配选择器
- 标签选择器
- 类选择器
- id选择器
- 属性选择器
- 伪类选择器
- 结构性伪类
- 状态性伪类
组合选择器
选择器优先级
- 每个选择器都有权重值，标签的样式由权重值最大的选择器决定：
- 内联CSS的权值最高，为1000
- id选择器权值为100
- 类，伪类，属性选择器权值为10
- 标签选择器权值为1
- 通配选择器权值为0
- 如果权值相等，样式由后运行的选择器决定
- 在同一组属性中有!important规则的优先级最大。
CSS基本样式
颜色
RGB
color:#6c6f6a //每两位十六进制数依次表示Red,Green,Blue
color:rgb(106,111,106)
HSL
透明度
字体
- font-family
- font-size
- line-height（行高，单位为字体大小的倍数）
- font
文本
- text-align：left,center,right,justify
- spacing(行内距):letter-spacing,word-spacing
- text-indent(缩进)
- text-decoration(划线):none，underline，line-through，overline
- white-space(空白符):normal,nowrap,pre,pre-wrap,pre-line
CSS继承
某些属性会自动继承父类的值，除非显示地声明一个值
常见可继承属性
1、字体系列属性
font、font-size、font-family、font-style、font-variant、font-stretch、font-size-adjust
2、文本系列属性
text-algin、text-indent、line-height、word-spacing、letter-spacing、text-transform、color、direction
3、可见属性
visiblility
4、表格布局属性
caption-side、border-callapse、border-spacing、empty-cells、table-layout
5、列表属性
list-style-type、list-style-image、list-style-position、list-style
常见不可继承属性
1、显示隐藏属性
display
2、盒模型属性
widht，height， padding，margin
3、背景属性
background-color，background-image，background-position，background-size，repeat
4、文本属性
vertical-align、text-decoration、white-space
5、定位属性
float、chear、top、right、bottom、min-、max-
6、生成内容属性
content、content-reset、content-increment
CSS求值过程
CSS布局
布局是指通过设置CSS的属性值来确定内容的大小和位置
基本属性
- margin
- border
- padding
- height
- weight
- box-sizing: border-box，content-box
- overflow(溢出处理）
基本属性
常规流
flex box
容器属性
flex-direction(主轴方向): row | row-reverse | column | column-reverse
flex-wrap(换行): nowrap | wrap | wrap-reverse
justify-content（主轴对齐方式）: flex-start | flex-end | center | space-between | space-around
align-items（交叉轴对齐方式）: flex-start | flex-end | center | baseline | stretch
align-content: flex-start | flex-end | center | space-between | space-around | stretch
课后个人总结：
通过这节课的学习，我了解了CSS的基本用法，工作原理，基础的颜色，字体，文本等样式，学会了通过选择器去给不同的内容定制相符的样式，学会了基本的布局方式，特别是flex布局和Grid布局，感受到和传统布局的不同的独到之处，希望以后可以在课程中学习了解更多更新关于前端的知识。
