这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
什么是CSS
CSS中文被称为层叠样式表，是Cascading Style Sheets的缩写
主要作用就是用来定义页面元素的样式
具体来看就是
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
下图展示了一个简单的CSS样式
如何在页面中使用CSS
有三种方法
- 外链
- 内联
- 嵌入
其中最常用的还是外链，不过最近SSR方案的流行，有一种类似内联样式的Tailwind CSS比较热门，我还没有具体去学习，有时间可以去学一下。
CSS是如何工作的
浏览器首先会对HTML进行解析，生成对应的DOM树，同时加载CSS并进行解析，并将样式添加到对应的节点，最后在浏览器展示出来相应的页面。
CSS中的选择器
选择器的作用
找出页面元素，以便添加样式
常用的选择器
基本选择器
- 通配符选择器
- 类选择器
- ID选择器
- 元素选择器
- 属性选择器
分组选择器
选择器列表
伪选择器
- 伪类选择器
- 伪元素选择器
组合选择器
- 直接组合
- 后代组合
- 亲子组合
- 兄弟选择器
- 相邻选择器
调试CSS
右键点击网页选择检查
使用快捷键Ctrl+shift+i(Windows) Cmd+Opt+i(Mac)
CSS盒子模型
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：边框、外边距、内边距和实际内容。
网页布局：
- 准备网页元素，网页元素基本都是盒子
- 利用 CSS 设置好盒子样式，然后摆放到相应位置。
- 往盒子里放东西。
本质：利用 CSS 摆盒子。
CSS常用布局
flex流式布局
grid网格布局
小结
想要熟练掌握CSS，只能多看多写多练，多看看MDN文档以及W3C的CSS规范，同时发挥自己的创造力，保持一颗好奇的心，不断的持续学习CSS的最新特性。
