颜色

来源:互联网 发布:刘邦打仗知乎 编辑:程序博客网 时间:2024/04/17 03:50

关于: 颜色

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

实践: 使用颜色代码

  1. 编辑你的CSS文件.

  2. 下面用粗体显示的部分,表示首字母用淡蓝色显示. (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;} 
  3. 保存文件,刷新浏览器看结果.

**C**ascading **S**tyle **S**heets **C**ascading **S**tyle **S**heets
0 0