[译]HTML&CSS Lesson3: 了解CSS

CSS是一门复杂的语言，拥有相当的大能力。

它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。

首先，我们要明确的了解样式是怎么被渲染的。

具体的来说，就是我们要知道不同类型的选择器是怎么样工作的，这些选择器的顺序是如何影响样式的呈现方式的。我们也要知道一些常用的不断出现在CSS中的属性值，尤其是影响颜色和长度的属性值。

现在我们来看看CSS引擎盖下究竟发生了什么。

层叠

我们首先通过观察所谓的层叠来分析样式的呈现，再来学习一些层叠的例子。在CSS中，所有样式表中的样式都是从上到下层叠的，并且可以添加新的样式或复写原有的样式。

例如，我们首先在样式表中将所有段落<p>的背景background设置为橘色orange，字体大小设置为24px。接下来我们再添加一个样式将段落<p>的背景background设置为绿色green， 如下所示：

p {
  background: orange;
  font-size: 24px;
}
p {
  background: green;
}

由于设置background为green的选择器在设置background为orange的选择器之下，所以它的优先级更高，所有的段落<p>最终都会显示绿色背景。 但字体大小仍然保持24px，因为第二个段落选择器中并没有定义的字体大小。

属性层叠

选择器内部的属性也可以层叠。还是以段落举例，我们将所有的段落元素<p>的background设置为orange。然后直接在这个属性的下面再设置一个background为green，如下所示：

p {
  background: orange;
  background: green;
}

由于背景色值green声明在orange之后，所以它会覆盖掉orange，最终所有段落元素<p>的背景色都为绿色。

所有样式的层叠都是从上到下的。但有些时候层叠并不生效：当我们使用多种不同类型的选择器设置样式时，层叠关系将会被打破。这就是下面我们要讲的内容。

计算特征

每种选择器都有一个权重值，一个选择器的权重与层叠关系一起决定了呈现什么样式。

在第一课，“构建第一张页面”中，我们提到了不同种类的选择器：类型选择器，Class选择器，ID选择器。每种类型的选择器都有一个权重值。

类型选择器的权重是最低的。它的值为0-0-1，class选择器的权重居中，值为0-1-0。最后一个是ID选择器，它的权重最高，值为1-0-0。如我们所看到的，权重值由三列数字构成，第一列计数ID选择器，第二列计数Class选择器，第三列计数类型选择器。

再次强调一下，ID选择器的权重高于Class选择器，Class选择器权重高于类型选择器。

---

权重值
权重值是故意带连字符-的，因为他们的值并不是十进制数。Class选择器权重值不是数字10，而ID选择器权重不是数字100。这些数字应该分开来一个个读0-1-0和1-0-0。我们会在组合选择器中来了解为什么权重值要加连字符。

---

当样式冲突时，选择器的权重值越高，优先级越高。例如，当一个段落元素<p>同时使用了类型选择器和ID选择器，那么ID选择器拥有更高的优先级，而不管ID选择器的层叠关系。

HTML

<p id="food">...</p>

CSS

#food {
  background: green;
}
p {
  background: orange;
}

段落元素<p>中有一个值为food的id属性。 在CSS中，这个段落元素同时被两种类型的选择器选中： 类型选择器和ID选择器。 虽然类型选择器写在ID选择器之后，但ID选择器优于类型选择器，因为它的权重值更高，所以段落最终显示绿色背景。

不同类型选择器的权重值要牢牢记住。有时样式没有按照预期呈现，是因为选择器权重打破了层叠规则，所以才没有正确的显示。

理解层叠和权重如何工作是难度很大的事情，我们还会继续介绍这个话题。现在，我们先来看看如何组合选择器使其更精准，更具意义。

组合选择器

到目前为止，我们学习了如果单独使用各类选择器，但现在我们要知道如何一起使用这些选择器。通过组合选择器，我们可以选中更具体的元素或元素组。

例如，我们要选中class属性为hotdog元素中的所有段落元素<p>，并将它们的背景色设置为棕色brown。但class属性值为mustard的段落元素<p>的背景色要设置为黄色yellow。 代码如下：

HTML

<div class="hotdog">
  <p>...</p>
  <p>...</p>
  <p class="mustard">...</p>
</div>

CSS

.hotdog p {
  background: brown;
}
.hotdog p.mustard {
  background: yellow;
}

当选择器组合出现时，是从右到左读取的。位于最右边的，在大括号之前的选择器被成为主选择器。主选择器标识了样式要作用于哪些元素。所有主选择器左侧的选择器都被认为是预限定选择器。

上述例子中第一组选择器,hotdog p包括了两个选择器：一个class选择器和一个类型选择器。 两个选择器用空格隔开。主选择器是指向段落元素的类型选择器。但由于这个类型选择器前有一个预限定的class选择器hotdog,所以这个组合选择器只会选中 class属性为hotdog的元素中的段落元素。

上述例子中的第二组选择器，.hotdog p.mustard，包括了三个选择器：两个class选择器和一个类型选择器。与第一组选择器唯一不同的地方就是在段落选择器后增加了一个class选择器mustard。 由于这个新的class选择器mustard位于这组选择器的最右侧，成为了主选择器，所以所有在这个选择器之前的选择器都成为了预限定选择器。

---

选择器间的空格

上述例子的选择器组合.hotdog p.mustard中, class选择器hotdog和段落选择器间存在空格，但是段落选择器和class选择器mustard间没有空格。这两种用法在选择器中存在巨大差异。

段落选择器和class选择器mustard之间没有空格，表示选择器选中的是带有class属性值为mustard的段落元素<p>。如果移除段落选择器，那么class选择器mustard左右两边都有空格。它会选中所有class属性值为mustard的元素，而不仅限于段落元素<p>。

---

组合选择器是从右到左读取的，它指向class属性为hotdog的元素内的class属性为mustard的段落元素<p>。

不同类型的选择器进行组合可以指向页面中的任何元素。随着我们写的元素组合越多，我们会对它愈加熟悉。不过在此之前，我们先要了解怎么通过组合选择器改变选择器的权重。

组合选择器的权重

当组合选择器，单个选择器的权重也会被组合。组合选择器中的权重值会分别对不同类型的选择器进行计数。

我们之前的例子中的第一组选择器.hotdog p，有一个class选择器和一个类型选择器。我们知道class选择器的权重值为0-1-0，类型选择器的权重值为0-0-1，所以通过权重值相加，组合后的权重值为0-1-1。

第二组选择器.hotdog p.mustard，有两个class选择器和一个类型选择器，计算出的权重值为0-2-1。第一列的0表示没有ID选择器，第二列的2表示有两个class选择器，最后一列的1表示有一个类型选择器。

对比两组选择器，第二组选择器有两个class选择器，拥有更高的权重值。所以它具有更高的优先级，与层叠关系一致。如下代码所示，即使我们将两组选择器的书写顺序颠倒，将权重更高的选择器组合写在上面，因为权重值的关系，页面呈现的效果也不会发生任何改变。

.hotdog p.mustard {
  background: yellow;
}
.hotdog p {
  background: brown;
}

总的来说，我们要时刻关注样式的权重。权重值越高， 层叠关系越容易被打破。

使用多个class属性值对样式分类

将选择器权重值维持较低状态的一种方法是让样式尽量模块化，让多个元素共享相同的样式。而样式模块化的一种方法是使用多个class属性值对样式进行分层。

HTML元素的class属性可以拥有多个值，每个值之间用空格隔开。 这样，我们就可以将某些共同的样式应用在整组元素上，然后将特殊的样式应用在的特定元素上。

我们可以将重复利用的样式放在一个class中，将其他样式放在另外的class中。

以按钮为例，我们希望所有的按钮字体大小都为16px。但是按钮的背景色需要根据使用场景变化而变化。我们可以创建多个class属性值，然后根据需要将它们分别应用在对应元素上。

HTML

<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>

CSS

.btn {
  font-size: 16px;
}
.btn-danger {
  background: red;
}
.btn-success {
  background: green;
}

例子中，有两个拥有多个class属性值的<a>元素。第一个class属性值都为btn，将元素字体大小设置为16px。第一个<a>元素还有一个class属性值btn-danger将背景色设置为红色red。第二个<a>元素也有另外一个class属性值btn-success将背景色设置为绿色green。这样我们的样式就保持了整洁和模块化。

使用多个class属性值，可以将样式尽可能的分层，并保持代码的整洁，和维持低权重。想要完全理解层叠和权重需要很长时间，但我们会在每节课的学习中越来越好。

常见的CSS属性值

我们已经使用过一些常见的CSS属性值，例如关键字颜色值：red和green。你可能对它们没有过多的想法。现在我们花点时间复习一下之前用过的属性值，以及探索一些我们将会使用到的更常见的属性值。

这里将具体介绍一下与颜色和长度测量相关的属性值。

颜色

CSS中的所有颜色都在sRGB(standard Red Green Blue)颜色空间中定义。这个空间的颜色都由红，绿，蓝颜色通道混合组成，这反映了电视机和显示屏产生所有不同颜色的方式。
通过混合不同程度的红，绿，蓝，可以产生百万种颜色，我们几乎可以找到所有我们想要的颜色。

目前在CSS中，主要有四种方式表现sRGB颜色：关键字，十六进制符，RGB和HSL值。

关键字颜色值

关键字颜色值是映射到给定的颜色值的名称(例如：red，green，blue)。这些关键字名称和对应的色值都由CSS规范确定。只有最常用的色值和少量特定的色值有关键字名称。

完整的关键字颜色值列表可以参考CSS规范

以下例子中，我们将class属性值为task的元素的背景色设置为maroon,将class属性值为count的元素的背景色设置为yellow。

.task {
  background: maroon;
}
.count {
  background: yellow;
}

关键字颜色值都是很简单的，但他们的选择非常有限，所以不是最常用的设置颜色值的方式。

十六进制颜色

十六进制颜色值有由#加上三个或六个字母数字组成。数字使用的是0到9十个数字，字母使用的是a到f六个字母，大小写都可以。这些值映射到红，绿，蓝颜色通道。

在六个字符声明的色值中，前两个字符为一对代表红色通道，中间两个字符为一对代表绿色通道，最后两个字符为一对代表蓝色通道。在三个字符声明的色值中，第一个字符代表红色通道，第二个字符代表绿色通道，最后一个字符代表蓝色通道。

如果在六个数字符色值中，前两个字符相同，中间两个字符相同，最后两字符相同，就可以将它缩写成三个字符的色值，只要将两个重复的字符保留一个就可以了。例如橙色的十六位字符色值#ff6600可以写成#f60。

成对的字符是通过0到255格式化为十六进制字符取得的。计算起来有点棘手——最好去看它的书——但是这有助于我们理解色值 0等同于黑色，255等同于白色。

---

千万个十六进制颜色

十六进制颜色将近有1，670万个，怎么得出的呢：

在十六进制颜色中，每个字符都有十六种选择，从0到9,从a到f。每对字符都由256种颜色选项(16乘以16，或者16的平方)

由于有三组256种颜色组，所以算出有超过1,670万种颜色(256乘以256乘以256，或者256的立方)。

---

我们可以使用十六进制色值写出之前示例中的关键字颜色maroon和yellow，如下所示：

.task {
  background: #800000;
}
.count {
  background: #ff0;
}

十六进制色值的出现已经有一段时间了，因为有大量的颜色值供选择，所以变得相当受欢迎。但是如果你对色值不熟悉的话，它就不那么好用了。幸运的是，Adobe开发了一个免费的色轮工具Adobe Kuler，可以帮助我们找到想要的颜色并给出相应的十六进制色值。

另外，图片编辑工具，例如 Adobe Photoshop，也提供了拾取获取十六进制色值的功能。

RGB & RGBa颜色值

RGB颜色值用rgb()函数声明，rgb()函数，表示红绿蓝。每个值都是0到255的的整数，值之间用逗号隔开。0表示黑色，255表示白色。

如我们所想，rgb()函数的第一个值代表红色通道，第二个值代表绿色通道，第三个值代表蓝色通道。

如果我们使用rgb()函数代替关键字颜色值orange，可以表示为rgb(255, 102, 0)

同样，我们也可以用rgb()函数代替关键字颜色值或十六进制颜色值来表示maroon和yellow

.task {
  background: rgb(128, 0, 0);
}
.count {
  background: rgb(255, 255, 0);
}

RGB颜色也可以有透明度，使用rgba()函数声明。rgba()函数接受第四个参数，值必须介于0到1之间的，可以是小数。0表示完全透明不可视，1表示完全不透明。0到1之间的小数代表不同程度的透明度。

如果我们要为橙色orange设置50%的透明度，我们可以用rgba()函数表达：rgba(255, 102, 0, .5)。

我们也可以改变背景色maroon和yellow的透明度。以下代码将maroon的不透明度设置为25%，将yellow的不透明度设置为100%。

.task {
  background: rgba(128, 0, 0, .25);
}
.count {
  background: rgba(255, 255, 0, 1);
}

RGB颜色值越来越受欢迎，尤其是可以带透明度的RGBa。

HSL&HSLa颜色值

HSL颜色值用hsl()函数声明，表示色调，饱和度和亮度。与rbg()函数一样，值用逗号隔开。

第一个值为无单位的0到360的数字。0到360代表色轮。 这个值表示色轮上的色度。

第二个和第三个值，分别表示饱和度和亮度，值用百分比0到100%表示。饱和度表示色彩饱和的程度，0为灰度，100%表示完全饱和。亮度表示色彩明暗的程度，0为黑色，100%为白色。

回到之前的橙色orange的例子，可以将值转化为HSL颜色值：hsl(24, 100%, 50%)。

背景色maroon和yellow也可以用HSL颜色值声明如下。

.task {
  background: hsl(0, 100%, 25%);
}
.count {
  background: hsl(60, 100%, 50%);
}

HSL颜色值也和RGBa一样可以设置透明度，用hsla()函数。透明度通道的行为模式与rgba()函数的一致：第四个值取值范围在0到1之间，可以是小数，在函数中标识透明度。

例如我们可以使用HSLa函数为橙色orange设置50%透明度，值为：hsla(24, 100%, 50%, .5)。

同理，可以使用HSLa颜色值将maroon的不透明度设置为25%，将yellow的不透明度设置为100% 。

.task {
  background: hsla(0, 100%, 25%, .25);
}
.count {
  background: hsla(60, 100%, 50%, 1);
}

HSL颜色值是最新的CSS色值表示方式。由于它出现时间短，浏览器支持欠缺，所以还没有被广泛使用。

到目前为止，十六进制颜色值由于被广泛支持，是目前最受欢迎的色值表示方式。若色值带有透明度时，RGBa色值会被优先选择。虽然这些偏好未来可能会改变，但是我们现在都将使用十六进制颜色值和RGBa颜色值。

长度单位

长度值和颜色值一样都有不同类型的值，这些值有不同的用途。长度值有两种，分别用不同的单位表示绝对的值和相对的值。

现在我们来看看更普遍更直接的长度值表达方式。复杂的超越了我们的需求。

绝对长度单位

绝对长度单位是最简单的长度单位，因为它是固定的物理测量值，例如英寸，厘米和毫米。目前最受欢迎的绝对长度单位被称为像素，用px表示。

像素
一像素等于 1/96英寸。也就是说一英寸里面含有96像素。但实际上，一像素在高密度和低密度的设备上显示会略有不同。

像素单位已经存在很久了，它常用于不同的CSS属性中。以下例子是为段落元素<p>设置字体大小的为14像素

p {
  font-size: 14px;
}

随着显示屏的更新和屏幕尺寸的多样化，像素作为绝对单位使用起来不够灵活，已经损失了一些人气。但是像素非常好控制，很适合初学者，所以在我们学习HTML和CSS的过程中都会依赖于它。

相对长度单位

除了绝对长度单位，还有相对长度单位。相对长度单位会较复杂一些， 因为它是不固定的，它依赖于另一个测量长度。

百分比

百分比%是目前最受欢迎的相对单位之一。百分比依赖于另一个对象的长度。例如，将某元素的宽度width设置为50%， 我们就需要知道它的父元素的宽度。该元素嵌入在其中，其宽度就是父元素宽度的50%。

.col {
  width: 50%;
}

上述例子中，我们将class属性值为col的元素的宽度设置为50%。这50%就是相对于其父元素来计算的。

百分比在设置元素的长宽和页面布局中非常有用，我们将在这些方面经常使用它。

Em
用em表示的em单位也是目前很受欢迎的相对长度单位。它基于另一个元素的字体大小进行计算。

一单位的em与元素的字体大小一致。例如，我们将一个元素的字体大小设置为14像素，宽度设置为5em，那么它的宽度就是70像素（14像素乘以5）。

.banner {
  font-size: 14px;
  width: 5em;
}

如果一个元素的字体大小没有被声明，那么em单位就会依赖于最近的一个声明了字体大小的元素的字体大小。

em单位经常用于修饰文本，如果字体大小，文字间距，还有外边距和内边距等。

这里还有很多长度单位没有提到，只列出了最广泛使用的三种——像素，百分比，em。

总结

这节课的内容到此为止。主要集中于CSS基础，介绍了他是如何工作的，和一些常用的值。

这节课的内容总结如下：

• 什么是层叠
• 什么是权重，怎么计算权重
• 怎么使用组合选择器选中需要的元素和元素组
• 怎么在单元素中使用多个class属性值使其样式更具模块化
• 不同的CSS色值表示方式：关键字，十六进制，RGB和HSL
• 不同的长度单位：像素，百分比，em

基础部分已经介绍完了，但我们还需要学习很多其他内容。在接下来的课程中，我们依旧会继续学习CSS，让我们的网站真正成型。

文章来源

http://learn.shayhowe.com/htm...