2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

[译]HTML&CSS Lesson3: 了解CSS

csshtml作者:猿2048志愿者

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

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

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

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

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

层叠

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

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

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

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

属性层叠

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

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>中有一个值为foodid属性。 在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属性值,例如关键字颜色值:redgreen。你可能对它们没有过多的想法。现在我们花点时间复习一下之前用过的属性值,以及探索一些我们将会使用到的更常见的属性值。

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

颜色

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

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

关键字颜色值

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

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

clipboard.png

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

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

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

十六进制颜色

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

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

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

clipboard.png

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


千万个十六进制颜色

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

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

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


我们可以使用十六进制色值写出之前示例中的关键字颜色maroonyellow,如下所示:

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

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

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

clipboard.png

RGB & RGBa颜色值

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

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

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

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

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

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

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

我们也可以改变背景色maroonyellow的透明度。以下代码将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()函数一样,值用逗号隔开。

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

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

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

背景色maroonyellow也可以用HSL颜色值声明如下。

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

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

例如我们可以使用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...

本文来源于网络:查看 >
评论
点击刷新
评论
×添加代码片段