Özet - Tema iskeleti

Temel seçicileri kullanarak bir tema iskeleti kurarsın.

Beş seçici, tek tema

Bu grupta beş seçici türü öğrendin: tür (p), sınıf (.card), kimlik (#header), evrensel (*) ve öznitelik ([href]). Her birinin görevi farklı.

Virgülle gruplama bunları tek bir stil bloğunda birleştirir. Öncelik sırası çakışma olduğunda kazananı belirler. Şimdi tüm bunları bir tema iskeletinde birleştireceksin.

Uygulama Tema iskeletinin temelini at

İki stil bloğu ekle. Birincisi evrensel seçici *; box-sizing: border-box tanımlasın. İkincisi body tür seçicisi; font-family: sans-serif tanımlasın.

Örnek çözümü göster

/* tema iskeletinin temeli */
* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}

Uygulama Üç seçici daha ekle

Üç ayrı stil bloğu ekle. Birincisi #header kimlik seçicisi; background: navy tanımlasın. İkincisi .card sınıf seçicisi; padding: 1rem tanımlasın. Üçüncüsü a[href] öznitelik seçicisi; color: navy tanımlasın.

Örnek çözümü göster

/* başlık, kart ve bağlantı stilleri */
#header {
  background: navy;
}
.card {
  padding: 1rem;
}
a[href] {
  color: navy;
}

Kendini test et

Aynı öğede çakışırsa hangisi kazanır?
```
#header { padding: 1rem; }
.header { padding: 2rem; }
header { padding: 3rem; }
```
- .header (sınıf seçici)
- header (tür seçici)
- #header (kimlik seçici)
- Dosyada önce yazılan
Cevabı göster

#header (kimlik seçici) — Doğru. Kimlik seçicisi sınıf ve tür seçicisinden daha yüksek önceliğe sahiptir.

Kart sınıfı seçicisini yaz

____ {
  padding: 1rem;
  border-radius: 8px;
}

Cevabı göster

.card {
  padding: 1rem;
  border-radius: 8px;
}

Sıradaki ders: Proje: İlk stil sayfam

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler