Farba - Triky CSS

Anonim

colorNehnuteľnosť v CSS nastavi farbu textu a textových dekorácií.

p ( color: blue; )

Hodnoty

Toto colorubytovacie zariadenie prijíma akékoľvek hodnoty farieb CSS.

  • Pomenované farby: napríklad „aqua“.
  • Šesťhranné farby: napríklad # 00FFFF alebo # 0FF.
  • Farby RGB a RGBa: napríklad rgb (0, 255, 255) a rgba (0, 255, 255, .5).
  • Farby HSL a HSLa: napríklad hsl (180, 100%, 50%) a hsla (180, 100%, 50%, 0,5).

Pomenované farby

p ( color: aqua; )

Pomenované farby sú tiež známe ako farby kľúčových slov, farby X11 alebo farby SVG. Všetky pomenované farby sú predvolene nepriehľadné, okrem tých transparent, ktoré sú úplne priehľadné alebo „jasné“. Zoznam pomenovaných farieb nájdete v našom úryvku Named Colors and Hex Equivalents.

Šesťhranné farby

Hex farby alebo hexadecimálne farby sú špecifikované alfanumerickými hodnotami. Prvý pár znakov predstavuje červenú hodnotu, druhý pár predstavuje zelenú hodnotu a tretí pár predstavuje modrú hodnotu, všetko v rozmedzí od 00 do FF.

p ( color: #00FFFF; )

Ak sú páry červenej, modrej a zelenej hodnoty dvojité, môžete hexadecimálnu hodnotu skrátiť na 3-znakový skratku - napríklad # 00FFFF možno skrátiť na # 0FF.

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

RGB a RGBa farby

Farby RGB sú špecifikované zoznamom troch číselných hodnôt (v rozsahu od 0 do 255) alebo percentuálnych hodnôt (v rozmedzí od 0% do 100%) oddelených čiarkami. Prvá hodnota predstavuje červenú hodnotu, druhá predstavuje zelenú hodnotu a tretia predstavuje modrú hodnotu. Štandardne sú farby RGB nepriehľadné.

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

RGBa pridáva štvrtú hodnotu pre alfa kanál, ktorá nastavuje nepriehľadnosť farby. Alfa hodnota je číslo v rozmedzí od 0,0 (úplne priehľadné) do 1 (úplne nepriehľadné).

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

Farby HSL a HSLa

Farby HSL sú špecifikované zoznamom troch hodnôt oddelených čiarkami: stupeň odtieňa (číslo v rozmedzí od 0 do 360), percento sýtosti (v rozmedzí od 0% do 100%) a percento svetlosti (v rozmedzí od 0%) až 100%). Štandardne sú farby HSL nepriehľadné.

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

HSLa pridáva štvrtú hodnotu pre alfa kanál na riadenie nepriehľadnosti farby. Alfa hodnota je číslo v rozmedzí od 0,0 (úplne priehľadné) do 1 (úplne nepriehľadné).

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

Ukážka

Pozrite si hodnoty farieb pera pomocou CSS-Tricks (@ css-tricks) na CodePen.

Poznámky k použitiu

K colorvlastníctva kaskády. Ak ju nastavíte na telo, všetky nasledujúce prvky budú dediť túto farbu, pokiaľ nebudú mať svoju vlastnú farbu nastavenú v šablóne štýlov agentov používateľov.

Okraje sa dedia, colorpokiaľ v borderdeklarácii nie je uvedená hodnota farby .

Toto colorubytovacie zariadenie sa vzťahuje na text-decorationlinky. V prehliadačoch, ktoré podporujú túto text-decoration-colorvlastnosť, môžete určiť rôzne farby textu a jeho riadkov výzdoby.

colorplatí aj pre značky položiek v zozname (napríklad odrážky a čísla). Nemôžete nastaviť samostatnú farbu pre značku položky zoznamu, ale môžete ju nahradiť obrázkom s touto list-stylevlastnosťou.

Aj keď pomenované farby a hexadecimálne farby nemajú alfa kanály, môžete ich nepriehľadnosť pomocou opacityvlastnosti nastaviť vo všetkých súčasných prehliadačoch a IE9 +.

Súvisiace

  • font
  • text-decoration-color
  • opacity

Viac informácií

  • color v špecifikácii W3C
  • color na MDN
  • Článok CSS-Tricks Yay pre HSLa

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
akýkoľvek akýkoľvek akýkoľvek akýkoľvek Akýkoľvek * akýkoľvek akýkoľvek

* HSL, HSLa a RGBa sú podporované v IE9 +.