关于: 颜色
到目前为止,在这个系列中,都很少用到用名字命名的颜色属性。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 部分.