CSS wettige kleurwaardes
CSS kleure
Kleure in CSS kan deur die volgende metodes gespesifiseer word:
- Heksadesimale kleure
- Heksadesimale kleure met deursigtigheid
- RGB kleure
- RGBA kleure
- HSL kleure
- HSLA kleure
- Vooraf gedefinieerde/kruisblaaier-kleurname
- Met die
currentcolorsleutelwoord
Heksadesimale kleure
'n Heksadesimale kleur word gespesifiseer met: #RRGGBB, waar die RR (rooi), GG (groen) en BB (blou) heksadesimale heelgetalle die komponente van die kleur spesifiseer. Alle waardes moet tussen 00 en FF wees.
Byvoorbeeld, die #0000ff-waarde word as blou weergegee, omdat die blou komponent op sy hoogste waarde (ff) gestel is en die ander op 00 gestel is.
Voorbeeld
Definieer verskillende HEX-kleure:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Heksadesimale kleure met deursigtigheid
'n Heksadesimale kleur word gespesifiseer met: #RRGGBB. Om deursigtigheid by te voeg, voeg twee bykomende syfers tussen 00 en FF by.
Voorbeeld
Definieer verskillende HEX-kleure met deursigtigheid:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
RGB-kleure
'n RGB-kleurwaarde word gespesifiseer met die rgb()-funksie , wat die volgende sintaksis het:
rgb(red, green, blue)
Elke parameter (rooi, groen en blou) definieer die intensiteit van die kleur en kan 'n heelgetal tussen 0 en 255 of 'n persentasiewaarde (van 0% tot 100%) wees.
Byvoorbeeld, die rgb(0,0,255)-waarde word as blou weergegee, want die blou parameter is op sy hoogste waarde (255) gestel en die ander is op 0 gestel.
Die volgende waardes definieer ook gelyke kleur: rgb(0,0,255) en rgb(0%,0%,100%).
Voorbeeld
Definieer verskillende RGB-kleure:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
RGBA kleure
RGBA-kleurwaardes is 'n uitbreiding van RGB-kleurwaardes met 'n alfakanaal - wat die ondeursigtigheid van die voorwerp spesifiseer.
'n RGBA-kleur word gespesifiseer met die rgba()-funksie , wat die volgende sintaksis het:
rgba(red, green, blue, alpha)
Die alfa-parameter is 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (ten volle ondeursigtig).
Voorbeeld
Definieer verskillende RGB-kleure met ondeursigtigheid:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
HSL Kleure
HSL staan vir tint, versadiging en ligtheid - en verteenwoordig 'n silindriese-koördinaat voorstelling van kleure.
'n HSL-kleurwaarde word gespesifiseer met die hsl()-funksie , wat die volgende sintaksis het:
hsl(hue, saturation, lightness)
Tint is 'n graad op die kleurwiel (van 0 tot 360) - 0 (of 360) is rooi, 120 is groen, 240 is blou. Versadiging is 'n persentasiewaarde; 0% beteken 'n skakering van grys en 100% is die volkleur. Ligte is ook 'n persentasie; 0% is swart, 100% is wit.
Voorbeeld
Definieer verskillende HSL-kleure:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA kleure
HSLA-kleurwaardes is 'n uitbreiding van HSL-kleurwaardes met 'n alfakanaal - wat die ondeursigtigheid van die voorwerp spesifiseer.
'n HSLA-kleurwaarde word gespesifiseer met die hsla()-funksie , wat die volgende sintaksis het:
hsla(hue, saturation, lightness, alpha)
Die alfa-parameter is 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (ten volle ondeursigtig).
Voorbeeld
Definieer verskillende HSL-kleure met ondeursigtigheid:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Vooraf gedefinieerde/kruisblaaierkleurname
140 kleurname is vooraf gedefinieer in die HTML- en CSS-kleurspesifikasie.
Byvoorbeeld: blue, red, coral, brown, ens:
Voorbeeld
Definieer verskillende kleurname:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
'n Lys van alle vooraf gedefinieerde name kan gevind word in ons Kleurname Verwysing .
Die huidige kleur sleutelwoord
Die currentcolorsleutelwoord verwys na die waarde van die kleureienskap van 'n element.
Voorbeeld
Die randkleur van die volgende <div>-element sal blou wees, want die tekskleur van die <div>-element is blou:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}