认识前端--CSS(一)

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

什么是CSS？它用于什么？

据MDN文档介绍，CSS(Cascading Style Sheets)，层叠样式表，是一种样式语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。

样式可以通过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。

简洁地说，CSS它是可以用来定义页面元素的样式，包括

• 设置字体及其颜色
• 设置位置和大小
• 添加动画效果

在页面中使用一般有三种方式：

<!-- 外联 -->
<link rel="stylesheet" href="./style.css">
​
<!-- 嵌入 -->
<script>
    <style>
        li {
            margin:0;
            list-style:none;
        }
    </style>
</script>
<!-- 内联 -->
<p style="margin:1px 0;">Example Content</p>

CSS的语法

CSS 是一种基于规则的语言，我们可以通过指定样式组来定义规则，这些样式组应用于网页上的元素或元素组。

h1 {
    color: blue;
    font-size: 14px;
}

上述css语句表示规则如下：

• 以选择器h1来进行应用，选择h1元素
• 有一对花括号{}
• 花括号里面是一个或多个属性与值的配对，例如上述是color属性配对blue值，font-size属性配对14px值

CSS是如何工作的？

我们知道，把一个URL变成一个屏幕上显示的网页，经过的过程简化来说：

1. 浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面；
2. 把请求回来的 HTML 代码通过状态机进行词法分析等解析工作，构建成 DOM 树(常见可以用栈来实现)；
3. 计算 DOM 树上的 CSS 属性；
4. 最后根据 CSS 属性对元素逐个进行渲染，得到内存中的位图；
5. 一个可选的步骤是对位图进行合成，这会极大地提高后续绘制效率；
6. 合成之后，再绘制到界面上。

注意点： 从 HTTP 请求回来后进行后续的 DOM 树构建、CSS 计算、渲染、合成、绘制等过程，都是尽可能地流式处理前一步的产出：即不需要等到上一步骤完全结束，就可以开始处理上一步的输出，这样我们在浏览网页时，才会看到逐步出现的页面。