Krāsa - CSS-triki

Anonim

colorĪpašums CSS nosaka krāsu teksta un teksta rotājumi.

p ( color: blue; )

Vērtības

colorĪpašums var pieņemt jebkuru CSS krāsas vērtību.

  • Nosauktās krāsas: piemēram, “aqua”.
  • Hex krāsas: piemēram, # 00FFFF vai # 0FF.
  • RGB un RGBa krāsas: piemēram, rgb (0, 255, 255) un rgba (0, 255, 255, .5).
  • HSL un HSLa krāsas: piemēram, hsl (180, 100%, 50%) un hsla (180, 100%, 50%, .5).

Nosauktas krāsas

p ( color: aqua; )

Nosauktās krāsas ir pazīstamas arī kā atslēgvārdu krāsas, X11 krāsas vai SVG krāsas. Visas nosauktās krāsas pēc noklusējuma ir necaurspīdīgas, izņemot to transparent, kas ir pilnīgi caurspīdīga vai “skaidra”. Nosaukto krāsu un sešstūra ekvivalentu fragmentā skatiet nosaukto krāsu sarakstu.

Hex krāsas

Sešstūra krāsas jeb sešpadsmitās krāsas tiek norādītas ar burtciparu vērtībām. Pirmais rakstzīmju pāris apzīmē sarkano vērtību, otrais - zaļo, bet trešais - zilo vērtību, visi diapazonā no 00 līdz FF.

p ( color: #00FFFF; )

Ja sarkano, zilo un zaļo vērtību pāri ir dubultā, jūs varat saīsināt hex vērtību līdz 3 rakstzīmju stenogrāfijai - piemēram, # 00FFFF var saīsināt kā # 0FF.

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

RGB un RGBa krāsas

RGB krāsas tiek norādītas ar komatiem atdalītu trīs skaitlisko vērtību (diapazonā no 0 līdz 255) vai procentuālo vērtību (diapazonā no 0% līdz 100%) sarakstu. Pirmā vērtība apzīmē sarkano, otrā - zaļo, bet trešā - zilo. Pēc noklusējuma RGB krāsas ir necaurspīdīgas.

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

RGBa pievieno alfa kanālam ceturto vērtību, kas nosaka krāsas necaurredzamību. Alfa vērtība ir skaitlis diapazonā no 0,0 (pilnīgi caurspīdīgs) līdz 1 (pilnīgi necaurspīdīgs).

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

HSL un HSLa krāsas

HSL krāsas tiek noteikts ar komatatdalītu sarakstu trim vērtībām: pakāpi Hue (skaitlis diapazonā no 0 līdz 360), kas ir Saturation procentos (robežās no 0% līdz 100%), un gaišuma procentos (robežās no 0% līdz 100%). HSL krāsas pēc noklusējuma ir necaurspīdīgas.

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

HSLa pievieno alfa kanāla ceturto vērtību, lai kontrolētu krāsas necaurredzamību. Alfa vērtība ir skaitlis diapazonā no 0,0 (pilnīgi caurspīdīgs) līdz 1 (pilnīgi necaurspīdīgs).

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

Demonstrācija

Skatiet CSP-Tricks pildspalvas krāsu vērtības vietnē CodePen.

Lietošanas piezīmes

Par colorīpašuma kaskādēm. Ja iestatīsit to uz ķermeņa, visi pēcnācēju elementi mantos šo krāsu, ja vien lietotāja aģenta stila lapā viņiem nebūs iestatīta sava krāsa.

Robežas tiek mantotas, colorja borderdeklarācijā nav norādīta krāsas vērtība .

colorĪpašumu attiecas uz text-decorationlīnijām. Pārlūkprogrammās, kas atbalsta text-decoration-colorīpašumu, tekstam un tā apdares līnijām varat norādīt dažādas krāsas.

colorattiecas arī uz saraksta vienumu marķieriem (piemēram, aizzīmēm un numuriem). Saraksta vienuma marķierim nevar iestatīt atsevišķu krāsu, bet to var aizstāt ar attēlu ar list-stylerekvizītu.

Lai gan nosauktajām krāsām un sešstūra krāsām nav alfa kanālu, to opasite var iestatīt ar opacityīpašumu visās pašreizējās pārlūkprogrammās un IE9 +.

Saistīts

  • font
  • text-decoration-color
  • opacity

Vairāk informācijas

  • color W3C spec
  • color pie MDN
  • CSS-Tricks raksts Yay for HSLa

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Jebkurš Jebkurš Jebkurš Jebkurš Jebkurš * Jebkurš Jebkurš

* IE9 + atbalsta HSL, HSLa un RGBa.