Yükleniyor...

CSS Seçiciler

Bir CSS kuralının iki işi vardır: kimi biçimlendireceğini belirlemek ve nasıl biçimlendireceğini söylemek. “Nasıl” kısmını property, değer ve birimlerle zaten çalıştınız. Bu oturumda “kimi” kısmına odaklanıyoruz: kuralın başındaki seçici (selector).

CSS seçiciler nedir?

Seçici, tarayıcının declaration bloğunu hangi HTML öğelerine uygulayacağını bulmasını sağlayan bir kalıptır. Seçici sayfadaki bir öğeyle eşleşirse, o öğe { } içindeki tüm stilleri alır.

Temel seçici türlerine kısa bakış

Şu dört türle başlayın. Birleştiriciler (combinator), öznitelik (attribute) seçicileri ve sahte sınıflar (pseudo-class) sonraki oturumlarda geliyor; önce öğe, class, id ve * konusunda rahat olun.

📊 Temel CSS seçiciler

Seçici Neyle eşleşir Örnek
Öğe (tür) O etiket adına sahip tüm öğeler p { … }
Class O class özniteliğine sahip öğeler .card { … }
Id O benzersiz id'ye sahip tek öğe #hero { … }
Evrensel Her öğe (ölçülü kullanın) * { … }

Öğe (tür) seçicileri

Öğe seçici sadece etiket adıdır; nokta da yok, kare (#) işareti de. h1 sayfadaki her <h1>'i, p ise her paragrafı biçimlendirir. Bir etiket için tutarlı bir temel görünüm istediğinizde günlük işlerin en geniş kapsamlı aracıdır.

Başlıklar ve paragraflar için öğe seçiciler

css
CSS Code 
h1 {
color: #0f766e;
font-size: 2rem;
}

p {
color: #334155;
line-height: 1.6;
}

Tür seçiciler ne zaman işe yarar

Sitenin geneline ait varsayılanlar için kullanın: body metin rengi, başlık kalınlığı, liste boşlukları. Yalnızca bazı paragraflar farklı görünecekse, tüm p öğelerini değiştirmek yerine bir class tercih edin.

Class seçicileri

Class seçici bir nokta (.) ve ardından class adıyla başlar. HTML'de öğeleri class="card" ile işaretlersiniz. Aynı class birçok öğede bulunabilir; yeniden kullanılabilir tasarımın temel aracının class olmasının nedeni de budur.

Yeniden kullanılabilir kartlar için class seçici

css
CSS Code 
.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}

HTML, class adıyla eşleşmeli

CSS'teki .card yalnızca gerçekten class="card" taşıyan öğeleri (ya da içlerinde card olan birden fazla class'a sahip öğeleri) biçimlendirir. Yazım birebir aynı olmalıdır: .Card ile .card farklıdır.

Id seçicileri

Id seçici bir kare işareti (#) ve ardından id adıyla başlar. HTML'de id="hero" yazarsınız. Bir id sayfada benzersiz olmalıdır; yalnızca tek bir öğede bulunur. Stillerin çoğu için class'ı tercih edin; id'yi gerçekten tek bir kez geçen bir dönüm noktası için saklayın.

Benzersiz bir banner için id seçici

css
CSS Code 
#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}

Evrensel seçici (*)

Evrensel seçici * her öğeyle eşleşir. Bazen basit bir sıfırlama için kullanılır (örneğin box-sizing ayarlamak), ancak her şeye renk ya da margin vermek düzeninizle çatışabilir. Günlük görünüm için daha hedefli seçiciler kullanın.

Dikkatle kullanılan evrensel seçici

css
CSS Code 
* {
box-sizing: border-box;
}

Bir sayfada seçicileri bir arada kullanmak

Gerçek stil sayfaları türleri karıştırır: varsayılanlar için öğe seçiciler, yeniden kullanılan parçalar için class, nadir ve benzersiz hedefler için id. Aşağıdaki küçük stil sayfası bu alışkanlığı gösteriyor; her kuralın bir id'ye ihtiyacı yok.

Bir sayfada seçici türlerinin küçük bir karışımı

css
CSS Code 
body {
font-family: Georgia, serif;
margin: 0;
}

.card {
max-width: 28rem;
margin: 1rem;
}

#hero {
padding: 2rem;
}

Class mı id mi? Pratik bir alışkanlık

  • Düğmeler, kartlar, gezinme bağlantıları ve yeniden kullanabileceğiniz her şey için class tercih edin
  • Id'yi yalnızca hedef gerçekten benzersizse kullanın (sayfadaki tek banner, ana arama kutusu)
  • Biçimlendirdiğiniz her kutu için yeni bir id uydurmayın; bu, yeniden kullanımı engeller ve ileride cascade derslerinde sizi zorlar

Kendiniz deneyin

  1. Bir alıştırma sayfasına <h1>, iki <p>, bir <div class="card"> ve bir <section id="hero"> ekleyin.
  2. h1 ve p için bir öğe kuralı yazın.
  3. .card'a iç boşluk (padding), açık renkli arka plan ve kenarlık (border) verin.
  4. #hero'ya koyu arka plan ve açık renkli metin verin.
  5. İsteğe bağlı: * { box-sizing: border-box; } ekleyin ve kartın içindeki padding'in daha öngörülebilir davrandığını görün.

Sık yapılan hatalar

  • .card { } yazmak isterken card { } yazmak: nokta olmazsa tarayıcı HTML'de var olmayan “card” adlı bir öğe arar
  • #hero { } yerine hero { } yazmak: kare işareti eksik
  • HTML'de class="card" yazıp CSS'te .crd yazmak: eşleşme olmaz, dolayısıyla stil de uygulanmaz
  • Birçok öğeye aynı id'yi vermek: HTML geçersiz olur ve hedefleme öngörülemez hale gelir
  • Tek seferlik bir tasarım için yalnızca tür seçici kullanmak: sadece bir bloğu değiştirmek isterken her p ya da div değişir

Özet

  • Seçiciler, kuralın stillerini hangi HTML öğelerinin alacağını belirler
  • Öğe seçiciler etiket adını kullanır (h1, p)
  • Class seçiciler noktayla başlar (.card) ve HTML'deki class özniteliğiyle eşleşir
  • Id seçiciler kare işaretiyle başlar (#hero) ve benzersiz tek bir öğeyi hedeflemelidir
  • * her şeyle eşleşir: özenli sıfırlamalar için yararlıdır, tüm süslemeler için değil
  • Yeniden kullanılabilir arayüz için class tercih edin; id'leri az ve benzersiz tutun

🧠 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