css复习 1 (css添加，语法，dom与渲染)

css是层叠样式表，就是去丰富网页的样式。

1.如何把css样式表添加到html网页当中呢？

用link标签进行连接。
首先，建立一个styles.css文件
其次，在html文件中的head标签中添加以下代码块

<link rel="stylesheet" href="styles.css">

这样html和css文件就相互链接起来了

**

2.css样式表内写什么？怎么写？

用元素选择器。
例如，想要把一个段落的文字改变一下颜色

p {
  color: green;
}

也可以一次性选择多个标签，用逗号隔开
**
类的选择器，是html中各种标签里面的class属性。
在样式表中如果要引用class属性里面的值，只需要在属性值前面加上个.即可，同时也可以标签.class属性值来特别指定

同时也可以根据标签的状态来确定样式，元素组合的样式等

3.css是怎么工作的？

1.浏览器载入HTML文件。
2.将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式,转化成组块化的形式。
3.接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理。
4.浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
5.上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
6.网页展示在屏幕上（这一步被称为着色）。

基本上就是先拉取html的网页，再用dom组块化，随后用css样式分门别类的渲染，最后渲染到网页上。

3.1什么是Dom？

MDN上的定义：一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM或DOM node）。节点由节点本身和其他DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。

自我理解：就是把html中的布局转化为树形结构，以便后续对网页的样式进行操作或者增加监听事件等等这类的操作。

3.2什么是渲染

渲染引用的是美术的概念。
从画画的角度来看，html网页是用铅笔打了个草图，css就是表明这边用什么颜色，或者调整一下边距，线条之类的。渲染就是上色，让画面出现效果。