Jak określić atrybuty czcionek dla wszystkich elementów na stronie html?

127

Kiedy ustawiam rodzinę czcionek, rozmiar czcionki, kolor itp., Wydaje się, że niektóre elementy zagnieżdżone zastępują je brzydkimi domyślnymi ustawieniami przeglądarki.

Czy naprawdę muszę je określać kilkadziesiąt razy dla dowolnego elementu na mojej stronie, czy jest sposób, aby ustawić je globalnie raz na zawsze?

Jak to zrobić?

css

— Dumny członek
źródło

1

Jak dokładnie ustawiasz rodzinę czcionek, rozmiar ...?

— thecoop

251

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

Gwiazdka oznacza wszystkie elementy.

— Bazzz
źródło

15

To działa, ale nie jest to najlepsze rozwiązanie. Kiedy przeglądarka widzi „*”, przechodzi przez wszystkie elementy HTML na stronie i stosuje do nich CSS. Nawet w przypadku elementów, w których reguła nie ma sensu. W zależności od rozmiaru kodu HTML może to spowolnić renderowanie strony.

— Cesar Canassa

4

Zgadzam się, ale stosuje CSS do WSZYSTKICH elementów, o co prosił BugAlert. Chcąc wpłynąć na WSZYSTKIE elementy, można spodziewać się niewielkiego spadku wydajności. :)

— Bazzz

1

Możesz również dodać! Ważne na końcu każdej deklaracji stylu, aby zabezpieczyć się przed innymi deklaracjami stylu, które przeważają nad tą.

— S ..

4

Wiem, że minęło 5 lat, ale jestem zaskoczony, że nikt nie zauważył do tej pory: nigdy nie należy określać tylko czcionki Windows w „rodzinie czcionek” (chyba że jest to czcionka internetowa) - Arial, helvetica, sans-serif to więcej zgodny.

— rob74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}Dziedziczenie czcionki, a jeśli naprawdę chcesz uniknąć przesłonięć, użyj: *,:before,:after{font-family:inherit;}jeśli musisz użyć selektora uniwersalnego, użyj zamiast tego dziedziczenia.

— darcher,

18

Jeśli używasz IE, jest szansa, że przywróci domyślne ustawienia przeglądarki dla niektórych elementów, takich jak tabele. Możesz temu przeciwdziałać za pomocą czegoś takiego jak następujący CSS:

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;
}

Edycja: możesz przeczytać więcej o resetowaniu CSS; zobacz wątki takie jak ten

— Paweł
źródło

10

Nie mogę wystarczająco podkreślić tej rady: użyj resetowania arkusza stylów, a następnie ustaw wszystko wyraźnie. Skróci to czas tworzenia CSS w różnych przeglądarkach o połowę.

Wypróbuj reset.css Erica Meyera .

— Chris Cox
źródło

Aby skorzystać z tego reset.css, czy muszę po prostu połączyć arkusz stylów z moją stroną, czy też muszę go dostosować? Zasadniczo muszę mieć tę samą rodzinę czcionek i rozmiar we wszystkich głównych przeglądarkach. Czy plik reset.css pomaga mi to zrobić domyślnie?

— Darth Coder

1

Mam tendencję do kopiowania i wklejania go na początku mojego arkusza stylów zamiast łączenia go osobno, zapisuje żądanie HTTP. Pomoże Ci ustawić spójne style we wszystkich przeglądarkach, ponieważ wszystko jest zerowane: jedynymi stylami będą te, które napiszesz.

— Chris Cox

Dzięki! Spróbowałem i rozwiązało to większość moich problemów. Jednak nadal widzę różnicę w rozmiarze czcionki między przeglądarkami Chrome i Firefox, pomimo specyfikacji mojego arkusza stylów. Jakieś pomysły na ten temat? Czy jest to również dobra praktyka?

— Darth Coder

8

możesz ustawić je w tagu body

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

— jimplode
źródło

13

To nie jest dokładne, ponieważ większość przeglądarek nie zastosuje tej czcionki do niektórych elementów (elementy nie odziedziczą stylu czcionki)

— travis-146,

@ travis-146 jakie przeglądarki? jakie elementy? wiesz, że istnieje specyfikacja, której muszą przestrzegać wszystkie przeglądarki.

— Bamieh,

@Bamieh Jeden konkretny przykład (który mnie tu sprowadził) w Chrome 72 polega na tym, że nie stosuje on czcionki do tekstu w przycisku lub menu wyboru.

— Nick Silvestri,

2

Jeśli określisz atrybuty CSS dla swojego bodyelementu, powinno to dotyczyć wszystkiego w ramach <body></body>, o ile nie zastąpisz ich później w arkuszu stylów.

— Tyler Treat
źródło

0

Jeśli chcesz ustawić style wszystkich elementów w body, powinieneś użyć następnego kodu ^

  body{
    color: green;
    }

— Stepan Poperechnyi
źródło