color
Omaisuus CSS asettaa tekstin väriä ja tekstin koristeet.
p ( color: blue; )
Arvot
color
Omaisuus voi hyväksyä CSS väriarvo.
- Nimetyt värit: esimerkiksi "aqua".
- Hex-värit: esimerkiksi # 00FFFF tai # 0FF.
- RGB- ja RGBa-värit: esimerkiksi rgb (0, 255, 255) ja rgba (0, 255, 255, .5).
- HSL- ja HSLa-värit: esimerkiksi hsl (180, 100%, 50%) ja hsla (180, 100%, 50%, .5).
Nimetty värit
p ( color: aqua; )
Nimettyjä värejä kutsutaan myös avainsanaväreiksi, X11-väreiksi tai SVG-väreiksi. Kaikki nimetyt värit ovat oletusarvoisesti läpinäkymättömiä lukuun ottamatta transparent
, joka on täysin läpinäkyvä tai "kirkas". Katso nimettyjen värien ja kuusikulmien vastaavista katkelma luettelo nimetyistä väreistä.
Hex Colors
Hex-värit tai heksadesimaalivärit määritetään aakkosnumeerisilla arvoilla. Ensimmäinen merkkipari edustaa punaista arvoa, toinen pari edustaa vihreää arvoa ja kolmas pari edustaa sinistä arvoa, kaikki alueella 00 - FF.
p ( color: #00FFFF; )
Jos punaisen, sinisen ja vihreän arvon parit ovat kaksinkertaisia, voit lyhentää heksadesimaaliluvun 3-merkkiseksi lyhenteeksi - esimerkiksi # 00FFFF voidaan lyhentää muotoon # 0FF.
.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )
RGB- ja RGBa-värit
RGB-värit määritetään pilkulla erotetulla luettelolla, joka sisältää kolme numeerista arvoa (vaihteluväli 0-255) tai prosenttiosuutta (vaihtelee 0-100%). Ensimmäinen arvo edustaa punaista, toinen vihreää ja kolmas sinistä. RGB-värit ovat oletusarvoisesti läpinäkymättömiä.
p ( color: rgb(0, 255, 255); )
RGBa lisää alfakanavalle neljännen arvon, joka asettaa värin peittävyyden. Alfa-arvo on luku alueella 0,0 (täysin läpinäkyvä) - 1 (täysin läpinäkymätön).
p ( color: rgba(0, 255, 255, .5); )
HSL- ja HSLa-värit
HSL-värit määritetään pilkulla erotetulla luettelolla, jossa on kolme arvoa: sävyn aste (luku vaihtelee välillä 0-360), kyllästysprosentti (vaihtelee välillä 0% - 100%) ja vaaleusaste (vaihtelee välillä 0%). 100%). HSL-värit ovat oletuksena läpinäkymättömiä.
p ( color: hsl(180, 100%, 50%); )
HSLa lisää alfa-kanavalle neljännen arvon värin opasiteetin hallitsemiseksi. Alfa-arvo on luku alueella 0,0 (täysin läpinäkyvä) - 1 (täysin läpinäkymätön).
p ( color: hsla(180, 100%, 50%, .5); )
Demo
Katso CSS-Tricksin kynän väriarvot (@ css-tricks) CodePenistä.
Käyttöohjeet
color
Omaisuutta porrastetusti. Jos asetat sen rungolle, kaikki jälkeläisosat perivät kyseisen värin, ellei niillä ole omia värejä käyttäjäagentin tyylitaulukossa.
Reunat perivät, color
ellei väri-arvoa ole määritelty border
ilmoituksessa.
Tämä color
ominaisuus koskee text-decoration
linjoja. text-decoration-color
Ominaisuutta tukevissa selaimissa voit määrittää eri värit tekstille ja sen koristeviivoille.
color
pätee myös luettelokohdan merkkeihin (kuten luettelomerkit ja numerot). Et voi asettaa erillistä väriä luettelokohde -merkinnälle, mutta voit korvata sen omalla kuvalla list-style
.
Vaikka nimetyissä väreissä ja kuusikulmaisissa väreissä ei ole alfa-kanavia, voit asettaa niiden peittävyyden opacity
ominaisuudella kaikissa nykyisissä selaimissa ja IE9 +: ssa.
Liittyvät
font
text-decoration-color
opacity
Lisää tietoa
color
W3C-määrityksessäcolor
osoitteessa MDN- CSS-Tricks-artikkeli Yay for HSLa
Selaimen tuki
Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
---|---|---|---|---|---|---|
Minkä tahansa | Minkä tahansa | Minkä tahansa | Minkä tahansa | Minkä tahansa * | Minkä tahansa | Minkä tahansa |
* IE9 + tukee HSL: ää, HSLa: ta ja RGBa: ta.