Barva - CSS-triki

Anonim

colorHotel v CSS nastavi barvo besedila in besedila dekoracije.

p ( color: blue; )

Vrednote

colorPremoženje lahko sprejme katero koli barvo CSS vrednosti.

  • Imenovane barve: na primer "aqua".
  • Šestnajstiške barve: na primer # 00FFFF ali # 0FF.
  • Barvi RGB in RGBa: na primer rgb (0, 255, 255) in rgba (0, 255, 255, .5).
  • Barvi HSL in HSLa: na primer hsl (180, 100%, 50%) in hsla (180, 100%, 50%, .5).

Poimenovane barve

p ( color: aqua; )

Poimenovane barve so znane tudi kot barve ključnih besed, barve X11 ali barve SVG. Vse imenovane barve so privzeto neprozorne, razen transparent, če je popolnoma prozorna ali "jasna". Za seznam imenovanih barv si oglejte delček Named Colors in Hex Equivalents.

Hex Barve

Šestnajstiške ali šestnajstiške barve so določene z alfanumeričnimi vrednostmi. Prvi par znakov predstavlja rdečo vrednost, drugi par predstavlja zeleno vrednost, tretji par pa modro vrednost, vse v območju od 00 do FF.

p ( color: #00FFFF; )

Če so pari rdečih, modrih in zelenih vrednosti dvojni, lahko šestnajstiško vrednost skrajšate na 3-mestno okrajšavo - na primer # 00FFFF lahko skrajšate na # 0FF.

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

RGB in RGBa barve

Barve RGB so določene s seznamom treh številskih vrednosti (v območju od 0 do 255) ali z odstotki (od 0% do 100%), ločenih z vejico. Prva vrednost predstavlja rdečo vrednost, druga predstavlja zeleno vrednost, tretja pa modro vrednost. Barve RGB so privzeto neprozorne.

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

RGBa doda četrto vrednost za alfa kanal, ki nastavi neprosojnost barve. Vrednost alfa je število v območju od 0,0 (popolnoma pregledno) do 1 (popolnoma neprozorno).

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

Barve HSL in HSLa

Barve HSL so določene s seznamom treh vrednosti, ločenih z vejico: stopnja odtenka (število od 0 do 360), odstotek nasičenosti (od 0% do 100%) in odstotek svetlosti (od 0% do 100%). Barve HSL so privzeto neprozorne.

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

HSLa doda četrto vrednost za alfa kanal za nadzor neprosojnosti barve. Vrednost alfa je število v območju od 0,0 (popolnoma pregledno) do 1 (popolnoma neprozorno).

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

Demo

Oglejte si vrednosti barv pisala s CSS-triki (@ css-triki) na CodePen.

Opombe o uporabi

Na colorlastnine kaskade. Če jo nastavite na telesu, jo bodo podedovali vsi potomci, razen če imajo v seznamu stilov uporabniškega sredstva lastne barve.

Meje podedujejo, colorrazen če je v borderizjavi navedena barvna vrednost .

colorLastnost velja za text-decorationlinij. V brskalnikih, ki podpirajo text-decoration-colorlastnost, lahko določite različne barve besedila in njegove okrasne črte.

colorvelja tudi za označevalce elementov seznama (na primer točke in številke). Za označevalnik elementa seznama ne morete nastaviti ločene barve, lahko pa ga nadomestite s sliko z list-stylelastnostjo.

Čeprav imenovane barve in šestnajstiške barve nimajo alfa kanalov, lahko njihovo neprosojnost nastavite z opacitylastnostjo v vseh trenutnih brskalnikih in IE9 +.

Sorodno

  • font
  • text-decoration-color
  • opacity

Več informacij

  • color v specifikaciji W3C
  • color na MDN
  • Članek CSS-triki Yay za HSLa

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Kaj Kaj Kaj Kaj Kaj * Kaj Kaj

* HSL, HSLa in RGBa so podprti v IE9 +.