走进前端技术栈并深入CSS P1 丨青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第2天，今天主要是学习CSS基础并进一步认识CSS。

---

CSS是啥？

• Cascading Style Sheets
• 用来定义页面元素的样式

可以设置字体和颜色；设置位置和大小；添加动画效果
复制代码

如何在页面中使用CSS？

• 外链（推荐使用）
• 嵌入
• 内连（不推荐）

CSS的工作模式

简单来说，就是把DOM树的每一个节点都解析出CSS属性样式，得到渲染树，最终渲染成最终要展示的页面

选择器

选择元素的多种方式

-   按照标签名、类名或id
-   按照属性
-   按照DOM树中的位置
复制代码

选择器有

-   通配选择器
-   标签选择器
-   id选择器
-   类选择器
-   属性选择器
复制代码

组合（Combinators）

颜色-RGB

颜色-HSL

选择器组

如何调试CSS?

            1、右键点击页面、选择【检查】
            2、使用快捷键
                      Ctrl+shift+I(windows)
                      Cmd+Opt+I(Mac)