理解CSS ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第2天

1. CSS是什么？

• Cascading Style Sheets（层叠样式表）的缩写
• 用来定义页面元素的样式，比如说：设置字体和颜色、设置位置和大小、添加动画效果等

CSS有以下几部分组成：

• 选择器Selector：用来选中页面中的元素，给这些元素定义样式
• 属性Property：设置元素相关的属性，颜色等
• 属性值Value：设置元素属性的具体值

{Property:Value} 组成了一个声明Declaration

2. 在页面中使用CSS的三种方式

• 外链：通过link标签引入到页面

• 嵌入：直接将样式代码嵌入到HTML标签中

• 内联：通过直接写入标签的style属性中来加样式，不用再写选择器了

（推荐使用第一种外链的方式使用CSS样式，做到内容和样式的分离）

3. CSS是如何工作的？

首先打开一个页面后，浏览器会加载页面的HTML，对其进行解析成DOM树结构，解析CSS时HTML语言会通过外链或嵌入或内联的方式使用到CSS，会把使用到的所有CSS样式进行加载和解析，把DOM树的每个节点都解析出来其所有的CSS属性样式是什么样的，从而得到一个渲染树渲染成完整页面。所以是有HTML和CSS单独解析的过程通过DOM树把解析出来的CSS样式附加到DOM树上，形成渲染树最终得到展示的页面。

4. 选择器 Selector

• 通配选择器：通用选择器就是选择全部元素，用 * 号表示

  * { color: red; }

• 标签选择器：用标签设置样式

  h1{}

• id选择器：选择id的值包含指定字符串的元素。语法为 # 符号加字符串，id值在页面中需要是唯一的

  #user { color: red; }

• 类选择器 (更常用)：选择class的值包含指定字符串的元素。语法为 . 符号加一个字符串。类选择器在一个HTML页面中可以被引用多次，id选择器只能引用一次

  .speical { color: red; }

• 属性选择器：用元素的属性作为条件来选中它。语法是一对或多对中括号来表示，一般会与类型选择器组合用。

  设置拥有class属性的h1元素字体颜色为红色

  h1[class] { color: red; }

  设置拥有class和name属性的h2元素字体颜色为红色

  h2[class][name] { color: red; }

• 伪类选择器：

  用来描述一个元素的特殊状态。比如第一个元素、某个元素的子元素、鼠标点击的元素等。伪类和伪元素有很明显的区分：伪类是筛选出元素的状态，位置等。伪元素是刷选出元素的一部分内容区域。

  状态性伪类：元素在和用户交互时可能会处于不同状态可以去设置不同状态下的特殊样式。

  结构性伪类：根据在DOM树中出现的位置决定是否选中该元素。

  可以通过组合的方式将各类选择器放在一块儿：直接组合、后代组合、亲子组合、兄弟选择器、相邻选择器

个人感悟与体会

学习CSS时会发现有很多细节需要特别注意，并且零碎的知识点要注重整理实践多练习，对于不断出现的CSS新特性要持续不断的学习！