Tür seçiciler
Etiket adıyla eşleşen seçicileri öğrenirsin.
Tür seçici nedir?
CSS'te bir tür seçicisi (type selector) HTML etiketinin adını doğrudan yazar. Açılış ve kapanış işaretleri olmadan, yalnızca ad. Örneğin p seçicisi sayfadaki tüm paragrafları bulur; h1 tüm birinci düzey başlıkları, a tüm bağlantıları.
Tür seçicileri kaba kuvvettir: eşleşen her öğeyi yakalar. Bu yüzden site geneli varsayılan stiller için uygundur — tek satır, onlarca öğe.
Her eşleşen öğeyi biçimler
Bir tür seçicisi yazdığında, tarayıcı o etiketten gelen tüm öğeleri bulur ve aynı stilleri uygular. h1 { font-family: serif; } yazarsan, sayfadaki her h1 aynı aileyi kullanır.
Sonradan yeni bir h1 eklersen otomatik olarak aynı biçimi alır. Tür seçicileri bu yüzden tutarlı bir taban için idealdir.
Birden çok tür seçicisi
Gerçek bir stil sayfasında birçok tür seçicisi yan yana çalışır. body, h1, p, a — her biri farklı bir taban belirler ve tarayıcı hepsini birlikte uygular.
İki tür seçicisi aynı özelliği farklı değerle ayarlarsa, dosyada sonra yazılan geçerli olur. Bu davranışı sonraki derslerde daha ayrıntılı ele alacağız.
Uygulama h2 için renk tanımla
Bir h2 tür seçicisi yaz ve color: navy özelliğini ata. Seçici etiketin adıyla başlamalı; açısal parantez yok.
Örnek çözümü göster
/* h2 seçicisini ekle */
h2 {
color: navy;
}Kendini test et
-
p seçicisi neyi eşleştirir?
p { line-height: 1.5; }- Yalnızca <p> kimliğine sahip öğeyi
- Sayfadaki tüm paragrafları
- Yalnızca sınıfı 'p' olan öğeleri
- Hiçbir şeyi, geçersiz bir seçicidir
Cevabı göster
Sayfadaki tüm paragrafları — Doğru. p bir tür seçicisidir ve sayfadaki tüm paragrafları eşleştirir.
-
Paragraf seçicisini yaz
____ { line-height: 1.5; color: #333; }Cevabı göster
p { line-height: 1.5; color: #333; } -
Tür seçicisini hedefine eşle
- p
- Tüm paragraflar
- h1
- Birinci düzey başlık
- a
- Tüm bağlantılar
- img
- Tüm görseller