Gruplama ve virgül
Birden çok seçiciyi virgülle gruplamayı öğrenirsin.
Virgülle gruplama
Birden çok seçiciye aynı stilleri uygulamak istersen aralarına virgül koyarak gruplarsın. h1, h2, h3 { color: navy; } üç başlık türünü de navy yapar.
Virgül 've' anlamına gelir: her seçici ayrı ayrı değerlendirilir ve hepsi aynı stil bloğunu paylaşır. Bu, tekrarı azaltır ve sayfanı düzenli tutar.
Farklı türleri karıştır
Gruplama yalnızca aynı türden seçicilerle sınırlı değildir. Tür, sınıf ve kimlik seçicilerini istediğin gibi karıştırabilirsin. h1, .title, #slogan { font-weight: bold; } geçerli bir gruplamadır.
Her seçici kendi başına değerlendirilir; ortak olan yalnızca sonuçtaki stillerdir. Bu esneklik gerçek temaları düzenlerken işini çok kolaylaştırır.
Uygulama Üç başlığı grupla
h1, h2 ve h3 seçicilerini virgülle tek bir grup hâline getir ve font-family: serif tanımla. Üç seçici de aynı stil bloğunu paylaşmalı.
Örnek çözümü göster
/* başlıkları grupla */
h1, h2, h3 {
font-family: serif;
}Kendini test et
-
Bu gruplama ne yapar?
h1, h2, h3 { color: navy; }- Yalnızca h1'i navy yapar
- Yalnızca en son yazılan h3'ü navy yapar
- Hata verir; virgülle gruplama yapılamaz
- h1, h2 ve h3'ün hepsini navy yapar
Cevabı göster
h1, h2 ve h3'ün hepsini navy yapar — Doğru. Virgülle gruplanan üç seçicinin hepsi aynı stil bloğunu paylaşır.
-
Üçüncü başlığı gruba ekle
h1, h2, ____ { font-family: serif; }Cevabı göster
h1, h2, h3 { font-family: serif; } -
Seçici listesini anlamına eşle
- h1, h2, h3
- Üç başlık türü
- .btn, .link
- İki sınıf
- #header, #footer
- İki kimlik
- *
- Tüm öğeler