Boja - CSS-trikovi

Anonim

colorNekretnina u CSS postavlja boju teksta i teksta ukrasa.

p ( color: blue; )

Vrijednosti

colorImovine može prihvatiti bilo koju vrijednost CSS boje.

  • Imenovane boje: na primjer, "aqua".
  • Šesterostrane boje: na primjer, # 00FFFF ili # 0FF.
  • RGB i RGBa boje: na primjer, rgb (0, 255, 255) i rgba (0, 255, 255, .5).
  • HSL i HSLa boje: na primjer, hsl (180, 100%, 50%) i hsla (180, 100%, 50%, .5).

Imenovane boje

p ( color: aqua; )

Imenovane boje poznate su i kao boje ključnih riječi, boje X11 ili SVG boje. Sve imenovane boje prema zadanim su postavkama neprozirne, osim transparentšto je potpuno prozirno ili "bistro". Popis imenovanih boja potražite u našem isječku Imenovane boje i Hex ekvivalenti.

Hex boje

Heksadecimalne boje ili heksidicimalne boje navedene su s alfanumeričkim vrijednostima. Prvi par znakova predstavlja crvenu vrijednost, drugi par predstavlja zelenu vrijednost, a treći par predstavlja plavu vrijednost, sve u rasponu od 00 do FF.

p ( color: #00FFFF; )

Ako su parovi crvene, plave i zelene vrijednosti dvostruki, heksadecimalnu vrijednost možete skratiti u skraćenicu od 3 znaka - na primjer, # 00FFFF može se skratiti u # 0FF.

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

RGB i RGBa boje

RGB boje navode se popisom od tri numeričke vrijednosti (u rasponu od 0 do 255) ili postotnim vrijednostima (u rasponu od 0% do 100%) odvojenim zarezom. Prva vrijednost predstavlja crvenu vrijednost, druga predstavlja zelenu vrijednost, a treća predstavlja plavu vrijednost. RGB boje su prema zadanim postavkama neprozirne.

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

RGBa dodaje četvrtu vrijednost za alfa kanal, koja postavlja neprozirnost boje. Alfa vrijednost je broj u rasponu od 0,0 (potpuno proziran) do 1 (potpuno neproziran).

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

HSL i HSLa boje

HSL boje određene su popisom odvojenih zarezom od tri vrijednosti: stupanj Hue (broj u rasponu od 0 do 360), postotak zasićenja (u rasponu od 0% do 100%) i postotak svjetlosti (u rasponu od 0% do 100%). HSL boje su prema zadanim postavkama neprozirne.

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

HSLa dodaje četvrtu vrijednost za alfa kanal za kontrolu neprozirnosti boje. Alfa vrijednost je broj u rasponu od 0,0 (potpuno proziran) do 1 (potpuno neproziran).

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

Demo

Pogledajte vrijednosti boja olovke od CSS-trikova (@ css-trikovi) na CodePenu.

Napomene o korištenju

The colorproperty kaskade. Ako ga postavite na tijelo, svi će potomci naslijediti tu boju, osim ako u tablici stilova korisničkog agenta nemaju vlastitu boju.

Granice se nasljeđuju colorukoliko vrijednost boje nije navedena u borderdeklaraciji.

colorImovine se odnosi na text-decorationlinije. U preglednicima koji podržavaju text-decoration-colorsvojstvo možete odrediti različite boje za tekst i njegove linije ukrasa.

colortakođer se odnosi na oznake stavki na popisu (poput točaka i brojeva). Ne možete postaviti zasebnu boju za označivač stavke popisa, ali možete je zamijeniti slikom sa list-stylesvojstvom.

Iako imenovane boje i hex boje nemaju alfa kanale, neprozirnost možete postaviti opacitysvojstvom u svim trenutnim preglednicima i IE9 +.

Povezano

  • font
  • text-decoration-color
  • opacity

Više informacija

  • color u specifikaciji W3C
  • color na MDN
  • CSS-trikovi članak Yay za HSLa

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
Bilo koji Bilo koji Bilo koji Bilo koji Bilo koji * Bilo koji Bilo koji

* HSL, HSLa i RGBa podržani su u IE9 +.