Farge - CSS-triks

Anonim

Den coloreiendom i CSS setter farge på tekst og tekst dekorasjoner.

p ( color: blue; )

Verdier

Den coloregenskapen kan akseptere noe CSS fargeverdi.

  • Navngitte farger: for eksempel “aqua”.
  • Sekskantfarger: for eksempel # 00FFFF eller # 0FF.
  • RGB- og RGBa-farger: for eksempel rgb (0, 255, 255) og rgba (0, 255, 255, .5).
  • HSL og HSLa farger: for eksempel hsl (180, 100%, 50%) og hsla (180, 100%, 50%, .5).

Navngitte farger

p ( color: aqua; )

Navngitte farger er også kjent som søkeordfarger, X11-farger eller SVG-farger. Alle navngitte farger er ugjennomsiktige som standard bortsett fra transparent, som er helt gjennomsiktig eller "klar". Se utdraget Navngitte farger og sekskvivalenter for en liste over de navngitte fargene.

Hex-farger

Sekskantfarger, eller heksadesimale farger, er spesifisert med alfanumeriske verdier. Det første tegnparet representerer den røde verdien, det andre paret representerer den grønne verdien, og det tredje paret representerer den blå verdien, alt i et område fra 00 til FF.

p ( color: #00FFFF; )

Hvis parene med røde, blå og grønne verdier alle er doblet, kan du forkorte den sekskantede verdien til korttegning med 3 tegn - for eksempel kan # 00FFFF forkortes til # 0FF.

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

RGB og RGBa farger

RGB-farger er spesifisert med en komma-skillet liste med tre numeriske verdier (fra 0 til 255) eller prosentverdier (fra 0% til 100%). Den første verdien representerer den røde verdien, den andre representerer den grønne verdien, og den tredje representerer den blå verdien. RGB-farger er ugjennomsiktige som standard.

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

RGBa legger til en fjerde verdi for alfakanalen, som setter fargenes opasitet. Alfa-verdien er et tall innenfor et område fra 0,0 (helt gjennomsiktig) til 1 (helt ugjennomsiktig).

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

HSL- og HSLa-farger

HSL-farger er spesifisert med en kommaseparert liste med tre verdier: Graden av fargetone (et tall fra 0 til 360), en metningsprosent (varierer fra 0% til 100%) og en lyshetsprosent (fra 0% til 100%). HSL-farger er ugjennomsiktige som standard.

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

HSLa legger til en fjerde verdi for alfakanalen for å kontrollere fargenes opasitet. Alfa-verdien er et tall innenfor et område fra 0,0 (helt gjennomsiktig) til 1 (helt ugjennomsiktig).

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

Demo

Se pennefargeverdiene av CSS-Tricks (@ css-tricks) på CodePen.

Bruksanvisninger

De coloreiendoms kaskader. Hvis du setter den på kroppen, vil alle etterkommende elementer arve den fargen, med mindre de har sitt eget fargesett i brukeragentens stilark.

Kanter arver colormed mindre en fargeverdi er spesifisert i bordererklæringen.

Den coloreiendom gjelder text-decorationlinjer. I nettlesere som støtter text-decoration-coloreiendommen, kan du angi forskjellige farger for tekst og dens dekorasjonslinjer.

colorgjelder også for listeelementmarkører (som punktpunkter og tall). Du kan ikke angi en egen farge for en listeelementmarkør, men du kan erstatte den med et bilde med list-styleegenskapen.

Selv om navngitte farger og heksefarger ikke har alfakanaler, kan du angi opasiteten deres med opacityegenskapen i alle nåværende nettlesere og IE9 +.

I slekt

  • font
  • text-decoration-color
  • opacity

Mer informasjon

  • color i W3C-spesifikasjonen
  • color ved MDN
  • CSS-Tricks artikkel Yay for HSLa

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
Noen Noen Noen Noen Eventuelle * Noen Noen

* HSL, HSLa og RGBa støttes i IE9 +.