Bir html web sayfasındaki tüm öğeler için yazı tipi nitelikleri nasıl belirlenir?

127

Yazı tipi ailesini, yazı tipi boyutunu, rengini vb. Ayarladığımda, bazı iç içe yerleştirilmiş öğeler bunları çirkin tarayıcı varsayılanlarıyla geçersiz kılıyor gibi görünüyor.

Sayfamdaki herhangi bir öğe türü için bu düzinelerce kez gerçekten belirtmeli miyim, yoksa bunları küresel olarak bir kez ve sonsuza kadar ayarlamanın bir yolu var mı?

Bu nasıl yapılır?

css

— Gururlu Üye
kaynak

1

Şu anda yazı tipi ailesini, boyutunu ... tam olarak nasıl ayarlıyorsunuz?

— thecoop

251

* {
 font-size: 100%;
 font-family: Arial;
}

Yıldız işareti tüm öğeleri ifade eder.

— Bazzz
kaynak

15

Bu işe yarıyor, ancak en iyi çözüm değil. Tarayıcı "*" işaretini gördüğünde, sayfadaki tüm HTML öğeleri arasında döngü oluşturur ve CSS'yi bunlara uygular. Kuralın mantıklı olmadığı unsurlar için bile. HTML'nin boyutuna bağlı olarak bu, sayfanın oluşturulmasını yavaşlatabilir.

— Cesar Canassa

4

Kabul ediyorum, ancak BugAlert'in istediği gibi CSS'yi TÜM öğelere uygular. TÜM unsurları etkilemek isterse, performansın biraz düşmesi beklenebilir. :)

— Bazzz

1

Ayrıca, bundan daha ağır olan diğer stil bildirimlerine karşı güvenli olmak için her stil bildiriminin sonuna!

— S.

4

5 yıl geçtiğini biliyorum, ama şimdiye kadar kimsenin fark etmediğine şaşırdım: "yazı tipi ailesi" içinde asla bir Windows yazı tipi belirtmemelisiniz (tabii ki bir web yazı tipi olmadığı sürece) - Arial, helvetica, sans-serif daha fazlası uyumlu.

— rob74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}Yazı tipinin *,:before,:after{font-family:inherit;}kalıtımı ve geçersiz kılmalardan gerçekten kaçınmak istiyorsanız şunu kullanın: evrensel bir seçici kullanmanız gerekiyorsa, bunun yerine kalıtımı kullanın.

— darcher

18

IE kullanıyorsanız, tablolar gibi belirli öğeler için tarayıcı varsayılanlarına dönme ihtimali vardır. Buna aşağıdaki CSS gibi bir şeyle karşı koyabilirsiniz:

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

Düzenleme: CSS sıfırlamaları hakkında bilgi almak isteyebilirsiniz; bunun gibi konuları gör

— Paul
kaynak

10

Bu tavsiyeyi yeterince vurgulayamıyorum: bir sıfırlama stil sayfası kullanın, ardından her şeyi açıkça ayarlayın. Tarayıcılar arası CSS geliştirme sürenizi yarıya indirir.

Eric Meyer'in reset.css'yi deneyin .

— Chris Cox
kaynak

Bu reset.css'yi kullanmak için, stil sayfasını sayfama mı bağlamalıyım yoksa ince ayar yapmam mı gerekiyor? Temel olarak tüm büyük tarayıcılarda aynı yazı tipi ailesine ve boyutuna sahip olmam gerekiyor. Reset.css bunu varsayılan olarak yapmama yardımcı olur mu?

— Darth Coder

1

Ayrı olarak bağlamak yerine kopyalayıp stil sayfamın başına yapıştırma eğilimindeyim, bir HTTP isteği kaydediyor. Tarayıcılar arasında tutarlı stiller belirlemenize yardımcı olacaktır çünkü her şeyi sıfırlar: yazdıklarınız tek stiller olacaktır.

— Chris Cox

Teşekkürler! Denedim ve sorunlarımın çoğunu çözdü. Bununla birlikte, stil sayfamın aynı özelliklerine rağmen, yazı tipi boyutunda Chrome ve Firefox arasında bir fark görebiliyorum. Bununla ilgili herhangi bir fikrin var mı? Ayrıca, bu iyi bir uygulama mı?

— Darth Coder

8

bunları gövde etiketinde ayarlayabilirsiniz

body
{
    font-size:xxx;
    font-family:yyyy;
}

— jimplode
kaynak

13

Bu doğru değildir çünkü çoğu tarayıcı bu yazı tipini bazı öğelere uygulamaz (öğeler yazı tipi stilini miras almaz)

— travis-146

@ travis-146 hangi tarayıcılar? hangi unsurlar? tüm tarayıcıların uyması gereken bir özellik olduğunu biliyorsunuz.

— Bamieh

@Bamieh, Chrome 72'de (beni buraya getiren) belirli bir örnek, yazı tipini bir düğme veya seçim menüsü içindeki metne uygulamamasıdır.

— Nick Silvestri

2

Öğeniz için CSS nitelikleri belirtirseniz, daha sonra stil sayfasında onları geçersiz kılmadığınız sürece, bodyiçindeki her şeye uygulanmalıdır <body></body>.

— Tyler Treat
kaynak

0

Vücuttaki tüm öğelerin stillerini ayarlamak istiyorsanız, sonraki kodu kullanmalısınız ^

  body{
    color: green;
    }

— Stepan Poperechnyi
kaynak