Värvus CSS-trikid

Anonim

colorVara CSS määrab teksti värvi ja teksti kaunistused.

p ( color: blue; )

Väärtused

colorVara võib aktsepteerida CSS värvi väärtus.

  • Nimetatud värvid: näiteks “aqua”.
  • Hex värvid: näiteks # 00FFFF või # 0FF.
  • RGB ja RGBa värvid: näiteks rgb (0, 255, 255) ja rgba (0, 255, 255, .5).
  • HSL ja HSLa värvid: näiteks hsl (180, 100%, 50%) ja hsla (180, 100%, 50%, .5).

Nimega värvid

p ( color: aqua; )

Nimetatud värve tuntakse ka märksõna värvide, X11 värvide või SVG värvidena. Kõik nimetatud värvid on vaikimisi läbipaistmatud, välja arvatud see transparent, mis on täielikult läbipaistev või selge. Nimetatud värvide loendi leiate meie nimedest Värvid ja Hexiekvivalendid.

Hex värvid

Kuuskümnendvärvid ehk kuueteistkümnendarvud määratakse tähtnumbriliste väärtustega. Esimene tähemärk tähistab punast, teine ​​paar rohelist ja kolmas paar sinist väärtust, kõik vahemikus 00 kuni FF.

p ( color: #00FFFF; )

Kui punaste, siniste ja roheliste väärtuste paarid on kõik kahekordsed, saate lühendada kuuskantväärtuse 3-täheliseks lühikeseks - näiteks saab # 00FFFF lühendada # 0FF.

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

RGB ja RGBa värvid

RGB värvid määratakse komaga eraldatud kolme arvväärtuse (vahemikus 0 kuni 255) või protsendiväärtuste (vahemikus 0% kuni 100%) loendiga. Esimene väärtus tähistab punast, teine ​​rohelist ja kolmas sinist. RGB värvid on vaikimisi läbipaistmatud.

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

RGBa lisab alfakanalile neljanda väärtuse, mis määrab värvi läbipaistmatuse. Alfa väärtus on arv vahemikus 0,0 (täielikult läbipaistev) kuni 1 (täielikult läbipaistmatu).

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

HSL ja HSLa värvid

HSL värvid määratakse komadega eraldatud kolme väärtuse loendiga: tooni aste (arv vahemikus 0 kuni 360), küllastuse protsent (vahemikus 0% kuni 100%) ja heleduse protsent (vahemikus 0% kuni 100%). HSL värvid on vaikimisi läbipaistmatud.

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

Värvi läbipaistmatuse kontrollimiseks lisab HSLa alfakanalile neljanda väärtuse. Alfa väärtus on arv vahemikus 0,0 (täielikult läbipaistev) kuni 1 (täielikult läbipaistmatu).

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

Demo

Vaadake CodePenilt CSS-Tricks'i pliiatsi värviväärtusi (@ css-tricks).

Kasutusjuhised

colorVara kaskaade. Kui määrate selle kehale, pärivad selle värvi kõik järeltulevad elemendid, välja arvatud juhul, kui kasutajaagendi stiililehel on nende jaoks määratud oma värv.

Äärised pärivad, colorkui borderdeklaratsioonis pole värviväärtust täpsustatud .

colorVara kehtib text-decorationread. Atribuuti toetavates brauserites text-decoration-colorsaate teksti ja selle kaunistamisjoonte jaoks määrata erinevad värvid.

colorkehtib ka loendiüksuste markerite (näiteks täppide ja numbrite) kohta. Loendiüksuse markerile ei saa eraldi värvi määrata, kuid saate selle list-styleatribuudiga pildiga asendada .

Ehkki nimevärvides ja kuueteistkümnevärvides pole alfakanaleid, saate nende läbipaistmatuse määrata opacityatribuudiga kõigis praegustes brauserites ja IE9 +.

Seotud

  • font
  • text-decoration-color
  • opacity

Rohkem informatsiooni

  • color W3C spetsifikatsioonis
  • color juures MDN
  • CSS-Tricks artikkel Yay for HSLa

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Ükskõik Ükskõik Ükskõik Ükskõik Mis tahes * Ükskõik Ükskõik

* IE9 + toetab HSL, HSLa ja RGBa.