Yükleniyor...

CSS Renkler

Öğeleri hedeflemeyi biliyorsunuz. Şimdi boyayın. İlk renk becerisi basit: metin rengini color özelliğiyle ayarlayın. Arka planlar, gradyanlar ve tam renk matematiği sonra — bugün okunabilir, yeniden kullanılabilir ön plan rengi.

color ne yapar?

color özelliği ön plan rengini ayarlar — esas olarak harflerin rengini. Tarayıcı bu hesaplanan rengi currentColor izleyenler için de kullanır (kenarlıklar, bazı SVG’ler, süslemeler). Metnin arkasındaki kutuyu doldurmaz; o background-colordır (sonraki modüller).

Adlı renkler bir bakışta

CSS birçok adlı renk getirir — teal ve navy gibi anahtar sözcükler. Önce küçük bir günlük küme ezberleyin. Tam hex ve rgb() Renk Değerleri dersinde gelir.

📊 Günlük adlı renkler

Ad His Tipik kullanım
black / white Maksimum karşıtlık Gövde metni veya sayfa tuvali (dikkatle)
navy / teal Sakin marka vurguları Bağlantılar, başlıklar, notlar
maroon / crimson Güçlü uyarı veya vurgu Hatalar, indirim etiketleri (az)
gray / silver Sakin ikincil metin Altyazılar, soluk etiketler
transparent Tamamen saydam Özelliği silmeden kenarlığı gizlemek

Adla metin rengi

Normal bir bildirim yazın: özellik color, değer adlı bir renk. Sayfa kasıtlı hissetsin diye paragrafla başlayın.

Paragraf metninde adlı renk

css
CSS Code 
p {
color: teal;
}

Sonucu nasıl okuruz?

Eşleşen her <p> harflerini teal çizer. Özellik adı her zaman colordır — text-color veya font-color değil.

Başlıklar gövdeden farklı olabilir

Çoğu zaman daha koyu bir başlık ve daha sakin bir paragraf istersiniz. Ayrı seçiciler, ayrı renkler.

Başlık vurgusu vs gövde metni

css
CSS Code 
h1 {
color: navy;
}

.lead {
color: gray;
}

Tasarım alışkanlığı

Yüksek karşıtlıklı başlıklar taramayı kolaylaştırır. Yumuşak ikincil metin altyazıların bağırmasını engeller. Yine de okumak için yeterli karşıtlık bırakın.

Renk kalıtılır

Çocuklar kendi renklerini koymadıkça ebeveynin color değerini alır. Bu yüzden bir kapsayıcıdaki renk tüm metin bloğunu temalandırabilir.

Not bloğunda kalıtılan renk

css
CSS Code 
.note {
color: maroon;
}

Ne kalıtılır?

<div class="note">…</div> içinde paragraflar ve span’ler daha güçlü bir kural değiştirene kadar maroon kalır. Kalıtım özelliktir — hata değil.

currentColor metne uyar

currentColor «öğenin hesaplanmış color değerini kullan» demektir. Kenarlık veya simge metinle senkron kalmalıysa işe yarar.

Kenarlık currentColor ile metni izler

css
CSS Code 
.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}

Neden uğraşalım?

colorı bir kez değiştirin — kenarlık peşinden gelir. Senkron tutmak için ikinci sabit kodlu teal yok.

Temalı kart (hepsi birlikte)

Kapsayıcı rengi, çocukta daha sakin override ve currentColor vurgusunu birleştirin.

Override + currentColor ile kart teması

css
CSS Code 
.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}

.card .muted {
color: gray;
}

color arka plan değildir

Yeni başlayanlar çoğu zaman metnin arkasındaki dolguyu kastederken color yazar. İlk günden ayırın:

  • color → metin (ön plan)
  • background-color → içeriğin arkasındaki boyalı kutu (yakında)

Kendiniz deneyin

  1. Başlık, <p class="lead"> ve kısa paragraflı <div class="note"> olan sayfa.
  2. h1 { color: navy; }, p { color: teal; } ve .note { color: maroon; } koyun — her bölgeyi kontrol edin.
  3. Küçük bir span’de .badge { color: teal; border: 2px solid currentColor; } — kenarlık metinle eşleşmeli.
  4. .card içinde kartta navy, .muted üzerinde color: gray — o satır için çocuk override kazanmalı.
  5. İsteğe bağlı: süs etiketinde color: transparent — metin kaybolur, düzen boşluğu kalır.

Sık hatalar

  • Kutunun arka planını color ile boyamak — sonra background-color
  • Ad uydurmak (lightishblue) — gerçek CSS anahtar sözcüklerine yapışın veya hex/rgb bekleyin
  • Her özelliğin color gibi kalıtılmasını beklemek — çoğu kalıtılmaz
  • Adlı renkler oturmadan uzun hex dizilerine atlamak
  • Karşıtlığı yok saymak (beyaz üstünde soluk gri) — güzel ama okunaksız

Özet

  • color ön plan metin rengini ayarlar
  • Adlı renkler (teal, navy, maroon, …) başlangıç için yeter
  • Çocuklar override edene kadar color kalıtır
  • currentColor hesaplanmış metin rengini kenarlık ve benzerleri için yeniden kullanır
  • Derin biçimler (hex, rgb, hsl) Renk Değerleri’nde; arka planlar sonraki derslerde
  • Özellik otomatikleşene kadar başlık / lead / note ile pratik yapın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders