Barva - Triky CSS

Anonim

colorNemovitost v CSS nastavi barvu textu a textových dekorací.

p ( color: blue; )

Hodnoty

colorNemovitost může přijmout jakoukoliv barvu CSS hodnotu.

  • Pojmenované barvy: například „aqua“.
  • Hex barvy: například # 00FFFF nebo # 0FF.
  • Barvy RGB a RGBa: například rgb (0, 255, 255) a rgba (0, 255, 255, .5).
  • Barvy HSL a HSLa: například hsl (180, 100%, 50%) a hsla (180, 100%, 50%, 0,5).

Pojmenované barvy

p ( color: aqua; )

Pojmenované barvy jsou také známé jako barvy klíčových slov, barvy X11 nebo barvy SVG. Všechny pojmenované barvy jsou ve výchozím nastavení neprůhledné, kromě těch transparent, které jsou zcela průhledné nebo „jasné“. Seznam pojmenovaných barev najdete v našem fragmentu pojmenovaných barev a hexadecimálních ekvivalentů.

Hex barvy

Hex barvy nebo hexadecimální barvy jsou specifikovány alfanumerickými hodnotami. První pár znaků představuje červenou hodnotu, druhý pár představuje zelenou hodnotu a třetí pár představuje modrou hodnotu, vše v rozsahu od 00 do FF.

p ( color: #00FFFF; )

Pokud jsou dvojice červených, modrých a zelených hodnot zdvojnásobeny, můžete zkrátit hexadecimální hodnotu na 3místnou zkratku - například # 00FFFF lze zkrátit na # 0FF.

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

Barvy RGB a RGBa

Barvy RGB jsou specifikovány čárkami odděleným seznamem tří číselných hodnot (od 0 do 255) nebo procentních hodnot (od 0% do 100%). První hodnota představuje červenou hodnotu, druhá představuje zelenou hodnotu a třetí představuje modrou hodnotu. Barvy RGB jsou ve výchozím nastavení neprůhledné.

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

RGBa přidává čtvrtou hodnotu pro alfa kanál, která nastavuje neprůhlednost barvy. Alfa hodnota je číslo v rozsahu od 0,0 (plně transparentní) do 1 (zcela neprůhledné).

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

Barvy HSL a HSLa

Barvy HSL jsou specifikovány čárkami odděleným seznamem tří hodnot: stupeň odstínu (číslo v rozsahu od 0 do 360), procento sytosti (v rozsahu od 0% do 100%) a procento světlosti (v rozmezí od 0%) až 100%). Barvy HSL jsou ve výchozím nastavení neprůhledné.

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

HSLa přidává čtvrtou hodnotu pro alfa kanál pro řízení neprůhlednosti barvy. Alfa hodnota je číslo v rozsahu od 0,0 (plně transparentní) do 1 (zcela neprůhledné).

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

Ukázka

Podívejte se na hodnoty barev pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Poznámky k použití

K colorvlastnictví kaskády. Pokud ji nastavíte na tělo, všechny potomky zdědí tuto barvu, pokud nemají vlastní sadu barev v seznamu stylů uživatelského agenta.

Hranice dědí, colorpokud není v borderdeklaraci uvedena hodnota barvy .

colorVlastnost se vztahuje na text-decorationlinkách. V prohlížečích, které tuto text-decoration-colorvlastnost podporují , můžete určit různé barvy textu a jeho řádků dekorace.

colorplatí také pro značky položek v seznamu (jako odrážky a čísla). Nemůžete nastavit samostatnou barvu pro značku položky seznamu, ale můžete ji nahradit obrázkem s list-stylevlastností.

Ačkoli pojmenované barvy a hexadecimální barvy nemají alfa kanály, můžete nastavit jejich neprůhlednost pomocí opacityvlastnosti ve všech aktuálních prohlížečích a IE9 +.

Příbuzný

  • font
  • text-decoration-color
  • opacity

Více informací

  • color ve specifikaci W3C
  • color ve společnosti MDN
  • Článek CSS-Tricks Yay pro HSLa

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Žádný Žádný Žádný Žádný Libovolný * Žádný Žádný

* HSL, HSLa a RGBa jsou podporovány v IE9 +.