İçeriğe geç

CSS · 1/8

İlk CSS kuralın

Bir CSS kuralının seçici, özellik ve değerini ayırt ederek uygulamak.

Önerilen çalışma: 25–45 dakika; örnekleri kendin uygula. Süre kişiye göre değişir.

Bu sayfada · 9 başlık

Başlamadan önce

Ön bilgi gerekmiyor. Kodu yazacağın alan ile sonucu okuyacağın alanı ayırt ederek başlayacağız.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

CSS · İlk CSS kuralın — videolu atölye: açıklamalı kavram şeması
Webino App öğretici şeması · Uygulama ekran görüntüsü değildir.

Videoyla adım adım izle

Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.

Video bölümleri ve tam metin

İlk CSS kuralın

Bir CSS kuralının seçici, özellik ve değerini ayırt ederek uygulamak.

Kavramı kur

CSS, HTML ağacındaki öğelere görünüm kuralları uygular. Kuralın başındaki seçici hangi öğelerin etkileneceğini belirtir; süslü parantez içindeki bildirimler neyin değişeceğini söyler. color bir özelliktir, tomato onun bir değeridir. Aynı öğeye birden fazla kural uygulanabildiği için tarayıcı uygun değerleri kaskad kurallarıyla seçer.

Neden böyle çalışıyor?

İlk örneklerde style etiketi kullanmak tek dosyada deneme yapmayı kolaylaştırır. Proje büyüyünce kuralları ayrı bir CSS dosyasına ayırabilirsin. Her değişiklikte hem HTML hem CSS dosyasını kaydet; tarayıcıda doğru dosyayı açtığını kontrol et. Yüklenmeyen bir dosya ile eşleşmeyen bir seçici birbirinden farklı hatalardır.

Çalışma sırası

Bir özelliği değiştirmeden önce hangi sonucu beklediğini yaz. Sonra yalnızca o özelliği değiştir ve farkı gözlemle. Aynı anda renk, boyut, boşluk ve yerleşimi değiştirmek hangi kuralın ne yaptığını anlamanı zorlaştırır. Geliştirici araçlarının Styles ve Computed bölümleri hangi bildirimin gerçekten uygulandığını gösterir.

İkinci örnek · 1

h2 seçicisi sayfadaki bütün h2 öğelerini seçer. Kodun tamamı yazılı derste bulunur.

Kod

<style>
  h2 { color: #245f9e; font-size: 28px; }
  p { color: #334155; line-height: 1.7; }
</style>
<h2>Bugünkü hedefim</h2>
<p>Bir CSS kuralını açıklayabiliyorum.</p>

Beklenen sonucu oku

Süslü parantezlerin eksikliği sonraki kuralların da yanlış yorumlanmasına yol açabilir.

Beklenen çıktı: Mavi bir h2 ve rahat satır aralığına sahip koyu paragraf.

Bir değeri sen değiştir

Başlığın yalnızca rengini değiştir; sonucu tahmin et. İkinci bir h2 ekle; ikisinin de neden etkilendiğini anlat.

Hata nereden gelir?

CSS dosyası yüklenmiyorsa link href yolunu Network bölümünde denetle.

Kendi çözümünü kur

Aynı başlığa ikinci bir color kuralı ekle; DevTools ile hangisinin kazandığını incele. Aynı özgüllük ve koşullarda daha sonra yazılan bildirim kazanabilir; üstü çizilmiş bildirime bak.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

Kod

<style>
h2 { color: #a33b31; }
p { font-size: 18px; line-height: 1.8; }
</style>
<h2>Deneme başlığı</h2><p>Okunabilir bir paragraf.</p>

Kendini kontrol et

color ve background-color aynı şeyi mi değiştirir? Yanıt: Hayır; color metnin, background-color öğenin arka planının rengini belirler.

Beklenen çıktı: Kırmızımsı başlık ve 18px paragraf.

Konu anlatımı

CSS, HTML ağacındaki öğelere görünüm kuralları uygular. Kuralın başındaki seçici hangi öğelerin etkileneceğini belirtir; süslü parantez içindeki bildirimler neyin değişeceğini söyler. color bir özelliktir, tomato onun bir değeridir. Aynı öğeye birden fazla kural uygulanabildiği için tarayıcı uygun değerleri kaskad kurallarıyla seçer.

İlk örneklerde style etiketi kullanmak tek dosyada deneme yapmayı kolaylaştırır. Proje büyüyünce kuralları ayrı bir CSS dosyasına ayırabilirsin. Her değişiklikte hem HTML hem CSS dosyasını kaydet; tarayıcıda doğru dosyayı açtığını kontrol et. Yüklenmeyen bir dosya ile eşleşmeyen bir seçici birbirinden farklı hatalardır.

Bir özelliği değiştirmeden önce hangi sonucu beklediğini yaz. Sonra yalnızca o özelliği değiştir ve farkı gözlemle. Aynı anda renk, boyut, boşluk ve yerleşimi değiştirmek hangi kuralın ne yaptığını anlamanı zorlaştırır. Geliştirici araçlarının Styles ve Computed bölümleri hangi bildirimin gerçekten uygulandığını gösterir.

İlk örneği oku ve dene

1

İlk CSS kuralın

Bir CSS kuralında önce hangi öğeyi seçtiğini (h1), sonra süslü parantez içinde özelliği ve değerini (color: tomato;) yazarsın. Bu derslerde CSS'i <style> etiketinin içine yazıyoruz.

CSS 
<style>
  h1 {
    color: tomato;
    font-size: 40px;
  }
</style>

<h1>Merhaba CSS!</h1>

▶ Sonuç

Domates kırmızısı renkte, büyük bir "Merhaba CSS!" başlığı görünür.

Adım adım neden böyle çalışıyor?

  1. h2 seçicisi sayfadaki bütün h2 öğelerini seçer.
  2. color yazının rengini değiştirir; arka plan için background-color kullan.
  3. Özellik ve değer arasında iki nokta, bildirim sonunda noktalı virgül bulunur.
  4. Süslü parantezlerin eksikliği sonraki kuralların da yanlış yorumlanmasına yol açabilir.
101

İkinci çözümlü örnek

Bir CSS kuralının seçici, özellik ve değerini ayırt ederek uygulamak.

CSS 
<style>
  h2 { color: #245f9e; font-size: 28px; }
  p { color: #334155; line-height: 1.7; }
</style>
<h2>Bugünkü hedefim</h2>
<p>Bir CSS kuralını açıklayabiliyorum.</p>

▶ Sonuç

Mavi bir h2 ve rahat satır aralığına sahip koyu paragraf.

Kolaydan zora sen dene

  1. Başlığın yalnızca rengini değiştir; sonucu tahmin et.
  2. İkinci bir h2 ekle; ikisinin de neden etkilendiğini anlat.
  3. Aynı başlığa ikinci bir color kuralı ekle; DevTools ile hangisinin kazandığını incele.
İpucunu aç

Aynı özgüllük ve koşullarda daha sonra yazılan bildirim kazanabilir; üstü çizilmiş bildirime bak.

Üç görevin açıklamalı çözümünü oku
  1. Yalnızca color değerini değiştir; diğer özellikleri sabit tut.
  2. h2 seçicisi yeni eklenen ikinci h2 ile de eşleşir.
  3. Aynı koşul ve özgüllükte daha sonraki bildirim kazanabilir; Computed/Styles ile gözlemle.
Bir çözüm varyasyonu gör
201

Çözüm varyasyonu

Önce kendi görevlerini dene. Bu varyasyonda girdi ve sonuçları karşılaştır.

CSS 
<style>
h2 { color: #a33b31; }
p { font-size: 18px; line-height: 1.8; }
</style>
<h2>Deneme başlığı</h2><p>Okunabilir bir paragraf.</p>

▶ Sonuç

Kırmızımsı başlık ve 18px paragraf.

Yaygın hata ve çözümü

  1. CSS dosyası yüklenmiyorsa link href yolunu Network bölümünde denetle.
  2. Kural yükleniyor ama uygulanmıyorsa seçicinin öğeyle eşleşmesini incele; rastgele !important ekleme.

Kendini değerlendir

Yazı rengini hangi özellik değiştirir?

Ezberlemeden açıklayabiliyor musun?

color ve background-color aynı şeyi mi değiştirir?

Açıklamalı yanıt

Hayır; color metnin, background-color öğenin arka planının rengini belirler.

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.

Resmî dil belgeleri
Bu içerik işine yaradı mı?

Görüşünü aşağıdan işaretleyebilir ve varsa notunu bırakabilirsin.