Renk - CSS Hileleri

Anonim

CSS'deki colorözellik, metin ve metin süslemelerinin rengini belirler.

p ( color: blue; )

Değerler

colorMülkiyet herhangi bir CSS renk değeri kabul edebilir.

  • Adlandırılmış renkler: örneğin, "aqua".
  • Onaltılık renkler: örneğin, # 00FFFF veya # 0FF.
  • RGB ve RGBa renkleri: örneğin, rgb (0, 255, 255) ve rgba (0, 255, 255, .5).
  • HSL ve HSLa renkleri: örneğin, hsl (180,% 100,% 50) ve hsla (180,% 100,% 50, .5).

Adlandırılmış Renkler

p ( color: aqua; )

Adlandırılmış renkler, anahtar sözcük renkleri, X11 renkleri veya SVG renkleri olarak da bilinir. Tüm adlandırılmış renkler transparent, tamamen şeffaf veya "açık" olanlar dışında varsayılan olarak opaktır . Adlandırılmış renklerin bir listesi için Adlandırılmış Renkler ve Onaltılık Eşdeğerler pasajımıza bakın.

Hex Renkler

Onaltılık renkler veya onaltılı renkler alfanümerik değerlerle belirtilir. İlk karakter çifti kırmızı değeri, ikinci çift yeşil değeri ve üçüncü çift mavi değeri temsil eder ve tümü 00 ile FF aralığında yer alır.

p ( color: #00FFFF; )

Kırmızı, mavi ve yeşil değer çiftlerinin tümü çift ise, onaltılık değeri 3 karakterlik kısaltılmış olarak kısaltabilirsiniz - örneğin, # 00FFFF, # 0FF olarak kısaltılabilir.

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

RGB ve RGBa Renkleri

RGB renkleri, virgülle ayrılmış üç sayısal değer (0 ile 255 arasında) veya yüzde değerleri (% 0 ile% 100 arasında) listesiyle belirtilir. İlk değer kırmızı değeri, ikincisi yeşil değeri ve üçüncüsü mavi değeri temsil eder. RGB renkleri varsayılan olarak opaktır.

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

RGBa, rengin opaklığını ayarlayan alfa kanalı için dördüncü bir değer ekler. Alfa değeri, 0,0 (tamamen şeffaf) ile 1 (tamamen opak) aralığında bir sayıdır.

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

HSL ve HSLa Renkleri

HSL renkleri, virgülle ayrılmış üç değerden oluşan bir listeyle belirtilir: Ton derecesi (0 ile 360 ​​arasında bir sayı), bir Doygunluk yüzdesi (% 0 ile% 100 arasında) ve bir Açıklık yüzdesi (% 0 % 100'e kadar). HSL renkleri varsayılan olarak opaktır.

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

HSLa, rengin opaklığını kontrol etmek için alfa kanalına dördüncü bir değer ekler. Alfa değeri, 0,0 (tamamen şeffaf) ile 1 (tamamen opak) aralığında bir sayıdır.

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

Demo

CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem renk değerlerini görün.

Kullanım Notları

colorMülkiyet çağlayanlar. Bunu gövde üzerinde ayarlarsanız, kullanıcı aracısı stil sayfasında kendi renk kümelerine sahip olmadıkları sürece, tüm alt öğeler bu rengi devralır.

Beyanda colorbir renk değeri belirtilmediği sürece sınırlar miras alır border.

colorMülkiyet için geçerlidir text-decorationhatları. text-decoration-colorÖzelliği destekleyen tarayıcılarda, metin ve dekorasyon çizgileri için farklı renkler belirleyebilirsiniz.

colorliste öğesi işaretçileri için de geçerlidir (madde işaretleri ve numaralar gibi). Bir liste öğesi işaretçisi için ayrı bir renk ayarlayamazsınız, ancak bunu list-styleözelliğe sahip bir görüntü ile değiştirebilirsiniz .

Adlandırılmış renkler ve onaltılık renklerin alfa kanalları olmasa da, opaklıklarını opacitytüm mevcut tarayıcılarda ve IE9 + ' da özellik ile ayarlayabilirsiniz .

İlişkili

  • font
  • text-decoration-color
  • opacity

Daha fazla bilgi

  • color W3C spesifikasyonunda
  • color MDN'de
  • CSS Hileleri makalesi HSLa için Yay

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
Hiç Hiç Hiç Hiç Hiç * Hiç Hiç

* HSL, HSLa ve RGBa, IE9 + 'da desteklenir.