CSS中的颜色其实很简单，不信你看

如果你已经看到了这儿，说明你已经掌握了 CSS 的选择器。学习选择器确实是一个很枯燥乏味的事情，又要记住数量庞大的选择器，还有它们的用法以及使用的时候需要注意的地方。

接下来，咱们来讲一讲一个比较有趣的内容 - 颜色。CSS 里面有关颜色属性只有两个，一个是用来设置字体颜色的 color 属性，咱们一般把它称为前景色；一个是用来设置背景颜色的 background-color 属性，咱们一般把它称为背景色。

咱们先来说一说 color 前景色吧。

前景色

虽然咱们把 color 属性称为前景色，但实际上这个属性只是用来设置字体颜色的。所以呢，这个属性其实应该叫做 text-color 才更准确一些。当然了，你可别误会，人家就叫 color。

比如咱们先在 HTML 页面里面编写个 <p> 元素：

<p>这是一个段落内容.</p>

然后，咱们为这个 <p> 元素的文本内容设置字体颜色吧，就像这样：

p {
	color: lightcoral;
}

这样 <p> 元素里面的文本内容的字体颜色就变成了咱们设置的颜色。

是不是很简单呢？！是的，设置字体颜色就是这么简单。其实，页面开发本来也不算是什么难事儿！但是，在这儿还真有个事儿要和你说一说，因为很值得注意。就是如果咱们在一个 HTML 元素包含另一个 HTML 元素时，就像这样：

<div class="container">
	<p>这是一个段落内容.</p>
</div>

然后，咱们只是为 <div> 元素设置了 color 属性，而没有为 <p> 元素设置 color 属性，可是运行 HTML 页面之后，你会发现 <p> 元素里面的文本内容的字体颜色会是 <div> 元素所设置 color 属性的值。比如像这样来做：

div {
	color: lightcoral;
}

这样设置之后，再运行 HTML 页面，<p> 元素里面的文本内容依旧是带有颜色的。

为什么会这个样子呢？这个现象如果咱们用 CSS 语法结构来解决，这是因为 CSS 中的样式属性有一部分是具有继承性的。刚好 color 属性就是具有继承性的，所以才会这样。为啥具有继承性就会这样呢？所谓的继承性，就是说如果你给父级容器元素设置了字体颜色，也就是 color 属性，而且子级元素没有设置字体颜色的话，那子级元素里面的文本内容显示的字体颜色就是父级元素设置的字体颜色。

这话说得有一点点绕，不过确实是这么回事儿！希望你能反复看几遍，直到整明白我要说的是啥才好！

关于 CSS 的继承性咱们会在第十四章节中详细来介绍，所以啊，别急了，先搞定现在的东西吧！

背景色

好了，前景色咱们整明白是咋回事儿了，接下来，再来看看背景色又是怎么一回事儿吧！

如果咱们创建一个 HTML 页面，并且编写一些 HTML 元素，运行这样的一个页面之后，你会发现这个 HTML 页面背景是白色的。就像这样：

为什么会这样呢？这样因为浏览器窗口默认是白色的，而 HTML 元素的背景颜色默认其实是透明度。所以，咱们看到每个元素的文本内容的背景颜色也是白色的。但这可不是因为 HTML 元素的默认背景颜色是白色的，你可要记住了！background-color 这个属性的默认值是 transparent，就是表示透明的意思。

接下来，咱们给 <h1> 元素来设置背景颜色，就像这样：

h1 {
	background-color: lightcoral;
}

这样的话，<h1> 元素里面的文本内容的背景颜色就会显示成咱们设置的颜色。

是不是感觉也很简单呢？！是的，其实真的很简单。