Szín - CSS-trükkök

Anonim

A colorCSS tulajdonság megadja a szöveg és a dekoráció színét.

p ( color: blue; )

Értékek

A colortulajdon bármely CSS színértéket elfogadhat.

  • Nevezett színek: például „aqua”.
  • Hex színek: például # 00FFFF vagy # 0FF.
  • RGB és RGBa színek: például rgb (0, 255, 255) és rgba (0, 255, 255, .5).
  • HSL és HSLa színek: például hsl (180, 100%, 50%) és hsla (180, 100%, 50%, .5).

Nevezett színek

p ( color: aqua; )

Az elnevezett színek más néven kulcsszínek, X11 színek vagy SVG színek. Alapértelmezés szerint az összes megnevezett szín átlátszatlan, kivéve transparenta teljesen átlátszó vagy „tiszta” színt . A megnevezett színek és a Hex ekvivalensek kódrészletében megtalálja a megnevezett színek listáját.

Hex színek

A hexa vagy hexidecimális színek alfanumerikus értékekkel vannak megadva. Az első karakterpár a piros értéket, a második pár a zöld értéket, a harmadik pár pedig a kék értéket jelöli, mindez 00 és FF között van.

p ( color: #00FFFF; )

Ha a vörös, a kék és a zöld értékpárok kettősek, akkor a hexa értéket 3 karakteres rövidítésre rövidítheti - például a # 00FFFF rövidíthető # 0FF-re.

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

RGB és RGBa színek

Az RGB színek vesszővel elválasztott listával vannak megadva, amely három számértéket (0 és 255 között) vagy százalékos értéket (0% és 100% között) tartalmaz. Az első érték a piros, a második a zöld, a harmadik a kék értéket jelenti. Az RGB színek alapértelmezésben átlátszatlanok.

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

Az RGBa hozzáad egy negyedik értéket az alfa csatornához, amely meghatározza a szín átlátszatlanságát. Az alfaérték a 0,0 (teljesen átlátszó) és 1 (teljesen átlátszatlan) tartományban lévő szám.

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

HSL és HSLa színek

A HSL színek vesszővel elválasztott három értékű listájával vannak megadva: a színárnyalat mértéke (0 és 360 közötti szám), a telítettség százaléka (0% és 100% között) és egy világossági százalék (0% tartományban) 100% -ig). A HSL színek alapértelmezésben átlátszatlanok.

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

A HSLa hozzáad egy negyedik értéket az alfa csatornához, hogy szabályozza a szín átlátszatlanságát. Az alfaérték a 0,0 (teljesen átlátszó) és 1 (teljesen átlátszatlan) tartományban lévő szám.

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

Demó

Lásd a CSS-Tricks tollszínértékeit (@ css-tricks) a CodePen-en.

Használati megjegyzések

Az coloringatlan kaszkádok. Ha a testen állítja be, akkor az összes leszármazott elem örökölni fogja ezt a színt, hacsak nincs megadva saját színük a felhasználói ügynök stíluslapján.

A szegélyek öröklik, colorhacsak a bordernyilatkozatban színérték nincs megadva .

Az coloringatlan text-decorationvonalakra vonatkozik. A text-decoration-colortulajdonságot támogató böngészőkben különböző színeket adhat meg a szöveghez és annak díszítési soraihoz.

colora listaelem jelölőkre is vonatkozik (például a felsorolási pontokra és a számokra). Nem állíthat be külön színt a listaelem jelölőhöz, de helyettesítheti egy list-styletulajdonsággal rendelkező képpel .

Bár a megnevezett színeknek és a hexa színeknek nincsenek alfacsatornáik, opacityaz összes jelenlegi böngészőben és az IE9 + böngészőben beállíthatjuk az átlátszatlanságukat a tulajdonsággal.

Összefüggő

  • font
  • text-decoration-color
  • opacity

Több információ

  • color a W3C specifikációjában
  • color az MDN-nél
  • CSS-Tricks: Yay for HSLa

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
Bármi Bármi Bármi Bármi Bármi * Bármi Bármi

* A HSL, a HSLa és az RGBa támogatott az IE9 + rendszerben.