Türü - CSS Hileleri

Anonim

Bir Tür Seçici (bazen Öğe Türü Seçici olarak da adlandırılır), öğeleri karşılık gelen öğe düğüm adıyla eşleştirir, örneğin

, ve etiketler. Tür seçiciler genellikle bir sitenin stilinde "geniş kontur" değişiklikleri yapmak için kullanılır.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Genel kullanım

Tarayıcı varsayılanlarını geçersiz kılma amacını taşıyan CSS sıfırlamasında olduğu gibi, çoğu zaman Tür Seçiciler varsayılan olarak ayarlanır. Popüler bir CSS sıfırlaması olan normalize.css'nin ilk satırından bir örnek:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )

Yukarıdaki Tür Seçiciler, bu etiketlerin görüntüleme özelliğini engellenecek şekilde ayarlıyor, böylece site genelinde bu etiketlerden herhangi biri kullanıldığında, daha özel bir stil ile üzerine yazılmadıkça bunlar blok olarak görüntülenecek.

En İyi Uygulamalar

Yalnızca Tip Seçici ile ince ayrıntı değişikliklerinin uygulanması genellikle kötü bir uygulama olarak kabul edilir. Örneğin, tüm etiketlere kapsamlı bir şekilde "renk: beyaz" özelliği uygulamak, herhangi bir sitede nadiren işe yarar. Bunun nedeni, etiketlerin genel olması ve sitelerde çeşitli amaçlarla kullanılmasıdır.

Ancak, gibi bir Tür Seçici ile body ( )varsayılan ayarlamak yaygındır font-size ve line-heightyaygındır. Bunun nedeni kısmen , herhangi bir sayfada yalnızca bir etiket olabileceğinden, çakışmalar için daha az fırsat bulunmasıdır.

Tip Seçici Özelliği ve Performansı

Tür Seçiciler, özgüllük kademesinin en düşük seviyesindedir (genellikle 0, 0, 0, 1 olarak yazılır), yani neredeyse her şeyin yalnızca bir Tür Seçici aracılığıyla uygulanan stili geçersiz kılacağı ve bir sınıfa veya kimliğe bir Tür Seçici ekleyeceği anlamına gelir. CSS'niz minimum ekstra özellik sağlar.

Tür Seçiciler ayrıca CSS verimlilik ölçeğinde sınıflara ve kimliklere göre daha düşük sıralanır. Bu nedenle, daha genel Tip Seçici yerine bir sınıf veya kimlik kullanmak teknik olarak daha iyi bir performans seçimidir (gerçek hız farkı genellikle ihmal edilebilir olsa da).

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
Hiç Hiç Hiç Hiç Hiç Hiç Hiç