在默认情况下,网络浏览器对HTML页面所使用的颜色进行渲染时,是非常悲哀的。
我们有一个白色的背景,黑色的颜色,和蓝色的链接。仅此而已。
幸运的是,CSS让我们有能力为我们的设计添加颜色。
我们有这些属性。
colorbackground-colorborder-color
所有这些属性都接受一个颜色值,它可以有不同的形式。
命名的颜色
首先,我们有定义颜色的CSS关键字。CSS开始时只有16个,但现在已经有了大量的颜色名称。
aliceblueantiquewhiteaquaaquamarineazurebeigebisqueblackblanchedalmondbluebluevioletbrownburlywoodcadetbluechartreusechocolatecoralcornflowerbluecornsilkcrimsoncyandarkbluedarkcyandarkgoldenroddarkgraydarkgreendarkgreydarkkhakidarkmagentadarkolivegreendarkorangedarkorchiddarkreddarksalmondarkseagreendarkslatebluedarkslategraydarkslategreydarkturquoisedarkvioletdeeppinkdeepskybluedimgraydimgreydodgerbluefirebrickfloralwhiteforestgreenfuchsiagainsboroghostwhitegoldgoldenrodgraygreengreenyellowgreyhoneydewhotpinkindianredindigoivorykhakilavenderlavenderblushlawngreenlemonchiffonlightbluelightcorallightcyanlightgoldenrodyellowlightgraylightgreenlightgreylightpinklightsalmonlightseagreenlightskybluelightslategraylightslategreylightsteelbluelightyellowlimelimegreenlinenmagentamaroonmediumaquamarinemediumbluemediumorchidmediumpurplemediumseagreenmediumslatebluemediumspringgreenmediumturquoisemediumvioletredmidnightbluemintcreammistyrosemoccasinnavajowhitenavyoldlaceoliveolivedraborangeorangeredorchidpalegoldenrodpalegreenpaleturquoisepalevioletredpapayawhippeachpuffperupinkplumpowderbluepurplerebeccapurpleredrosybrownroyalbluesaddlebrownsalmonsandybrownseagreenseashellsiennasilverskyblueslateblueslategrayslategreysnowspringgreensteelbluetantealthistletomatoturquoisevioletwheatwhitewhitesmokeyellowyellowgreen
加上tranparent ,以及currentColor ,它指向color 属性,比如说有用,可以使border-color 继承它。
它们被定义在CSS颜色模块的第4层。它们是不分大小写的。
维基百科有一个很好的表格,可以让你通过它的名字挑选出完美的颜色。
命名的颜色不是唯一的选择。
RGB和RGBa
你可以使用rgb() ,从RGB符号中计算出一种颜色,它根据红-绿-蓝部分来设置颜色。从0到255。
p {
color: rgb(255, 255, 255); /* white */
background-color: rgb(0, 0, 0); /* black */
}
rgba() 让你添加alpha通道来输入透明部分。这可以是一个从0到1的数字。
p {
background-color: rgba(0, 0, 0, 0.5);
}
十六进制记号
另一个选择是用十六进制符号来表达颜色的RGB部分,它由三个区块组成。
黑色,即rgb(0,0,0) ,可表示为#000000 或#000 (如果这两个数字相等,我们可以把它们简化为1)。
白色,rgb(255,255,255) ,可以表示为#ffffff 或#fff 。
十六进制符号可以用2位数字表示0到255,因为它们可以从0到 "15"(f)。
我们可以通过在末尾增加1或2位数字来增加阿尔法通道,例如:#00000033 。不是所有的浏览器都支持缩短的符号,所以要用全部6位数字来表达RGB部分。
HSL和HSLa
这是最近才加入CSS的。
HSL = 色相饱和度亮度。
在这个符号中,黑色是hsl(0, 0%, 0%) ,白色是hsl(0, 0%, 100%) 。
如果你因为过去的知识而对HSL比RGB更熟悉的话,你肯定可以使用这个。
你还有hsla() ,它在混合中加入了alpha通道,同样是一个从0到1的数字。hsl(0, 0%, 0%, 0.5)