Ö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; }