摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。
CSS是一门复杂的语言，拥有相当的大能力。
它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。
首先，我们要明确的了解样式是怎么被渲染的。
具体的来说，就是我们要知道不同类型的选择器是怎么样工作的，这些选择器的顺序是如何影响样式的呈现方式的。我们也要知道一些常用的不断出现在CSS中的属性值，尤其是影响颜色和长度的属性值。
现在我们来看看CSS引擎盖下究竟发生了什么。
层叠我们首先通过观察所谓的层叠来分析样式的呈现，再来学习一些层叠的例子。在CSS中，所有样式表中的样式都是从上到下层叠的，并且可以添加新的样式或复写原有的样式。
例如，我们首先在样式表中将所有段落
的背景background设置为橘色orange，字体大小设置为24px。接下来我们再添加一个样式将段落
的背景background设置为绿色green， 如下所示：
p {
background: orange;
font-size: 24px;
}
p {
background: green;
}
由于设置background为green的选择器在设置background为orange的选择器之下，所以它的优先级更高，所有的段落
最终都会显示绿色背景。 但字体大小仍然保持24px，因为第二个段落选择器中并没有定义的字体大小。
属性层叠选择器内部的属性也可以层叠。还是以段落举例，我们将所有的段落元素
的background设置为orange。然后直接在这个属性的下面再设置一个background为green，如下所示：
p {
background: orange;
background: green;
}
由于背景色值green声明在orange之后，所以它会覆盖掉orange，最终所有段落元素
的背景色都为绿色。
所有样式的层叠都是从上到下的。但有些时候层叠并不生效：当我们使用多种不同类型的选择器设置样式时，层叠关系将会被打破。这就是下面我们要讲的内容。
计算特征每种选择器都有一个权重值，一个选择器的权重与层叠关系一起决定了呈现什么样式。
在第一课，“构建第一张页面”中，我们提到了不同种类的选择器：类型选择器，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。我们会在组合选择器中来了解为什么权重值要加连字符。
当样式冲突时，选择器的权重值越高，优先级越高。例如，当一个段落元素
同时使用了类型选择器和ID选择器，那么ID选择器拥有更高的优先级，而不管ID选择器的层叠关系。
HTML
...
CSS
#food {
background: green;
}
p {
background: orange;
}
段落元素
中有一个值为food的id属性。 在CSS中，这个段落元素同时被两种类型的选择器选中： 类型选择器和ID选择器。 虽然类型选择器写在ID选择器之后，但ID选择器优于类型选择器，因为它的权重值更高，所以段落最终显示绿色背景。
不同类型选择器的权重值要牢牢记住。有时样式没有按照预期呈现，是因为选择器权重打破了层叠规则，所以才没有正确的显示。
理解层叠和权重如何工作是难度很大的事情，我们还会继续介绍这个话题。现在，我们先来看看如何组合选择器使其更精准，更具意义。
组合选择器到目前为止，我们学习了如果多带带使用各类选择器，但现在我们要知道如何一起使用这些选择器。通过组合选择器，我们可以选中更具体的元素或元素组。
例如，我们要选中class属性为hotdog元素中的所有段落元素
，并将它们的背景色设置为棕色brown。但class属性值为mustard的段落元素
的背景色要设置为黄色yellow。 代码如下：
HTML
...
...
...
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的段落元素
。如果移除段落选择器，那么class选择器mustard左右两边都有空格。它会选中所有class属性值为mustard的元素，而不仅限于段落元素
。
组合选择器是从右到左读取的，它指向class属性为hotdog的元素内的class属性为mustard的段落元素
。
不同类型的选择器进行组合可以指向页面中的任何元素。随着我们写的元素组合越多，我们会对它愈加熟悉。不过在此之前，我们先要了解怎么通过组合选择器改变选择器的权重。
组合选择器的权重当组合选择器，单个选择器的权重也会被组合。组合选择器中的权重值会分别对不同类型的选择器进行计数。
我们之前的例子中的第一组选择器.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
... ...
CSS
.btn {
font-size: 16px;
}
.btn-danger {
background: red;
}
.btn-success {
background: green;
}
例子中，有两个拥有多个class属性值的元素。第一个class属性值都为btn，将元素字体大小设置为16px。第一个元素还有一个class属性值btn-danger将背景色设置为红色red。第二个元素也有另外一个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属性中。以下例子是为段落元素
设置字体大小的为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...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112340.html
摘要：我们会在组合选择器中来了解为什么权重值要加连字符。组合选择器中的权重值会分别对不同类型的选择器进行计数。对比两组选择器，第二组选择器有两个选择器，拥有更高的权重值。 CSS是一门复杂的语言，拥有相当的大能力。 它我们允许为页面添加布局和设计，允许多个元素甚至多个页面共享样式。在我们有能力解锁所有功能之前，我们必须先充分理解它的基础点。 首先，我们要明确的了解样式是怎么被渲染的。 具体的...
摘要：告诉搜索引擎爬虫，我们的网站是关于什么内容的服装好看的衣服我是你爸爸我是你爸爸段落标签标题标题标题标题标题标题标题标签独成一段，加粗字体哈哈我的家在东北lesson1 ①我是你爸爸 我是你爸爸 ②标题 标题 标题 标题 标题 标题 ③ 哈哈 ④50$ ⑤我的家在东北 ⑥ a b c lesson2 /*链接到4中的ul的导航栏应用*/ *{ ...
摘要：有几个不同的因素致使它的流行。在这四个值中，我们最常用的就是将文本设置为斜体和将文本恢复为正常样式。因此任何低于的值会显得更细，而高于的值会显得更粗。目前浏览器默认为蓝色，我们要把它改成和到元素一致的颜色。 随着时间的推移，网络字体排版已经得到了很大的发展。有几个不同的因素致使它的流行。其中被最广泛认可的因素是可嵌入我们自己的网络字体的系统的开发。 过去我们只能在网站中使用少量的字体。...
摘要：有几个不同的因素致使它的流行。在这四个值中，我们最常用的就是将文本设置为斜体和将文本恢复为正常样式。因此任何低于的值会显得更细，而高于的值会显得更粗。目前浏览器默认为蓝色，我们要把它改成和到元素一致的颜色。 随着时间的推移，网络字体排版已经得到了很大的发展。有几个不同的因素致使它的流行。其中被最广泛认可的因素是可嵌入我们自己的网络字体的系统的开发。 过去我们只能在网站中使用少量的字体。...
摘要：元素是使用小于号和大于号包裹元素名来标示。一个结束标签表示元素的结束它由小于号元素名组成例如。和嵌套在内，它们页面中都是可视的。使用选择器类型选择器类型选择器也叫作元素选择器根据元素类型选择元素。 可以的话，请想象一下互联网没有发明之前的日子。网站还不存在，纸质的书本是我们主要的信息来源，而在书本中查询我们想要的资料会耗费相当多的精力和时间。 而如今，你打开个浏览器用搜索引擎搜索，任...
阅读 3389·2023-04-26 02:05
阅读 1773·2021-11-19 11:30
阅读 3897·2021-09-30 09:59
阅读 2998·2021-09-10 10:51
阅读 744·2021-09-06 15:01
阅读 2397·2021-09-01 10:30
阅读 1185·2021-08-11 11:20
阅读 2456·2019-08-30 15:54
