[译]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，让咱们的网站真正成型。

文章来源

learn.shayhowe.com/html-css/ge…