第八章——扩大你的词汇量：增加字体和颜色样式

来源：互联网发布：基金数据下载编辑：程序博客网时间：2024/05/22 13:38

在这一章中，我们会介绍影响文本显示的一些最常用的属性。有很多CSS属性专门用来帮助我们设置文本样式。通过使用CSS，我们可以控制文本的字体、风格和颜色，甚至可以控制文本上加的装饰。

常用的文本属性

font-family

我们可用font-family属性定制页面中使用的字体。
字体会对页面设计产生巨大影响。在CSS中，字体划分为”字体系列”(font-family)，我们可以从中指定希望页面中各个元素使用的字体。例如：

body {    font-family: Verdana, Geneva, Arial, sans-serif;}

font-size

我们可用font-size属性控制字体大小。字体大小(font size)对于Web页面的设计和可读性也有很大影响。例如：

body {    font-size: 14px;}

color

我们可用color属性为文本设置颜色。例如：

body {    color: silver;}

font-weight

我们可用font-weight属性影响字体的粗细。例如：

body {    font-weight: bold;}

text-decoration

我们可使用text-decoration属性为文本增加更多风格。通过使用text-decoration属性，可以对文本加一些装饰，包括上划线、下划线和删除线。例如：

body {    text-decoration: underline;}

字体系列概述

我们已经见过font-family属性，到目前为止总是将这个属性的值指定为“sans-serif”。对于font-family属性还可以更有创意一些，可以指定为其他的字体，不过首先来了解字体系列到底是什么？下面就来简单看一下······
每个font-family包含一组有共同特征的字体。共有5个字体系列：sans-serif、serif、monospace、cursive和fantasy。每个字体系列都包括大量字体。

sans-serif字体系列：Verdana、Arial Black、Trebuchet MS、Arial、Geneva。
sans-serif字体系列包括没有衬线的字体，sans-serif表示“没有衬线”。与serif字体相比，通常认为sans-serif字体在计算机屏幕上更容易识读。
serif字体系列：Times、Times New Roman、Georgia。
serif字体系列包括有衬线的字体。很多人一看到这种字体就想到新闻报纸的文字排版。衬线是字母末端的装饰性“小细节”。
monospace字体系列：Courier、Courier New、Andale、Mono。
monospace字体系列中的字体包含固定宽度的字符。例如，一个“i”在水平方向所占的宽度与一个“m”所占的宽度是相同的。这些字体主要用于显示软件代码示例。
cursive字体系列：Comic、Sans、Apple、Chancery。
cursive字体系列包括看似手写的字体，有时会看到标题中使用这些字体。
fantasy字体系列：LAST、NINJA、Impact。
fantasy字体系列包含有某种风格的装饰性字体。

仔细查看这些字体系列：serif字体看起来很高雅、很传统，而sans-serif字体外观很清晰，可读性好。monospace字体就好像是打字机打出来的。cursive和fantasy字体给人一种有趣或者很有风格的感觉。

使用CSS指定字体系列

我们之前已经见过font-family属性了，现在再来看一个更有意思的例子：

body {    font-family: Verdana, Geneva, Arial, sans-serif;}

font-family：使用font-family属性可以指定多个字体，只需要输入这些字体名，并用逗号分隔。
Verdana, Geneva, Arial：要完全按照这里的拼写输入字体名，大小写字母必须一致。通常，你指定的font-family(即font-family规范)包含一个候选字体列表，它们都来自同一个字体系列。
sans-serif：最后总是放一个通用的字体系列名，如“serif”、“sans-serif”、“cursive”或“monospace”。

了解以上知识之后，我们就要清楚font-family规范是如何工作的？浏览器会这样解释你在font-family规范中列出的字体：

查看用户计算机上是否有Verdana字体，如果有，这个元素(在这里就是<body>元素)就会使用这个字体。
如果Verdana不可用，再查找Geneva字体，如果这个字体可用，它将作为body元素的字体。
如果Geneva不可用，再查找字体Arial，如果这个字体可用，它将作为body元素的字体。
最后，如果前面指定的特定字体都没有找到，就使用浏览器的默认“sans-serif”字体。

利用font-family属性，你可以创建一个首选字体列表。我们希望大多数浏览器都能有你的第一个选择，不过，如果没有，至少可以确保浏览器能提供同一个字体系列中的一个通用字体。
下面我们来看一下以下几个问题：

如果一个字体名中包含多个单词，比如Courier New，我怎么指定这样一个字体呢？
答：只需要在font-family声明中的字体名两边加上引号，就像这样：
```
font-family: "Courier New", Courier;
```
这么说，font-family属性实际上就是一组候选字体，是吗？
答：没错。它实际上就是一个字体优先列表。第一个是你最希望使用的，后面是一个不错的替代字体，再后面更多的替代字体。对于最后一个字体，应当指定最全面的通用“sans-serif”或“serif”，它与列表中指定的所有其他字体应当在同一个字体系列中。
“serif”和“sans-serif”是真正的字体吗？
答：“serif”和“sans-serif”并不是具体的字体名。不过，如果font-family声明中指定的前几个字体都无法找到，浏览器就会选择一个实际字体来代替“serif”或“sans-serif”。取代它的字体是浏览器定义的该字体系列的默认字体。
我怎么知道使用哪个字体？serif还是sans-serif？
答：没有固定的原则。不过，在计算机显示中，很多人认为sans-serif最适合体文本。你会发现很多设计中体文本都使用sans-serif字体，或者会混合使用serif字体和sans-serif字体。所以，这实际上取决于你的喜欢，以及你希望页面有怎样的外观。

引入Web字体

关于字体，很不幸的是，你没有办法控制用户计算机上安装什么字体。不仅如此，他们还往往使用不同的操作系统。例如，也许你的Mac上有某些字体，而在用户PC上很可能没用这些字体。所以，如何处理这种情况呢？嗯，一种靠得住的策略是创建一个字体列表，其中包含最适合你的页面的字体，并希望用户已经安装了这些字体。不过，如果他们没有这些字体，至少我们可以依靠浏览器来提供相同字体系列中的一种通用字体。
这时我们就需要引入Web字体了，我们可以使用Web字体(Web Font)向用户的浏览器提供一种字体。为此，要用到CSS的一个比较新的特性：@font-face规则。这个规则允许你定义一种字体的名字和位置，然后可以在你的页面中使用。

Web字体如何工作

有了Web字体，你可以充分利用现代浏览器的一个新功能，能够向用户直接提供新的字体。一旦提供了新字体，浏览器就能使用Web字体，就像使用所有其他字体一样，甚至可以用CSS指定文本样式。下面详细分析Web字体如何工作：

要利用Web字体，浏览器首先得获取一个引用这些字体的HTML页面。
浏览器再获取这个页面所需的Web字体文件。字体文件包含在web页面中使用这种字体时浏览器所需的一切信息。
现在，获取这个字体之后，浏览器显示页面时就会使用这个字体了。

现在，我们来解决以下问题：

woff或者Web开放字体格式(Web open font format)到底是什么？
答：woff是作为Web字体的标准字体格式出现的，你会看到，如今所有现代浏览器上都对woff提供了支持。也就是说，这个领域以前一直缺少标准化，不同的浏览器会支持不同的字体格式。如果要为可能不支持woff的浏览器提供Web字体，就需要提供一个或多个格式作为候选。在这方面，Web字体托管服务(后面会介绍到)会有很大帮助。
所以要使用一个Web字体，我必须在一个服务器上托管字体文件，是吗？
答：如果你只是要测试字体，实际上可以把这些字体作为本地文件，存储在你自己的文件系统中并引用(就像存储和引用本地图像一样)。不过，如果你想为Web上的用户提供字体，就必须把这些文件放在一个服务器上，或者利用一个托管服务，如Google的字体托管服务，这是免费的。
如果我要使用一个Web字体，能不能肯定我的用户一定能用这种字体？
答：只要他们有一个现代浏览器(另外不考虑网络连接或服务器问题)，那么大多数情况下都可以确信这一点。不过，如果他们使用一些比较老的浏览器，或者不支持Web字体的移动设备，那就不行了，你仍然需要提供候选字体。

如何为页面增加Web字体

想为页面增加一种特殊的字体？下面一步一步说明如何使用Web字体和CSS中的@font-face规则来实现。

找到一个字体
如果还没有合适的字体，可以访问一些提供字体的网站，现在这些网站有很多，会提供免费以及需要授权的字体，允许你在页面中使用。
确保有所需字体的所有格式
关于Web字体有一个好消息：@font-face CSS规则基本上已经成为所有现代浏览器的一个标准。不过也有一个坏消息：存储字体使用的具体格式还不是一个标准(不过已经离这个目标越来越接近了)。实际上，不同的浏览器对很多不同的格式提供了不同程度的支持。下面是一些常用的格式(以及各自的文件扩展名)：
- TrueType字体：.ttf
- OpenType字体：.otf
  TrueType字体和OpenType字体紧密相关，OpenType建立在TrueType基础之上(比TrueType更新)
- Embedded OpenType字体：.eot
  Embedded OpenType(EOT)是OpenType的一种压缩形式，这种格式是专用的(Microsoft)，仅IE提供支持。
- SVG格式：.svg
  Scalable Vector Graphics或SVG是一种通用图像格式，SVG字体使用这种格式表示字符。
- Web开发字体格式：.woff
  Web开发字体格式建立在TrueType基础之上，已经发展为Web字体的一个标准。大多数现代浏览器都对这种格式提供了很好的支持。
大多数现代浏览器上支持最为广泛的格式是Web开发字体格式，所以这也是我们推荐使用的格式。你可以为较老的浏览器提供一个候选字体，我们将使用TrueType作为候选，因为这种字体在所有浏览器上也得到了很好的支持(但IE除外)。
把你的字体文件放在Web上
你可能想把你的字体文件放在Web上，这样用户的浏览器就能访问这些字体。或者也可以利用网上的很多在线字体服务，这些服务会为你托管这些文件。不论哪一种情况，你都需要字体文件的URL。例如，我们已经把这些文件放在wickedlysmart.com上：
```
http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regualr.woffhttp://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regualr.ttf
```
在CSS中增加@font-face属性
你已经得到了“Emblema One“字体的.woff和.ttf版本的URL，所以现在可以为外部样式文件(如xxx.css)增加一个@font-face规则。把这个规则增加到文件的最上面，放在body规则之上：
```
@font-face {    font-family: "Emblema One";    src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regualr.woff"),         url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regualr.ttf")}
```
规则以@font-face开头。
- font-family: “Emblema One”：与正常的规则不同，正常规则会选择一组元素并指定样式，而@font-face规则会建立一个字体，将指定一个font-family名，以便以后使用。在@font-face规则中，我们使用font-family属性为这个字体创建一个名字，可以使用你喜欢的任何名字，不过通常最好与字体名一致。
- src属性告诉浏览器在哪里可以得到这个字体。对于浏览器可设别的每一个文件，我们要分别指定一个src值。在这里，我们将提供现代浏览器可以设别的.woff和.ttf字体。
@font-face规则告诉浏览器：要加载由src URL指定的字体文件。浏览器会尝试加载每一个src文件，直到找到它能支持的一个文件。一旦加载，会为这个字体分配font-family属性中指定的名字，在这里就是“Emblema One”。
在CSS中使用font-family名
一旦用@font-face规则在浏览器中加载一个字体，接下来就可以使用这个字体了，可以用font-family属性引用你指定的字体名。例如，我们想要改变页面中<h1>标题的字体，让它使用“Emblema One”字体，为此，我们要为<h1>增加一个规则，如下所示：
```
h1 {    font-family: "Emblema One", sans-serif;}
```
加载页面！

注意：TTF和WOFF字体格式在IE8及以前的版本中不可用。如果你希望支持那些使用较老IE浏览器的用户，需要对Web字体多做一点工作，要使用一个EOT字体。
现在，我们来解决以下问题：

@font-face规则不论看起来还是从表现上讲都不像一个CSS规则，不是吗？
答：你说对了，可以认为@font-face是一个内置的CSS规则，而不是一个选择器规则。@font-face并不选择一个元素。利用@font-face规则，可以获取一个Web字体，并为它分配一个font-family名。最前面的@就是一个很好的线索，说明这不是一个普通的CSS规则。
还有其他需要了解的内置CSS规则吗？
答：有。你还会看到两个常用的规则，分别是@import和@media。@import允许导入其他CSS文件(而不是HTML中通过一个<link>链入)，另外@media允许创建特定于某些“媒体”类型的CSS规则，如印刷页、桌面屏幕或手机。
Web字体看起来很棒，使用Web字体有什么缺点吗？
答：确实有一些缺点。首先，获取Web字体需要花费一些时间，所以第一次获取Web字体时，你的页面性能可能会受影响。另外，管理多个字体文件也是件痛苦的事情。最后，你可能会发现，移动设备和小型设备并不支持Web字体，所以你的设计里一定要考虑候选字体。
我能用@font-face使用多个定制字体吗？
答：可以。如果你使用@font-face来加载字体。对于你想用的每一种字体，要确保服务器上有相应的字体文件，而且要为每个字体创建一个单独的@font-face规则，所以要分别指定唯一的名字，不过，记住要确保只选择Web页面中真正需要的字体。每一个额外的字体都会额外增加页面的加载时间，所以如果页面中有多个Web字体，Web页面的加载会变慢。如果太慢，可能会让你的用户很不满！
你提到有些服务可以为我托管Web字体，即Web字体托管服务。你能再说详细点吗？
答：当然可以！FontSquirrel(http://www.fontsquirrel.com/)就是一个很好的网站，这里提供了很多开源、免费的字体，可以把这些字体上传到你的服务器。利用他们的字体库，可以很容易地提供一个给定字体的多个格式。Google Web字体服务(http://www.google.com/webfonts)也很不错，可以让Google为你完成管理字体和CSS的所有具体工作。在这种情况下，你只需要链接Google服务上你想要的字体，然后在你的CSS中使用相应的字体名就可以了，非常容易！

调整字体大小

我们需要知道如何指定字体大小，具体来说，指定字体大小的方法有很多。下面先来看指定font-size的一些方法，然后讨论哪种方法最好，可以保证字体大小，还能做到用户友好。

px
可以按像素指定字体大小，就像图像使用的像素尺寸一样。用像素指定字体大小时，就是在告诉浏览器字母高度是多少像素。例如，在body规则中指定font-size：
```
body {    font-size: 14px;}
```
在CSS中，指定像素数时，先要指定一个数，后面是“px”，“px”必须紧跟在像素数后面，之间不能有空格。这说明font-size应当是14像素高。
设置一个字体高度为14像素，这说明字母的最低部分与最高部分之间有14像素。
%
用像素指定字体大小时，会明确指出字体具体有多大，与之不同，用一个百分数指定字体大小时，会相对于另一个字体大小指出这个字体有多大。因此，font-size: 150%;，说明这个字体大小应当是另一个字体大小的150%。不过，是另外哪一个字体大小呢？嗯，由于font-size是从父元素继承的一个属性，指定一个百分数字体大小时，就是相对于父元素的字体大小。
下面来看这是如何工作的：
```
body {    font-size: 14px;}h1 {    font-size: 150%;}
```
这里按像素指定了body的字体大小，并把一级标题的大小指定为150%。
em
还可以使用em指定字体大小，类似于百分数，这也是一个相对度量单位。使用em时，不是指定一个百分数。而是要指定一个比例因子。可以这样使用em：
```
body {    font-size: 14px;}h1 {    font-size: 150%;}h2 {    font-size: 1.2em;}
```
假设你使用这种度量来指定<h2>标题的大小。<h2>标题的大小将是父元素字体大小的1.2倍，在这里就是1.2乘以14px，大约17px(实际上是16.8，不过大多数浏览器会把它四舍五入为17)。
关键字
还要一种指定字体大小的方法：关键字。可以把一个字体大小指定为xx-small，x-small，small，medium，large，x-large或xx-large，浏览器会把这些关键字转换为像素值，它会使用浏览器中定义的默认值来完成这个转换。
各个关键字对应的大小通常有以下关系。每个大小大约比前一个大小大20%，small通常定义为大约12像素。不过，要记住，各个浏览器中这些关键字的定义并不一定相同，如果用户愿意，他们还可能重新给出他们自己的定义。可以这样使用关键字：
```
body {    font-size: small;}
```
大多数浏览器中，这会使体文本大小约为12像素。

我们到底该如何指定字体大小呢？

指定字体大小确实有很多选择：px，em，百分数和关键字。你要使用哪一个呢？下面给出指定字体大小的一个小秘诀，利用这个秘诀，可以在大多数浏览器中得到一致的结果。

选择一个关键字(我们推荐使用small或medium)，指定它作为body规则中的字体大小。这相当于页面的默认字体大小。
使用em或百分数，相对于body字体大小指定其他元素的字体大小(选择em还是百分数由你决定，因为实际上这两种方法的作用是一样的)。
不错的秘诀，不过这有什么好处呢？是这样的：如果相对于body字体大小定义其他元素的字体大小，那么改变Web页面中的字体大小就会很容易，只需要改变body字体大小就可以了。

下面来看这是如何工作的。首先，为你的<body>元素设置一个大小。然后，相对于这个大小设置所有其他字体大小，就像这样：

body { font-size: small; }h1 { font-size: 150%; }h2 { font-size: 120%; }

注意：如果使用像素指定字体大小，老版本的IE将不支持文本缩放。很遗憾，如果用户使用老版本的IE，倘若你的字体大小使用像素指定的，这些用户就无法调整字体的大小。这正是我们不建议按像素指定字体大小的一个原因。如果你使用像素，对于部分用户来说，页面的可用性会降低，尽管这种情况可能不会持续太久，因为用户已经陆续开始对他们的浏览器进行升级。
幸运的是，如果你遵循前面的秘诀，提供一个关键字来定义页面体的字体大小，再使用em或百分数为其他元素指定相对大小，这样当要求浏览器放大或缩小文本时，IE也能正确地缩放你的字体。
现在我们来看下面的问题：

这么说，通过在<body>元素中定义一个字体大小，实际上我是在为页面定义一个默认大小，是吗？这是怎么回事？
答：对，你说的没错。通过在<body>元素中设置一个字体大小，这样在设置其他元素的字体大小时就可以相对于其父元素来设置。这有什么好处呢？嗯，如果你需要改变字体大小，那么只需要改变body字体大小，所以其他元素都会按比例改变。
我们真的需要考虑用户调整浏览器字体大小吗？我从来没有考虑过。
答：是的。几乎所有浏览器都允许用户将页面的文本变大或变小，很多用户会利用这个特性。如果你采用一种相对方式定义字体，用户调整页面字体大小时就没有任何问题。不过要当心不要使用像素大小，因为有些浏览器在调整像素大小时会有麻烦。
em和百分数有什么区别？它们看起来是一样的。
答：基本说来，它们是达到相同目的的两条不同途径。它们都提供了一种灵活方法，可以相对于父元素的字体大小指定一个字体大小。很对人发现百分数比em更容易理解，另外在CSS中也更容易阅读。不过你完全可以选择自己喜欢的方法。
如果我没有指定字体大小，是不是只能得到默认字体大小？
答：是的，这些默认字体大小取决于你的浏览器，甚至取决于你运行的浏览器版本。不过大多数情况下，默认的body字体大小都为16像素。
那么标题的默认大小是多大？
答：同样的，这也取决于浏览器，不过一般来讲，<h1>是默认体文本字体大小的200%，<h2>是150%，<h3>是120%，<h4>是100%，<h5>是90%，<h6>是60%。注意默认地，<h4>字体大小与body字体大小相同，<h5>和<h6>要小一些。
那么，在body规则中能不能不使用大小关键字，而使用em或%？如果我使用90%作为body的字体大小，这到底是什么意思？它是谁的90%？
答：对，你可以这样做。如果在body规则中指定字体大小为90%，这将是默认字体大小的90%，我们刚说过，默认字体大小通常是16像素，所以它的90%就大约是14像素。如果你希望一个字体大小与关键字指定的大小稍有区别，就可以使用%或em。

改变字体粗细

font-weight属性允许你控制文本的粗细。我们知道，粗体文本看起来比正常文本更深，而且往往要“胖”一点。可以将元素的font-weight属性设置为bold，来使用粗体文本，如下所示：

font-weight: bold;

也可以反过来。如果一个元素默认地设置为bold，或者从父元素继承了粗体，可以如下去掉粗体样式：

font-weight: normal;

还要两个相对font-weight属性：bolder和lighter。使用这两个属性值时，会相对于所继承的值使文本样式稍粗一些或者稍细一些。这些值很少使用，因为没有多少字体支持粗细程度的微小差别，实际上这两个值通常没有任何效果。
还可以把font-weight属性设置为100到900之间的一个数(100的倍数)，不过同样的，这个特性也未得到字体和浏览器的广泛支持，所以通常并不使用。

为字体增加风格

斜体文本是倾斜的，有时还有额外的弯曲衬线。在CSS中可以使用font-style属性为文本增加斜体风格，如font-style: italic;，不过，并不是所有字体都支持斜体风格(italic)，所以你得到的实际上称为倾斜(oblique)文本，倾斜文本也是倾斜的，不过这种字体并不是使用一组专门设计的倾斜字符，而是由浏览器将正常文字倾斜。故，也可以使用font-style属性得到倾斜文本，如：font-style: oblique;。
实际上你会发现，取决于你选择的字体和浏览器，有时这两种风格看起来是一样的，有时则不同。所以，除非确实非得区分斜体和倾斜文本，这对你非常重要，否则完全可以任选一种使用。如果确实很重要，你就需要对不同的字体和浏览器组合进行测试，来得到最佳效果。
小结：

斜体(italic)和倾斜(oblique)风格会使字体看起来是倾斜的。
除非可以控制用户使用的字体和浏览器，否则你会发现，不论你指定什么风格，结果并不确定，有时你会得到斜体，有时则是倾斜文本。所以完全可以就用斜体，不用担心它们的差别(你可能根本无从控制)。

为字体增加颜色样式

Web颜色概述

首先，我们需要知道Web颜色是如何工作的？我们已经看到页面上很多地方都可以加颜色：背景颜色、边框颜色和字体颜色。不过，这些颜色在计算机上究竟是如何工作的？下面来看一下。
Web颜色是按构成颜色的红、绿、蓝三个分量所占数量来指定的。每种颜色会分别指定一个从0到100%的数值，然后把它们混合起来得到最终的颜色。例如，如果把红色100%、绿色100%和蓝色100%混合在一起，就会得到白色。注意，在计算机屏幕上，将颜色混合在一起会得到一种更亮的颜色。毕竟，光就是混合而成的！
不过，如果每个颜色分量(红、绿和蓝)不是100%，比如只是60%，会得到什么颜色呢？不太白，是吗？换句话说，你会得到一个灰色，因为我们仍然是将这三种颜色等量相加，不过没有那么多光发送到屏幕上。
或者，假设把红色80%和绿色40%混合在一起。你觉得会得到一个橙色，是吗？嗯，你说的没错，确实是一个橙色。注意，如果一个颜色分量为0，它不会影响另外两个颜色分量。同样的，这是因为没有蓝光与红光和绿光混合。
那么，如果红、绿和蓝色都是0%，混合在一起会得到什么？这说明，根本没有向屏幕发送任何光，所以会得到黑色。

如何指定Web颜色？

为什么我要知道这些“颜色理论”？我直接按名字指定颜色不就行了吗？比如”red“、”green“或”blue“，不行吗？我们当然可以使用喜欢的颜色名，不过CSS只定义了大约150个颜色名。但我们会告诉你另外一种指定颜色的方法，允许你指定远远不止150种颜色。事实上，你可以使用一个包含1600万种颜色的调色板。
CSS提供了很多种指定颜色的方法。你可以指定颜色名，或者按红、绿、蓝相对百分比指定颜色，也可以使用一个十六进制码指定颜色，这是描述颜色红、绿、蓝分量的一种简写形式。不过，到目前为止，十六进制码是指定Web颜色最为常用的方法。但要记住，所有这些指定颜色的方法最终都是要告诉浏览器：一个颜色中红、绿、蓝分量分别是多少。
下面分别介绍在CSS中指定颜色的各种方法。

按名指定颜色

要在CSS中描述颜色，最直接的方法就是使用颜色名。有16种基本颜色和150种扩展颜色可以采用这种方法指定。假设你希望指定“silver”作为一个body元素的背景色，可以在CSS中这样写：

body {    background-color: silver;}

所以，按名指定一个颜色时，只需要输入颜色名作为相应的属性值。CSS颜色名是不区分大小写的，所以输入silver，Silver或SILVER都是允许的。要记住，这些颜色名只是预定义了红、绿、蓝三种颜色分量的多少。

用红、绿、蓝值指定颜色

还可以按红、绿、蓝分量的多少来指定一个颜色。所以，假设你希望指定橙色作为一个body元素的背景色，它由红色80%，绿色40%和蓝色0%构成。可以这样做：

body {    background-color: rgb(80%, 40%, 0%);}

rgb(80%, 40%, 0%)：“rgb”是red，green，blue的缩写。然后在小括号里指定红、绿、蓝的百分比，每个分量后面都有一个百分号(%)。

还可以将红、绿、蓝值指定为0到255之间的一个数值。所以不用指定为红色80%，绿色40%和蓝色0%，可以使用红色204(255的80%)，绿色102(255的40%)，蓝色0(255的0%)来指定。可以如下直接使用数值指定颜色：

body {    background-color: rgb(204, 102, 0);}

注意：在小括号里直接指定数值而不是百分数，不要加%。
下面我们来解决以下问题：

为什么会有两种不同的方法来指定rgb值？百分数不是更直接吗？
答：有时百分数确实更直接，不过使用0到255之间的一个数也是有一定道理的。这个数与1字节信息中包含的数值个数有关。所以，由于历史和技术方面的原因，通常使用255作为颜色中指定红、绿、蓝值的度量单位。

使用十六进制码指定颜色

一个十六进制码中，每组2位数字分别代表颜色的红、绿、蓝分量。所以前两位数字表示红色，接下来两位表示绿色，最后两位表示蓝色，就像这样：#cc6600。十六进制码总是以#开头。
下面，我们来分解一个十六进制码指定的颜色：

将十六进制颜色分解为它的3个分量。
要记住，每个十六进制颜色由红、绿、蓝分量组成。首先要做的是分解这些分量。
将每个十六进制数转换为相应的十进制数。
既然已经分解得到了分量，下面可以计算各个分量的值，得到0到255的一个数。
现在对另外两个值做同样的处理。
对另外两个值重复使用上面的方法。

现在得到了各个分量的数值，准确地知道了这个颜色中红、绿、蓝各有多少。

小结：

现在我们已经掌握了指定颜色的多种不同的方法。以我们的橙色为例，它由红色80%，绿色40%和蓝色0%组成。在CSS中，可以采用任何一种方法指定这个颜色：
```
body {    background-color: rgb(80%, 40%, 0%);}body {    background-color: rgb(204, 102, 0);}body {    background-color: #cc6600;}
```

现在，我们来回答两个问题：

我现在知道该如何指定颜色了，不过怎么选择能合理搭配的字体颜色呢？
答：要准确地回答这个问题，需要一本书才能讲清楚，不过选择字体颜色有一些基本原则。最重要的是，对于文本和背景，要使用对比度最大的颜色，这样能帮助提高可读性。例如，白色背景上的黑色文本对比度就最高。没有必要一直使用黑白色，不过可以尝试让文本使用深色，而背景使用浅色。
我见过类似#cb0的十六进制码，这是什么意思？
答：如果每一组分量中两位数字都相同，你可以使用简写。因此，例如，#ccbb00可以缩写为#cb0，或者#11eeaa可以缩写为#1ea。不过如果十六进制码是#ccbb10，则不能使用缩写。如果颜色的十六进制码中每一位都相同(都是同一个数)，这些颜色都是灰色，从深灰(接近黑色)到浅灰色(接近白色)。

关于文本装饰

文本装饰允许你为文本增加一些装饰性的效果，如下划线、上划线和删除线。要增加一个文本装饰，只需设置元素的text-decoration属性。就像这样：

em {    text-decoration: line-through;}

这个规则会使<em>元素上有一个从文本中间穿过的横线。
一次可以设置多个装饰。假如你想同时对一个元素加下划线和上划线，可以如下指定文本装饰：

em {    text-decoration: underline overline;}

这个规则使得<em>元素有一个下划线和一个上划线。
如果文本继承了你不想要的文本装饰，可以使用值“none”来去去除装饰：

em {    text-decoration: none;}

利用这个规则，<em>元素将没有任何装饰。

现在，我们来回答以下三个问题：

如果<em>有两个不同的规则，一个指定了上划线，另一个指定了下划线，它们会累加吗？这两个装饰都能得到吗？
答：不能。你要把这两个值合并到一个规则中，才能同时得到这两个文本装饰。对于text-decoration只会选择一个规则，不同规则中的装饰不会累加在一起。只有为text-decoration样式选择的规则才能确定使用什么装饰，所以要得到这两个装饰，唯一的办法就是在同一个text-decoration声明中同时指定。
我一直想问，为什么color属性不叫text-color？
答：color属性实际上控制着一个元素的前景色，所以它会控制文本和边框颜色，不过你也可以用border-color属性为边框指定自己的颜色。
我喜欢删除线装饰。能不能在我编辑的文本上使用这个装饰，来指示需要删除的内容？
答：当然可以，不过还要一种更好的方法。HTML提供了一个我们还没有谈到的元素：<del>，它能把HTML中的某些内容标记为要删除的内容。还要一个类似的元素，名为<ins>，这会标记要插入的内容。通常浏览器会分别用一个删除线和下划线指定这些元素的样式，你也可以用你喜欢的方式指定它们的样式。通过使用<del>和<ins>，在指定样式的同时还可以指出内容的含义。

如果我们不想用下划线来装饰文本，那么可以使用边框。如在<h1>和<h2>元素下面增加一个下边框：

h1, h2 {    color: #cc6600;    border-bottom:thin dotted #888888;}

现在<h1>和<h2>元素下面有一个下边框，而不是下划线。
注意：这些下边框一直延伸到页面边缘，而不只是在文本下面出现。

0 0