4.1 为什么需要CSS
如前所述，网站的目标之一是吸引用户访问网站上的内容，而这需要网站的设计人员通过视觉设计手段，不断吸引用户的眼球，并帮助他们方便快捷地找到感兴趣的内容。
Web刚兴起的时候，网站的设计人员只能利用HTML控制网页中文本和其他元素的显示，具体做法是给HTML标签定义大量的属性，利用Photoshop设计页面，然后通过切图将整个页面切成很多小块，最后使用表格标签对这些小块实现合理的布局。由于向HTML标签直接添加样式属性的做法无法实现代码的复用性，导致大量冗余代码。Photoshop切图则带来了大量额外的图片负担，导致网站的下载速度变得异常缓慢，这显然背离了网站的快捷性原则。
为了解决这个问题，人们便想到采用分层的思想，让HTML专门负责网页内容的组织，即控制结构层；而CSS则负责网页的外观，即表示层。因此，HTML和CSS共同构成了Web开发的必备技能。
4.1.1 什么是CSS
CSS（Cascading Style Sheets，层叠样式表），是一种样式语言，用于修饰HTML设计的元素，从而告诉浏览器如何将这些元素精美地显示在网页中。
为了更好地理解CSS的准确含义，让我们按字面意思从后往前看。首先，一个网页的外观控制需要定义一系列的样式规则，这些规则组成了一个样式表。其次，由于元素的嵌套关系会带来样式的继承或直接为一个元素规定多种样式，导致一个元素通常会受到外层样式规则的影响，这时就形成了在显示层级、显示顺序和显示优先级方面的层叠关系，最终浏览器只选择其中一种样式显示元素。至此，CSS的名字便一目了然了，不过，为了便于记忆，你可以简称它为CSS或样式即可。
4.1.2 CSS的工作原理
CSS的本质就是定义元素的样式规则，告诉浏览器如何在网页中显示元素；比如，将标题颜色设置为红色。那么HTML、CSS和浏览器到底要怎么配合才能实现这个过程？我们已经知道各类浏览器都必须遵守W3C的约定，才能做到正确地解析HTML的各类标签，那么对于CSS它又该如何解释呢？其实，浏览器首先要解析HTML，并且创建一棵DOM树，然后下载并解析CSS，目的是找到元素的样式定义。这样，HTML和CSS结合便能够画出一棵文档对象模型树（简称DOM树），这里的DOM其实是计算机上存储的一个文档，它保存了文档内容和样式的逻辑关系，浏览器最终根据DOM树绘制并显示网页的元素，主要过程如图4.1所示。
图4.1
为了理解DOM树，我们来简单看一段添加了CSS样式的代码片段，如下：
它对应的DOM树为图4.2。
图4.2
其中，每一个不同的形状都是一个节点，节点的类型采用不同的形状表示。需要说明的是，这里我们只绘制了一棵DOM树，但如果CSS样式是被定义在一个独立的外部文件中，那么真实的DOM树会是两棵，一棵是HTML对应的DOM树，一棵是CSS对应的DOM树。之所以CSS文档也会解析成树的结构，是方便于浏览器去检查顶部的通用规则，比如应用于body的样式，然后再逐级向下找到某一个精确元素的样式，如果发现有重复定义的样式，则越靠后的样式定义会覆盖之前的样式，所以就有了层叠样式的由来。
什么是DOM树？
DOM树实际上是对文档的一种逻辑结构抽象，人们想象着HTML元素和CSS样式的层级结构就像一棵树根被倒置过来，有树根＜document＞、无数树枝（＜html＞、＜head＞、＜body＞）以及叶子组成等，而每一个树枝和叶子都叫作一个节点，于是，文档中的所有代码在计算机中采用树的数据结构进行存储。这里节点可以是一个元素，一个属性，甚至是一段文本等。关于文档中的层级关系，是通过树枝与叶子节点之间的关系来实现的，因此会出现一些父亲节点，另一些是儿子节点，拥有同一个父亲的节点则是兄弟关系。
4.1.3 CSS带来了哪些变化
网页中有无CSS还是区别很大的，请你仔细对比图4.3（无CSS）和图4.4（有CSS），看看两者的区别。简单来说，HTML只提供了网页的框架结构和内容，样式则是对内容的修饰，包括文字的颜色变化、内容的布局、列表的图标设置等，总之有了CSS，你的HTML页面才会变得更出众。
我们来看一下，加入CSS之后，原来的HTML页面到底发生了哪些变化？
图4.3
图4.4
（1）页面上方的导航文字的大小和颜色发生了变化，导航文字由原来的纵向排列，变为横向布局，并且导航之间还存在一定的距离。
（2）为了分割不同的内容板块，添加了分割线，有实线也有虚线。
（3）每一个问答块以一个整体的布局展示，与问答相关的话题名称和标签内容以及日期都聚集显示在一个块中，呈现出合理的布局形式。
我们来总结一下CSS在网页中的作用：
（1）规定元素的基本样式，比如字体颜色、图片大小、背景图片和视频的表现等；
（2）设计元素的布局方式，比如横向布局、元素之间的间距设置等；
（3）控制元素的动态变化，比如变形、过渡和动画等。