Go to Previous Section:
文本样式这是 CSS入门教程 系列的第8部分; 介绍了如何在你的CSS文件中运用颜色值. 在示例样式表中，介绍了背景颜色.
关于: 颜色
到目前为止，在这个系列中，都很少用到用名字命名的颜色属性。CSS2支持17种名字的颜色。其中有一些可能不像你期望的那样，如下图：
| black | gray | silver | white | |||||||||||
| 主要的 | red | lime | blue | |||||||||||
| 次要 | yellow | aqua | fuchsia | |||||||||||
| maroon | orange | olive | purple | green | navy | teal |
| dodgerblue | peachpuff | tan | firebrick | aquamarine |
对于更多存在的名字的颜色命名, 你可以参看CSS 3颜色模块中的: SVG color keywords 部分. 一定要注意的是，使用名字命名颜色的时候，有可能用户的浏览器是不支持的。
对于更多地颜色，你可以使用代表红，绿，蓝三个颜色的16进制数字来表示。16进制数字的范围0-9，a-f。其中a-f代表的数值就是10-15：
| 黑 | #000 |
|
| 纯 红 | #f00 |
|
| 纯 绿 | #0f0 |
|
| 纯 蓝 | #00f |
|
| 白 | #fff |
要得到浏览器能够呈现的所有的颜色，你就得使用两个16进制来表示（也就是6位）:
| 黑 | #000000 |
|
| 纯红 | #ff0000 |
|
| 纯绿 | #00ff00 |
|
| 纯蓝 | #0000ff |
|
| 白 | #ffffff |
你能够从你的画图程序或者其他的工具上得到6位的颜色数值.
可以通过调整3位数字来得到不同的颜色:
| 从纯红开始: | #f00 |
|
| 让它淡一点，加一些绿色和蓝色: | #f77 |
|
| 让它更偏橙色一些，多加一些绿色: | #fa7 |
|
| 让它更深一些，所有的颜色部分，红，绿，蓝都要减少: | #c74 |
|
| 让它的饱和度更低一些，所有的颜色值都调整到差不多大小: | #c98 |
|
| 如果所有的颜色值都相等，那么就变成了灰色: | #ccc |
对于浅色，比如说淡蓝色:
| 从纯白色开始: | #fff |
|
| 稍微降低一下各个颜色值: | #eef |
还能够通过RGB值（0-255或者是百分比值），来得到颜色
比如，下面是深红色的RGB表示法:
rgb(128, 0, 0)
对于如何指定颜色的所有信息，可以参看 CSS规范中的: Colors 部分.
更多关于系统颜色的说明，比如菜单、树等，可以参看CSS规范中得: CSS2 System Colors 部分.
颜色属性
你已经在文本中使用了 color 属性.
同样可以使用background-color 属性来改变元素的背景色.
背景色可以设置 transparent 属性来移除掉所有的颜色，呈现出父元素的背景色
在本指南中，例如 文本框使用了淡黄色来表示背景色：
background-color: #fffff4;
更多细节 文本框使用了下面的淡灰色 :
background-color: #f4f4f4;
实践: 使用颜色代码
- 编辑你的CSS文件.
- 下面用粗体显示的部分，表示首字母用淡蓝色显示. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)
/*** CSS 手册: 颜色页面 ***/ /* 页面 字体 */ body {font: 16px "Comic Sans MS", cursive;} /* 段落 */ p {color: blue;} #first {font-style: italic;} /* 首字母 */ strong { color: red; background-color: #ddf; font: 200% serif; } .carrot {color: red;} .spinach {color: green;} - 保存文件，刷新浏览器看结果.
| Cascading Style Sheets |
| Cascading Style Sheets |
在你的CSS文件中，把所有的代码颜色的名字用3位16进制数字的方式表示出来.
(不能完全做出来，不过能够最的很接近。如果要准备的表示颜色名字的话，需要6位16进制你需要查一下CSS规范或者是工具来得到一致的颜色.)
The following values are reasonable approximations of the named colors:
strong {
color: #f00; /* red */
background-color: #ddf; /* pale blue */
font: 200% serif;
}
.carrot {
color: #fa0; /* orange */
}
.spinach {
color: #080; /* dark green */
}
p {
color: #00f; /* blue */
}
Hide solution
下一步?
Go to Next Section:
内容. 示例文本和示例样式表是严格分开的。在 下一节 将介绍在什么情况下可以允许他们不分开.