mozilla
您的搜索结果

    Color

    这是 CSS Getting Started 系列的第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;
    

     

    实践: 使用颜色代码

    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. 保存文件,刷新浏览器看结果.
    Cascading Style Sheets
    Cascading Style Sheets
    挑战

    在你的CSS文件中,把所有的代码颜色的名字用3位16进制数字的方式表示出来.

    (不能完全做出来,不过能够最的很接近。如果要准备的表示颜色名字的话,需要6位16进制你需要查一下CSS规范或者是工具来得到一致的颜色.)

    Possible solution

    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
    查看解决的方法.

    下一步?

    . 示例文本和示例样式表是严格分开的。在 下一节 将介绍在什么情况下可以允许他们不分开.

    文档标签和贡献者

    Contributors to this page: teoli, Chajn, ziyunfei, lilyh
    最后编辑者: ziyunfei,