Väri - CSS-temppuja

Anonim

colorOmaisuus CSS asettaa tekstin väriä ja tekstin koristeet.

p ( color: blue; )

Arvot

colorOmaisuus 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

colorOmaisuutta 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, colorellei väri-arvoa ole määritelty borderilmoituksessa.

Tämä colorominaisuus koskee text-decorationlinjoja. text-decoration-colorOminaisuutta tukevissa selaimissa voit määrittää eri värit tekstille ja sen koristeviivoille.

colorpä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 opacityominaisuudella 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.