前端学习笔记（二）

1、什么是CSS，CSS是如何工作的？
学习链接：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works
css(层叠样式表）
当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息。
下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。
（1）浏览器载入HTML文件（比如从网络上获取）。
（2）将HTML文件转化成一个DOM（Document Object Model）。
（3）接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式等。
（4）浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
（5）上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
（6) 网页展示在屏幕上（这一步被称为着色）。
2、CSS的基本语法是怎样的？
学习链接：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured
（1）属性和值；
（2）函数如width: calc(90% - 30px);
（3）@规则如@media；
（4）速记属性（允许在一行中设置多个属性值）如 font, background, padding, border, 和margin等；
（5）注释；
（6）忽略空白（实际空格、制表符和新行）；
3、CSS选择器是什么概念，简单选择器和属性选择器是什么？
选择器学习链接：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors
CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
简单选择器：
学习链接：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors
（1）类型选择器（标签名/元素选择器）如：span、strong、div；
（2）全局选择器；
（3）类选择器 .+类名;
（4）id选择器 #+id;
*属性选择器：**
学习链接：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
（1）存否和值选择器；
（2）子字符串匹配选择器；
4、文本样式都有哪些相关属性，对应哪些值？
学习链接：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Fundamentals
（1）text-align属性用来控制文本如何和它所在的内容盒子对齐。
值：left、right、center、justify(两端对齐)、inherit(从父元素继承)
（2）line-height属性设置文本每行之间的高(如果值无单位的话，line-height = 值*font-size),推荐行高为1.5-2（双倍行距）。
（3）letter-spacing(字母和字母之间的距离)和word-spacing(单词和单词之间的距离)。