zoukankan      html  css  js  c++  java
  • CSS 颜色的使用

    在 CSS 中我们可以设定用 color 和 background-color 设定元素的前景色和背景色。例如:

    a {
        color: #123456;
        background-color: #ABCDEF;
    }
    

    CSS2 中使用的是 24位 RGB 颜色:即一个颜色由红绿蓝三部分组成,每部分用两位 16 进制数表示,总共可以表示 2^24 = 16777216 种不同的颜色。在 RGB 颜色中,最小值 #000000 表示黑色,而最大值 #FFFFFF 表示白色,而 #FF0000,#00FF00 和 #0000FF 分别表示纯红色,纯绿色和纯蓝色。

    RGB 颜色值还有其它的表示方式:#3366CC 可以简写为 #36C,也可以用十进制来表示为 rgb(51,102,204),甚至可以用百分比来表示为 rgb(20%, 40%, 80%)。

    要记住各种常用颜色的 RGB 数值是不容易的,因此在 HTML 4.0 中定义了 16 种标准颜色名称:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow。而 CSS 2 中增加了 orange 颜色,我们也可以在 CSS 中直接使用这 17 种颜色名称。这些颜色以及对应的数值可以看这里

    实际上主流浏览器还支持更多的 X11 颜色名称,这些名称在 SVG 1.0 和 CSS 3 中被标准化,因此也可以放心地使用。这些颜色已经对应的数值可以看这里

    CSS 3 中还支持使用 HSL 色彩空间的颜色值,即用色相(Hue),饱和度(Saturation)和亮度(Lightness)来确定一个颜色。其中色相的取值为 0 到 360(不包含 360),它确定是什么颜色;而饱和度和亮度的取值为 0% 到 100%,它们分别确定颜色的深浅和明暗。颜色的这种 HSL 表示比 RGB 表示更加自然,也方便我们选取一组相同饱和度和亮度的颜色。

    要在 CSS 中使用 HSL 颜色,也很简单,例如 orange 颜色的 RGB 值为 #FFA500,我们用 HSL Picker 中可以看到它的 HSL 值为 hsl(39, 100%, 50%),因此在 CSS 文件中这样写就可以了:

    a {
        color: hsl(39, 100%, 50%)  
    }  

    另外,CSS3 中的也可以使用 rgba 和 hsla 方式的颜色,即在最后加上 alpha 值表示不透明度,alpha 值在 0 到 1 之间,0 表示完全透明,1表示完全不透明。

    参考资料:
    [1] W3C HTML 4.0 - Colors
    [2] W3C CSS 2 - Colors and Backgrounds
    [3] W3C CSS 2 - Color Units
    [4] W3C CSS 3 - Extended Color Keywords
    [5] W3C CSS 3 - HSL Color Values
    [6] Wikipedia - Web Colors
    [7] Wikipedia - HSL and HSV
    [8] Wikipedia - RGBA Color Space
    [9] HSL Color Picker - by Brandon Mathis

  • 相关阅读:
    1221D
    1249E
    D. Yet Another Monster Killing Problem
    大佬传送门
    Zookeeper客户端连接报错
    搭建PXC集群
    Docker分布式环境
    Docker使用
    Docker入门
    MySQL数据库集群概述
  • 原文地址:https://www.cnblogs.com/zoho/p/3111914.html
Copyright © 2011-2022 走看看