色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS 顏色

CSS 顏色

使用CSS時，您可以指定不同方式范圍內的顏色。

我們可以使用預定義的顏色名稱。或者我們可以為每個紅色，綠色和藍色組件使用十進制或十六進制值。

十進制值由逗號分隔，十六進制值為通常以＃為前綴，如#ffffff，表示白色。

下表具有一些預定義的顏色名稱及其十進制和十六進制等效值。

顏色名稱十六進制十進制
black#0000000,0,0
green#0080000,128,0
silver#C0C0C0192,192,192
lime#00FF000,255,0
gray#808080128,128,128
olive#808000128,128,0
white#FFFFFF255,255,255
yellow#FFFF00255,255,0
maroon#800000128,0,0
navy#0000800,0,128
red#FF0000255,0,0
blue#0000FF0,0,255
purple#800080128,0,128
teal#0080800,128,128
aqua#00FFFF0,255,255

這些被稱為基本顏色名稱。

下表顯示了可以使用的擴展灰度陰影。

顏色名稱十六進制十進制
darkgray#a9a9a9169,169,169
darkslategray#2f4f4f47,79,79
dimgray#696969105,105,105
gray#808080128,128,128
lightgray#d3d3d3211,211,211
lightslategray#778899119,136,153
slategray#708090112,128,144

RGB值簡寫

對紅色，綠色和藍色分量使用十六進制值。每對都是十六進制符號，范圍為00 - FF。

十六進制值通常以＃作為前綴，如#ffffff，表示白色。 “純”藍色將被寫入＃0000FF，“純”紅色被寫入＃FF0000。

#RGB是上述六位數符號的較短形式。在此格式中，每個數字都被復制以獲得等效的六位數值，例如＃F7C變為＃FF77CC。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
body {
    background-color: yellow;
}

div#one {
    width: 50px;
    height: 50px;
    border: 1px solid rgb(128, 128, 128);
    margin: 5px;
    float: left;
    background-color: #000;
}
        </style>
    </head>
    <body>
        <div id="one"></div>
    </body>
</html>

顏色函數

顏色名稱和簡單的十六進制值不是您可以指定顏色的唯一方法。

有許多函數允許您選擇顏色。

  • rgb（r，g，b）使用RGB模型指定顏色。
    示例：rgb（112，128，144）
  • rgba（r，g，b，a）使用RGB模型指定顏色，添加了alpha值以指定不透明度。 值為0是完全透明的; 值為1是完全不透明的。
    示例：rgba（112，128，144，0.4）
  • hsl（h，s，l）使用色相，飽和度和亮度（HSL）模型指定顏色。
    示例：hsl（120,100％，22％）
  • hsla（h，s，l，a）使用alpha值來指定不透明度。
    示例：hsla（120,100％，22％，0.4）

rgb(rrr.rr％，ggg.gg％，bbb.bb％)使用0％到100％范圍內的RGB值，允許十進制值（例如75.5％）。因此，黑色的值將是rgb（0％，0％，0％），而藍色將是rgb（0％，0％，100％）。

在rgb(rrr，ggg，bbb)中，接受的值范圍是0-255。范圍是十六進制的00-FF的十進制等效值。在此格式中，綠色將為rgb（0,255,0），白色將表示為rgb（255,255,255）。

下表列出了顏色名稱，十六進制顏色值和rgb顏色值。

顏色HEXCOLORRGB顏色
Black#000000rgb(0,0,0)
Red#FF0000rgb(255,0,0)
Green#00FF00rgb(0,255,0)
Blue#0000FFrgb(0,0,255)
Yellow#FFFF00rgb(255,255,0)
Cyan#00FFFFrgb(0,255,255)
Magenta#FF00FFrgb(255,0,255)
Gray#C0C0C0rgb(192,192,192)
White#FFFFFFrgb(255,255,255)

以下代碼顯示如何使用色彩函數。

<!DOCTYPE HTML> 
<html> 
<body> 
    <p style="background-color:#C0C0C0"> 
    Color set by using hex value 
    </p> 
    <p style="background-color:rgb(192,192,192)"> 
    Color set by using rgb value 
    </p> 
    <p style="background-color:gray"> 
    Color set by using color name 
    </p> 
</body> 
</html>

在上面的代碼中，我們使用各種形式的顏色值來設置段落的背景顏色。


CSS3中的擴展顏色關鍵字

顏色名稱十六進制RGB
 aliceblue#f0f8ff240，248，255
 antiquewhite#faebd7250，235，215
 aqua#00ffff0，255，255
 aquamarine#7fffd4127，255，212
 azure#f0ffff240，255，255
 beige#f5f5dc245，245，220
 bisque#ffe4c4255，228，196
 black#0000000，0，0
 blanchedalmond#ffebcd255，235，205
 blue#0000ff0，0，255
 blueviolet#8a2be2138，43，226
 brown#a52a2a165，42，42
 burlywood#deb887222，184，135
 cadetblue#5f9ea095，158，160
 chartreuse#7fff00127，255，0
 chocolate#d2691e210，105，30
 coral#ff7f50255，127，80
 cornflowerblue#6495ed100，149，237
 cornsilk#fff8dc255，248，220
 crimson#dc143c220，20，60
 cyan#00ffff0，255，255
 darkblue#00008b0，0，139
 darkcyan#008b8b0，139，139
 darkgoldenrod#b8860b184，134，11
 darkgray#a9a9a9169，169，169
 darkgreen#0064000，100，0
 darkgrey#a9a9a9169，169，169
 darkkhaki#bdb76b189，183，107
 darkmagenta#8b008b139，0，139
 darkolivegreen#556b2f85，107，47
 darkorange#ff8c00255，140，0
 darkorchid#9932cc153，50，204
 darkred#8b0000139，0，0
 darksalmon#e9967a233，150，122
 darkseagreen#8fbc8f143，188，143
 darkslateblue#483d8b72，61，139
 darkslategray#2f4f4f47，79，79
 darkslategrey#2f4f4f47，79，79
 darkturquoise#00ced10，206，209
 darkviolet#9400d3148，0，211
 deeppink#ff1493255，20，147
 deepskyblue#00bfff0，191，255
 dimgray#696969105，105，105
 dimgrey#696969105，105，105
 dodgerblue#1e90ff30，144，255
 firebrick#b22222178，34，34
 floralwhite#fffaf0255，250，240
 forestgreen#228b2234，139，34
 fuchsia#ff00ff255，0，255
 gainsboro#dcdcdc220，220，220
 ghostwhite#f8f8ff248，248，255
 gold#ffd700255，215，0
 goldenrod#daa520218，165，32
 gray#808080128，128，128
 green#0080000，128，0
 greenyellow#adff2f173，255，47
 grey#808080128，128，128
 honeydew#f0fff0240，255，240
 hotpink#ff69b4255，105，180
 indianred#cd5c5c205，92，92
 indigo#4b008275，0，130
 ivory#fffff0255，255，240
 khaki#f0e68c240，230，140
 lavender#e6e6fa230，230，250
 lavenderblush#fff0f5255，240，245
 lawngreen#7cfc00124，252，0
 lemonchiffon#fffacd255，250，205
 lightblue#add8e6173，216，230
 lightcoral#f08080240，128，128
 lightcyan#e0ffff224，255，255
 lightgoldenrodyellow#fafad2250，250，210
 lightgray#d3d3d3211，211，211
 lightgreen#90ee90144，238，144
 lightgrey#d3d3d3211，211，211
 lightpink#ffb6c1255，182，193
 lightsalmon#ffa07a255，160，122
 lightseagreen#20b2aa32，178，170
 lightskyblue#87cefa135，206，250
 lightslategray#778899119，136，153
 lightslategrey#778899119，136，153
 lightsteelblue#b0c4de176，196，222
 lightyellow#ffffe0255，255，224
 lime#00ff000，255，0
 limegreen#32cd3250，205，50
 linen#faf0e6250，240，230
 magenta#ff00ff255，0，255
 maroon#800000128，0，0
 mediumaquamarine#66cdaa102，205，170
 mediumblue#0000cd0，0，205
 mediumorchid#ba55d3186，85，211
 mediumpurple#9370db147，112，219
 mediumseagreen#3cb37160，179，113
 mediumslateblue#7b68ee123，104，238
 mediumspringgreen#00fa9a0，250，154
 mediumturquoise#48d1cc72，209，204
 mediumvioletred#c71585199，21，133
 midnightblue#19197025，25，112
 mintcream#f5fffa245，255，250
 mistyrose#ffe4e1255，228，225
 moccasin#ffe4b5255，228，181
 navajowhite#ffdead255，222，173
 navy#0000800，0，128
 oldlace#fdf5e6253，245，230
 olive#808000128，128，0
 olivedrab#6b8e23107，142，35
 orange#ffa500255，165，0
 orangered#ff4500255，69，0
 orchid#da70d6218，112，214
 palegoldenrod#eee8aa238，232，170
 palegreen#98fb98152，251，152
 paleturquoise#afeeee175，238，238
 palevioletred#db7093219，112，147
 papayawhip#ffefd5255，239，213
 peachpuff#ffdab9255，218，185
 peru#cd853f205，133，63
 pink#ffc0cb255，192，203
 plum#dda0dd221，160，221
 powderblue#b0e0e6176，224，230
 purple#800080128，0，128
 red#ff0000255，0，0
 rosybrown#bc8f8f188，143，143
 royalblue#4169e165，105，225
 saddlebrown#8b4513139，69，19
 salmon#fa8072250，128，114
 sandybrown#f4a460244，164，96
 seagreen#2e8b5746，139，87
 seashell#fff5ee255，245，238
 sienna#a0522d160，82，45
 silver#c0c0c0192，192，192
 skyblue#87ceeb135，206，235
 slateblue#6a5acd106，90，205
 slategray#708090112，128，144
 slategrey#708090112，128，144
 snow#fffafa255，250，250
 springgreen#00ff7f0，255，127
 steelblue#4682b470，130，180
 tan#d2b48c210，180，140
 teal#0080800，128，128
 thistle#d8bfd8216，191，216
 tomato#ff6347255，99，71
 turquoise#40e0d064，224，208
 violet#ee82ee238，130，238
 wheat#f5deb3245，222，179
 white#ffffff255，255，255
 whitesmoke#f5f5f5245，245，245
 yellow#ffff00255，255，0
 yellowgreen#9acd32154，205，50

例子

以下代碼顯示如何使用顏色名稱及其相應的RGB值和十六進制等效值。

<!DOCTYPE HTML>
<html>
<head>
<title>Named colors in CSS</title>
<style type="text/css">
table {border-spacing: 2em 1em;margin:25px auto;
}
caption {font-family:Tahoma, Geneva, sans-serif;font-weight:bold;font-size:20px;
}
td {border: #000 solid 1px;
  text-align:center;padding:10px;font-family:Tahoma, Geneva, sans-serif;font-size:14px;font-weight:bold;color:#FFF;width:7em;
  white-space: pre;
}
#aqua {background-color:aqua;
}
#black {background-color:black;
}
#blue {background-color:blue;
}
#fuchsia {background-color:fuchsia;
}
#gray {background-color:gray;
}
#green {background-color:green;
}
#lime {background-color:lime;
}
#maroon {background-color:maroon;
}
#navy {background-color:navy;
}
#olive {background-color:olive;
}
#purple {background-color:purple;
}
#red {background-color:red;
}
#silver {background-color:silver;
}
#teal {background-color:teal;
}
#white {background-color:white;
}
#yellow {background-color:yellow;
}
#aqua, #fuchsia, #lime, #red, #silver, #white, #yellow {color:black;
}
</style>
</head>

<body>
<table>
    <caption>
    Basic Color Keywords
    </caption>
    <tr>
        <td id="aqua">aqua
#00FFFF
0, 255, 255</td>
        <td id="black">black
#000000
0, 0, 0</td>
        <td id="blue">blue
#0000FF
0, 0, 255</td>
        <td id="fuchsia">fuchsia
#FF00FF
255, 0, 255</td>
    </tr>
    <tr>
        <td id="gray">gray
#808080
128, 128, 128</td>
        <td id="green">green
#008000
0, 128, 0</td>
        <td id="lime">lime
#00FF00
0, 255, 0</td>
        <td id="maroon">maroon
#800000
128, 0, 0</td>
    </tr>
    <tr>
        <td id="navy">navy
#000080
0, 0, 128</td>
        <td id="olive">olive
#808000
128, 128, 0</td>
        <td id="purple">purple
#800080
128, 0, 128</td>
        <td id="red">red
#FF0000
255, 0, 0</td>
    </tr>
    <tr>
        <td id="silver">silver
#C0C0C0
192, 192, 192</td>
        <td id="teal">teal
#008080
0, 128, 128</td>
        <td id="white">white
#FFFFFF
255, 255, 255</td>
        <td id="yellow">yellow
#FFFF00
255, 255, 0</td>
    </tr>
</table>
</body>
</html>

上面的代碼呈現如下：

css

顏色

擴展顏色關鍵字