CSS颜色

了解如何在CSS中使用颜色

默认情况下,就使用的颜色而言,Web浏览器呈现的HTML页面非常可悲。

我们有白色背景,黑色和蓝色链接。而已。

幸运的是,CSS使我们能够在设计中添加颜色。

我们具有以下属性:

  • color
  • background-color
  • border-color

他们所有人都接受颜色值,可以采用不同的形式。

命名的颜色

首先,我们有定义颜色的CSS关键字。 CSS从16开始,但是今天有很多颜色名称:

  • aliceblue
  • antiquewhite
  • aqua
  • aquamarine
  • azure
  • beige
  • bisque
  • black
  • blanchedalmond
  • blue
  • blueviolet
  • brown
  • burlywood
  • cadetblue
  • chartreuse
  • chocolate
  • coral
  • cornflowerblue
  • cornsilk
  • crimson
  • cyan
  • darkblue
  • darkcyan
  • darkgoldenrod
  • darkgray
  • darkgreen
  • darkgrey
  • darkkhaki
  • darkmagenta
  • darkolivegreen
  • darkorange
  • darkorchid
  • darkred
  • darksalmon
  • darkseagreen
  • darkslateblue
  • darkslategray
  • darkslategrey
  • darkturquoise
  • darkviolet
  • deeppink
  • deepskyblue
  • dimgray
  • dimgrey
  • dodgerblue
  • firebrick
  • floralwhite
  • forestgreen
  • fuchsia
  • gainsboro
  • ghostwhite
  • gold
  • goldenrod
  • gray
  • green
  • greenyellow
  • grey
  • honeydew
  • hotpink
  • indianred
  • indigo
  • ivory
  • khaki
  • lavender
  • lavenderblush
  • lawngreen
  • lemonchiffon
  • lightblue
  • lightcoral
  • lightcyan
  • lightgoldenrodyellow
  • lightgray
  • lightgreen
  • lightgrey
  • lightpink
  • lightsalmon
  • lightseagreen
  • lightskyblue
  • lightslategray
  • lightslategrey
  • lightsteelblue
  • lightyellow
  • lime
  • limegreen
  • linen
  • magenta
  • maroon
  • mediumaquamarine
  • mediumblue
  • mediumorchid
  • mediumpurple
  • mediumseagreen
  • mediumslateblue
  • mediumspringgreen
  • mediumturquoise
  • mediumvioletred
  • midnightblue
  • mintcream
  • mistyrose
  • moccasin
  • navajowhite
  • navy
  • oldlace
  • olive
  • olivedrab
  • orange
  • orangered
  • orchid
  • palegoldenrod
  • palegreen
  • paleturquoise
  • palevioletred
  • papayawhip
  • peachpuff
  • peru
  • pink
  • plum
  • powderblue
  • purple
  • rebeccapurple
  • red
  • rosybrown
  • royalblue
  • saddlebrown
  • salmon
  • sandybrown
  • seagreen
  • seashell
  • sienna
  • silver
  • skyblue
  • slateblue
  • slategray
  • slategrey
  • snow
  • springgreen
  • steelblue
  • tan
  • teal
  • thistle
  • tomato
  • turquoise
  • violet
  • wheat
  • white
  • whitesmoke
  • yellow
  • yellowgreen

tranparent, 和currentColor指向color属性,例如对于使border-color继承它。

它们在CSS Color Module, Level 4。它们不区分大小写。

href="百科百科有一个漂亮的桌子这样您就可以根据其名称选择理想的颜色。

命名的颜色不是唯一的选择。

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部分,该十六进制表示法由3个块组成。

黑色,这是rgb(0,0,0)表示为#000000或者#000(如果相等,我们可以将2个数字捷径为1)。

白色的,rgb(255,255,255)可以表示为#ffffff或者#fff

十六进制表示法可以用2位数字表示0到255之间的数字,因为它们可以从0到“ 15”(f)。

我们可以通过在末尾再添加1或2个数字来添加alpha通道#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)

免费下载我的CSS手册


更多CSS教程: