前端入门学习笔记3

目标：给昨天纯HTML文档的简历添加样式。

今天简单的了解了一些CSS相关知识。

CSS：层叠样式表，指定HTML文档的样式及布局。由很多规则集组成，规则集由选择器和声明块组成。声明块则由声明组成，即属性和对应的属性值。选择器是一种模式，能在页面上匹配到一些元素，选择器有很多类型，例如简单选择器，属性选择器等等。

当浏览器显示文档时，必须将文档内容和样式结合。首先，浏览器将HTML和CSS文档转换为DOM（文档对象模型），然后再显示DOM内容。DOM是一种树形结构，标记语言中的每个元素，属性，文本内容都会成为树的节点。例如：

                        转换为DOM就是，，

创建DOM后，就会开始解析CSS，浏览器遍历CSS文档，通过选择器找到对应的元素，再将声明块中的各个声明应用到元素的文本内容上。（源自MDN,https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works）。

然后来讲讲选择器，目前只了解到简单选择器和属性选择器。

简单选择器分为：

1.元素选择器。通过最简单的元素名称来定位。例如p{color:red;}

2.类选择器。通过元素标签中class属性的属性值来定位，例如<p class="article">我是段落</p>,则类选择器为.article{color:red;}。值得一提的是，class属性可以拥有多个属性值，以空格间隔即可<p class="article first">我是段落</p>；不同的标签也可以拥有相同的class属性值。

3.ID选择器。通过元素标签中id属性的属性值来定位，例如<p id="article">我是段落</p>,则类选择器为#article{color:red;}。注意，id属性的属性值一定是唯一的，不同元素不能有相同id，所以id选择器很适合用在对单个元素设计样式。

4.通用选择器。给页面中所有元素应用相同的规则，一般不会使用。

属性选择器，通过属性和属性值来匹配元素：

1.存在和值（Presence and value）属性选择器。

2.子串值（Substring value）属性选择器。

最后，今天完成后的简历如下：

                               

为什么分开截图呢，是因为缩小后，布局就乱了，现在还不知道是为什么。

用外部样式表意味着在编写HTML文档时必须有一个大局观，提前预想相同样式的部分，将这些部分用统一的标签或者类型等来进行标注。