Warna - Trik CSS

Anonim

The colorharta di CSS menetapkan warna teks dan teks hiasan.

p ( color: blue; )

Nilai

Tempat colorpenginapan ini boleh menerima sebarang nilai warna CSS.

  • Warna yang dinamakan: sebagai contoh, "aqua".
  • Warna hex: contohnya, # 00FFFF atau # 0FF.
  • Warna RGB dan RGBa: contohnya, rgb (0, 255, 255) dan rgba (0, 255, 255, .5).
  • Warna HSL dan HSLa: contohnya, hsl (180, 100%, 50%) dan hsla (180, 100%, 50%, .5).

Warna yang Dinamakan

p ( color: aqua; )

Warna yang dinamakan juga dikenal sebagai warna kata kunci, warna X11, atau warna SVG. Semua warna yang dinamakan legap secara lalai kecuali transparent, yang sepenuhnya telus atau "jernih". Lihat corak Named Colors and Hex Equivalents kami untuk senarai warna yang dinamakan.

Warna Hex

Warna hex, atau warna heksidecimal, ditentukan dengan nilai alfanumerik. Pasangan watak pertama mewakili nilai merah, pasangan kedua mewakili nilai hijau, dan pasangan ketiga mewakili nilai biru, semuanya dalam jarak antara 00 hingga FF.

p ( color: #00FFFF; )

Sekiranya pasangan nilai merah, biru, dan hijau semuanya berganda, anda boleh menyingkat nilai hex menjadi singkatan 3 aksara - misalnya, # 00FFFF dapat disingkat menjadi # 0FF.

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

Warna RGB dan RGBa

Warna RGB ditentukan dengan senarai tiga nilai numerik (antara 0 hingga 255) atau nilai peratusan yang dipisahkan koma (antara 0% hingga 100%). Nilai pertama mewakili nilai merah, yang kedua mewakili nilai hijau, dan yang ketiga mewakili nilai biru. Warna RGB legap secara lalai.

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

RGBa menambah nilai keempat untuk saluran alpha, yang menetapkan kelegapan warna. Nilai alpha adalah nombor dalam julat dari 0,0 (sepenuhnya telus) hingga 1 (legap sepenuhnya).

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

Warna HSL dan HSLa

Warna HSL ditentukan dengan senarai tiga nilai yang dipisahkan koma: darjah Hue (angka antara 0 hingga 360), peratusan Saturasi (antara 0% hingga 100%), dan peratusan Lightness (antara 0% hingga 100%). Warna HSL legap secara lalai.

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

HSLa menambah nilai keempat untuk saluran alpha untuk mengawal kelegapan warna. Nilai alpha adalah nombor dalam julat dari 0,0 (sepenuhnya telus) hingga 1 (legap sepenuhnya).

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

Demo

Lihat nilai warna Pen oleh CSS-Tricks (@ css-tricks) di CodePen.

Nota Penggunaan

The colorlata harta. Sekiranya anda meletakkannya di badan, semua elemen keturunan akan mewarisi warna itu, kecuali jika warna mereka ditetapkan dalam helaian gaya ejen pengguna.

Sempadan mewarisi colorkecuali nilai warna dinyatakan dalam borderdeklarasi.

Tempat colorpenginapan ini menggunakan text-decorationgaris. Dalam penyemak imbas yang menyokong text-decoration-colorharta tanah, anda boleh menentukan warna yang berbeza untuk teks dan garis hiasannya.

colorjuga berlaku untuk penanda item senarai (seperti titik peluru dan nombor). Anda tidak dapat menetapkan warna yang terpisah untuk penanda item senarai, tetapi anda boleh menggantinya dengan gambar dengan list-styleharta tanah.

Walaupun warna bernama dan warna hex tidak mempunyai saluran alpha, anda dapat mengatur kelegapannya dengan opacityproperti di semua penyemak imbas semasa dan IE9 +.

Berkaitan

  • font
  • text-decoration-color
  • opacity

Maklumat lanjut

  • color dalam spesifikasi W3C
  • color di MDN
  • Artikel CSS-Tricks Yay untuk HSLa

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Sebarang Sebarang Sebarang Sebarang Sebarang * Sebarang Sebarang

* HSL, HSLa, dan RGBa disokong dalam IE9 +.