hss veya gövde seçiciye karşı evrensel '*' seçici mi kullanıyorsunuz?

Gövde etiketine stil uygulamak tüm sayfaya uygulanacaktır.

body { font-family: Verdana }

tüm sayfaya uygulanacaktır. Bu aynı zamanda

* {font-family: Verdana} 

bu da tüm unsurlar için geçerli olacak ve aynı etkiye sahip gibi görünecektir.

İlk örnekte stilin tüm sayfaya tek bir etikete, gövdeye uygulandığı, ikinci örnekte ise yazı tipinin her bir html elemanına uygulandığı ilkesini anlıyorum. Sorduğum şey, bunu yapmanın pratik farkı nedir, sonuçları nelerdir ve birinin diğerine kullanımına neden olan bir sebep, durum veya en iyi uygulama nedir.

Bir yan etki kesinlikle hızdır (+1 Rob). En çok işlevsellik açısından birini seçmek için asıl nedenle ilgileniyorum.

CSS seçicinin bu iki seçeneği arasındaki işlevsel farklılıklar ...

vücut

• Gövde öğesine stil özelliklerini uygular.
• Gövde içindeki öğeler özellik değerlerini devralabilir. Bazı özellikler varsayılan olarak 'devralma' şeklindedir.
• Gövde içindeki bir öğeyle eşleşen stil bildirimleri devralınan stili geçersiz kılabilir.

Evrensel Seçici * (tüm öğeler)

• Stil özelliklerini tüm ayrı öğelere uygular.
• Devralınan stil özelliklerini ve varsayılan 'başlangıç ​​değerlerini' değiştirir. Kalıtım engeller.
• Bir öğeyle eşleşen diğer, daha spesifik css seçiciler * tarafından uygulanan stil özelliklerinin yerini alacaktır.

Öneriler

1. Öğeler için mantıklı bir varsayılan değer sağlamak, her durum için açıkça kodlama ihtiyacını azaltmak ve gövdenin altındaki daha düşük düzeylerde bulunan öğelerin ebeveynlerinden miras.
2. Bu durumda Evrensel Seçici'yi * kullanmamanız daha iyidir. Vücuttaki diğer elementler arasındaki kalıtımı kesintiye uğratır ve sizi telafi etmek için daha fazla css kuralı yazmaya zorlayabilir. Sayfaların oluşturulmasını yavaşlatan bir faktör olabilir. Bu, sayfanın boyutuna ve içeriğine ve kaç tane css kuralının olduğuna bağlıdır.

Böyle bir şey dene

body { font-family: Verdana }
table { font-family: Arial }

karşısında

* { font-family: Verdana }
table { font-family: Arial }

Ve tablonun hücrelerine hangi stillerin uygulandığını görün.

Basamaklı stil sayfalarıyla uğraşırken "tüm belgeye uygulandı" ile "belgenin her öğesine uygulandı" arasında bir fark vardır .

Gövdeye basamaklı bir stil uygulamak, bir etiket üzerine yazılana kadar gövdedeki tüm etiketlere uygular. Daha sonra üzerine yazılan stil, bu etiketin içindeki tüm etiketlere uygulanır.

Bununla birlikte, kenar boşluğu ve dolgu gibi (genellikle anlamsız olduğu yerlerde) basamaklanmayan bazı stiller vardır. Bunlar yalnızca belirli etiketlere uygulanabilir ve joker karakter yararlı olabilir (nadiren de olsa).

Çoğu basamaklı olmayan stilin miras değeri de vardır (ör. margin: inherit, "Üst etiketin değerlerini al").

Tüm detayları unuttum, ancak * seçici ile, tarayıcı CSS ayrıştırırken ve stili uygularken her öğe değerlendirilirken performans yavaşlar. iirc, yazı tipini ayarlamak, bu durumda, sadece üst öğe için her öğe için bir referans yapar ve ek çalışma gerekmez.

Başka sorunlar da var, ama yine de hepsini hatırlamıyorum ve yıllar içinde * kullanmadım.

İyi CSS tasarımı için genel kılavuz mümkün olduğunca spesifik olmakla birlikte daha fazla olmamalıdır.

Dolayısıyla, örneğinizde, stili gövde öğesine uygulamak mümkün olduğunca spesifik ve '*' seçicisinden kesinlikle daha spesifik olacaktır.

Diğerleri de söylediğim gibi, body { font-family: Verdana }yalnızca bu unsurlara yazı Verdena seçecektir devralanfont-style böyle mülkiyet eventualy oluşturmak çok miras onun ebeveynlerinin tüm bu onun ebeveynlerden özelliği body, unsur ve * {font-family: Verdana}yazı tipi Verdena seçecektir tüm unsurları. Farkı bir örnekle göstermek istiyorum:

Gövde seçiciyi kullanma:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Evrensel selelctor kullanma *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

<input>Öğenin yazı tipi stilini hiç miras almadığını tanıdığınız örneklerin css ve html kodlarını kullanın ve böylece forma yazdığınız her şey kullanıcı aracısı stil sayfasının varsayılan yazı tipi stilini alır. İkinci örnekte evrensel seçici, *öğe dahil her öğe için yazı tipi stilini açıkça ayarlar input.