Spalva - CSS-gudrybės

Anonim

colorCSS nuosavybė nustato teksto ir teksto dekoracijos spalvą.

p ( color: blue; )

Vertybės

colorTurtas gali priimti bet kokį CSS spalvų reikšmę.

  • Pavadintos spalvos: pavyzdžiui, „aqua“.
  • Šešiakampės spalvos: pavyzdžiui, # 00FFFF arba # 0FF.
  • RGB ir RGBa spalvos: pavyzdžiui, rgb (0, 255, 255) ir rgba (0, 255, 255, .5).
  • HSL ir HSLa spalvos: pavyzdžiui, hsl (180, 100%, 50%) ir hsla (180, 100%, 50%, .5).

Pavadintos spalvos

p ( color: aqua; )

Pavadintos spalvos taip pat žinomos kaip raktinių žodžių spalvos, X11 spalvos arba SVG spalvos. Visos nurodytos spalvos pagal numatytuosius nustatymus yra nepermatomos, išskyrus transparentvisiškai skaidrias arba „aiškias“. Pavadintų spalvų ir šešiakampių ekvivalentų fragmente rasite išvardytų spalvų sąrašą.

Šešiakampės spalvos

Šešiakampės arba šešioliktainės spalvos nurodomos raidėmis ir skaitmenimis. Pirmoji simbolių pora reiškia raudoną vertę, antroji - žalią vertę, o trečioji - mėlyną vertę, visi diapazone nuo 00 iki FF.

p ( color: #00FFFF; )

Jei raudonos, mėlynos ir žalios reikšmių poros yra dvigubos, šešiakampę reikšmę galite sutrumpinti iki 3 simbolių trumpinio - pavyzdžiui, # 00FFFF galima sutrumpinti į # 0FF.

.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )

RGB ir RGBa spalvos

RGB spalvos nurodomos kableliais atskirtu trijų skaitinių verčių (nuo 0 iki 255) arba procentinių verčių (nuo 0% iki 100%) sąrašu. Pirmoji reikšmė reiškia raudoną, antroji - žalią, o trečia - mėlyną. Pagal numatytuosius nustatymus RGB spalvos yra nepermatomos.

p ( color: rgb(0, 255, 255); )

RGBa prideda ketvirtą alfa kanalo vertę, kuri nustato spalvos neskaidrumą. Alfa vertė yra skaičius nuo 0,0 (visiškai skaidrus) iki 1 (visiškai nepermatomas).

p ( color: rgba(0, 255, 255, .5); )

HSL ir HSLa spalvos

HSL spalvos nurodomos kableliais atskiriant trijų verčių sąrašą: atspalvio laipsnis (skaičius svyruoja nuo 0 iki 360), sodrumo procentas (nuo 0% iki 100%) ir lengvumo procentas (nuo 0% iki 100%). Pagal numatytuosius nustatymus HSL spalvos yra nepermatomos.

p ( color: hsl(180, 100%, 50%); )

„HSLa“ prideda ketvirtą alfa kanalo vertę, kad valdytų spalvos neskaidrumą. Alfa vertė yra skaičius nuo 0,0 (visiškai skaidrus) iki 1 (visiškai nepermatomas).

p ( color: hsla(180, 100%, 50%, .5); )

Demonstracija

Peržiūrėkite „CSS-Tricks“ rašiklio spalvų vertes (@ css-tricks) „CodePen“.

Naudojimo pastabos

Į colornuosavybės kaskadomis. Jei nustatysite ją ant kūno, visi palikuonių elementai paveldės tą spalvą, nebent jie turės savo spalvą vartotojo agento stiliaus lape.

Kraštinės paveldi, colornebent borderdeklaracijoje nurodyta spalvos vertė .

colorNuosavybė taikoma text-decorationlinijų. Naršyklėse, palaikančiose text-decoration-colornuosavybę, galite nurodyti skirtingas teksto ir jo apdailos linijų spalvas.

colortaip pat taikoma sąrašo elementų žymekliams (pvz., taškams ir skaičiams). Negalite nustatyti atskiros sąrašo elemento žymeklio spalvos, tačiau galite ją pakeisti atvaizdu su list-styleypatybe.

Nors pavadintose ir šešioliktainėse spalvose nėra alfa kanalų, galite nustatyti jų neskaidrumą naudodami opacitynuosavybę visose dabartinėse naršyklėse ir IE9 +.

Susijęs

  • font
  • text-decoration-color
  • opacity

Daugiau informacijos

  • color W3C specifikacijoje
  • color MDN
  • CSS-Tricks straipsnis „Yay for HSLa“

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Bet koks Bet koks Bet koks Bet koks Bet koks * Bet koks Bet koks

* IE9 + palaiko HSL, HSLa ir RGBa.