HTML+CSS编写静态网站-20 CSS颜色属性详解

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

我们已经了解了CSS中几种不同类型的属性，但我们还没有真正讨论过颜色属性。到目前为止，我们只使用了红色和蓝色的颜色的关键字。

使用CSS定义颜色有几种不同的方法，我们以前介绍的是关键字的方法。现在，我们要学习十六进制颜色的表示方法。听起来是不是很复杂。所以，让我们慢慢地来讲解。

十六进制是一个以16为一个循环的编号系统，而不是我们通常使用的以10为一个循环编号系统。在我们从零数到九之后，我们用完了所有的传统的数字，那么，十六进制就会用到字母。 A，B，C，D，E和F，它们将通过这种单个字符代表数字10到15。

在我们正常的十进制中，我们组合两个数字，从零到九，那么，这两个数字能表示的范围是0到99.我们得到总共100个可能的数字，

现在如果我们以相同的方式将两个十六进制值组合在一起，我们可以创建256个值而不是100个值。这是因为每个数字都是16位数，16乘以16是256.

当我们写十六进制颜色时，有红绿蓝三种基础色，这使得我们可以通过三种颜色组合成电脑屏幕上的任何颜色。这三种颜色中的每一种由两个十六进制数字组成。所以，总共六个十六进制数字组成。前两个数字是红色的，中间两个是绿色的，最后两个是蓝色的。

例如，所有6个0将是纯黑色，6个8将是纯灰色。

所以，这就是我们的十六进制颜色的知识，让我们尝试一个例子。

在这里，我要选择一个a元素。实际上这将应用到我们页面上的所有a元素。然后，使用color属性，我将应用一个十六进制值6ab47b。

 
 
a{

       color:#6ab47b;

}
这样，我的网站上的所有链接都是绿色的。你也可以选择你喜欢的颜色。

然后，我们再创建header选择器，并添加两个新的声明。我们将使用background属性，它的值我也使用相同的颜色。

然后我要添加一个边界颜色，这是一个我们以前没有见过的属性。我要在这里添加一个新的颜色，这是599A68：

 
 
header {

       background:#6ab47b;

       border-color:#599a68;

}
保存页面，刷新。正如你所看到的，我们的header背景现在是绿色的。但是它和我们的链接的颜色是一样的，所以标题的链接就消失了，我们还注意到边界不是很明显

现在，让我们继续修正这些标题的颜色。为了做到这一点，我将在这里使用一个新的选择器h1 h2。我们要把颜色设置为白色。

 
 
h1, h2{

       color:#fff;

}
现在，让我们来看看这个语法，因为我在这里用了两个新概念。首先，我们应用了同样的风格规则到我们的h1和h2元素中。两个元素之间的逗号将在这里把h1和h2分成两个独立的选择器。这实际上是分离选择器。所以，这里声明的样式将同时应用到h1和h2。

第二，我在这里使用了一些十六进制的简写。我只用了三位数字，而不是正常的六位数。在这种情况下，每个数字将用作每种颜色的两个数字。换句话说，这相当于6个f。

实际上这里只是简写了，正常的写法是这样：

 
 
h1{

       color:#ffffff;

}

h2{

       color:#ffffff;

}
现在，让我们继续保存，切换到浏览器。然后刷新：

你可以看到，我们现在有我们的标题就变成白色了。

但是，我们的导航仍然不可见。所以，我想要导航在移动设备上有一个稍深的绿色背景，类似于我们之前使用的边框颜色。所以，我们需要选择我们的nav元素，我们会说background，然后复制粘贴我们边框的颜色，并以分号结束。

 
 
nav{

       background:#599a68;

}
所以让我们继续，保存，切换回浏览器并刷新。

正如你可以看到，导航一栏有一个稍深的背景，但我们的导航链接仍然不是很明显。所以我们想把它们改为白色，使它们更加明显。

所以为了做到这一点，让我们创建另一个选择器。这将选择我们nav中的a元素。我们要把颜色再次设置为白色，就像这样。然而，我们希望这些颜色始终保持白色，即使网站访问者已经点击过他们。要做到这一点，我们将创建一个被访问的a选择器，所以我们将再次选择a元素。然后冒号，然后我要输入：visited。

 
 
nav a, nav a:visited{

       color:#fff;

}
如果我们转到我们的预览，并刷新页面。

您可以看到所有这些链接都是白色的。即使我点击链接。他们仍然保持白色，即使他们被访问了。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/css-color/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/css-color/