核心提示:关于: 颜色到目前为止,在这个系列中,都很少用到用名字命名的颜色属性。CSS2支持17种名字的颜色。其中有一些可能不像你期望的那样,如下图:				black			gray			silver			wh...
       关于: 颜色
到目前为止,在这个系列中,都很少用到用名字命名的颜色属性。CSS2支持17种名字的颜色。其中有一些可能不像你期望的那样,如下图:
| black | gray | silver | white | |||
|---|---|---|---|---|---|---|
| 主要的 | red | lime | blue | |||
| 次要 | yellow | aqua | fuchsia | |||
| maroon | orange | olive | purple | green | navy | 
对于更多地颜色,你可以使用代表红,绿,蓝三个颜色的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 | 
更多细节
还能够通过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;} 
保存文件,刷新浏览器看结果.
| **C**ascading**S**tyle**S**heets | 
|---|
| **C**ascading**S**tyle**S**heets | 



 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                 
            
                