color Özelliği Temel Özellikler
- CSS Yazımı :
color: rgb() | rgba() | hsl() | hsla() | hex-color | renk | currentcolor;- Örnek :
color: #cCc;|color: black;|color: rgb(204, 204, 204);|color: hsla(80%, 28%, 0%, 0.5);- Öntanımlı Değer :
Tarayıcıdan tarayıcıya göre değişir.- Uygulanabilen Etiketler :
- Tüm Etiketler.
::first-letterve::first-lineögelerine de uygulanabilir. - Kalıtsallık :
- Var
- Tarayıcı Desteği :
- Tüm Tarayıcılar
- Animasyon :
- Destekleniyor
animationÖzelliği - Javascript :
öge.style.color = "#cCc";- Sürüm :
- CSS1 / CSS2 (düz. 1) / CSS Color Module Level 3 / CSS Transitions / CSS Color Module Level 4
- Açıklama :
color Özelliği Kullanımı
Markanız için 300X300 alan.
CSS color özelliği; ögenin içeriğinin ve deseninin ön plan rengini belirler.
color özelliği tek birimlik renk değeridir ve taşıdığı değer ögenin metinsel değerlerine renk verir.
color özelliği diğer özelliklerde de dolaylı değer olarak kullanılan ve border-color özelliği gibi diğer renk özelliklerinin öntanımlı değeri olan currentColor değerini de belirler.
Tuttuğu renk değeri, olması gerektiği gibi olmalıdır. gradient özelliği değerinden değildir çünkü gradyanlar renk türünden değil görsel türündendir.
CSS renkleriyle ilgili ayrıntılar için bk. CSS Renk
Amerikan İngilizcesi'nde ondalıklar nokta (.) ile yazılır virgül (,) ile değil. 23.23 - 23,23
CSS'te 0 ile başlayan ondalıklı değerlerde 0 yazılmak zorunda değil. 0.45 ile .45 aynı değerdir!
Türkçe'de %50'dir. İngilizce 50%'dir.
CSS'te yüzdeli değerler ingilizcedeki gibi yazılır.
Dikkat edin!
color Özelliği Örnekleri
öge { color: red; }
öge { color: #f00; }
öge { color: #ff0000; }
öge { color: rgb(255,0,0); }
öge { color: rgb(100%, 0%, 0%); }
öge { color: hsl(0, 100%, 50%); }
/* %50 saydam */
öge { color: rgba(255, 0, 255, 0.5); }
öge { color: hsla(0, 50%, 50%, 0.5); }color Özelliği Tarayıcı Desteği
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Renk Adları | 1.0 (1.0) | 3.5 | 1.0 (85) | 1.0 | 3.0 [1] |
#RRGGBB |
1.0 (1.0) | 3.5 | 1.0 (85) | 1.0 | 3.0 |
rgb() |
1.0 (1.0) | 3.5 | 1.0 (85) | 1.0 | 4.0 |
hsl() |
1.0 (1.5) | 9.5 | 3.1 (525) | 1.0 | 9.0 |
rgba(), hsla() |
3.0 (1.9) | 10.0 | 3.1 (525) | 1.0 | 9.0 |
currentColor |
1.5 (1.8) | 9.5 | 4.0 (528) | 1.0 | 9.0 |
transparent |
3.0 (1.9) | 10.0 | 3.1 (525) | 1.0 | 9.0 [2] |
rebeccapurple |
33 (33) | 25.0 | 7.1 | 38.0 | 11 |
#RRGGBBAA, #RGBA |
49 (49) | Yok [4] | 9.1 | Yok [3] | ? |
rgb() ve hsl() değerlerinin rgba() ve hsla() ile kullanımı
Ayraç olarak virgül yerine boşluk kullanımı alfa değerleri için yüzde değeri kullanımı hsl() renklerinde açı kullanımı |
52 (52) | ? | ? | ? | ? |
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | Var | Var | Var | Var | Var |
rgba(), hsla() |
Var | Var | Var | Var | Var |
rebeccapurple |
33.0 (33) | ? | 8 | Var | ? |
#RRGGBBAA, #RGBA |
49.0 (49) | Yok | ? | Yok [4] | Yok |
rgb() ve hsl() değerlerinin rgba() ve hsla() ile kullanımı
Ayraç olarak virgül yerine boşluk kullanımı alfa değerleri için yüzde değeri kullanımı hsl() renklerinde açı kullanımı |
52.0 (52) | ? | ? | ? | ? |
[1] İngilizce e ile yazılan gri renkleri (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey) yalnızca İE8'den beri destekleniyor.
İE 3.0'dan İE 7.0'a kadar bu renklerin yalnızca a ile yazılanları (gray, darkgray, darkslategray, dimgray, lightgray, lightslategray) destekleniyor.
[2] İE 7-8 transparent sözcüğünü yalnızca background özelliği ve border özelliği için destekliyor. color: transparent; İE'de siyah gösterilir. İE 6 da transparent çerçeveleri aynı biçimde siyaha boyar.
[3] Chrome 52.0'dan beri deneysel olarak ve yalnızca chrome:// bayraklarının arkasında destekleniyor.
[4] Opera 39.0'dan beri deneysel olarak ve yalnızca chrome:// bayraklarının arkasında destekleniyor.
Tarayıcı desteği tablosu artık güncel değil. Kısa zamanda güncellenecek.
color Özelliğinin Alabileceği Değerler
<renk>- Metinsel içeriğin ve desenin rengini ayarlar. Daha fazla bilgi için: CSS Renk