Wie gebe ich Schriftattribute für alle Elemente auf einer HTML-Webseite an?

126

Wenn ich die Schriftfamilie, Schriftgröße, Farbe usw. einstelle, scheinen einige verschachtelte Elemente diese mit hässlichen Browser-Standardeinstellungen zu überschreiben.

Muss ich diese wirklich Dutzende Male für ein Element auf meiner Seite angeben, oder gibt es eine Möglichkeit, sie ein für alle Mal global festzulegen?

Wie geht das?

css

— Stolzes Mitglied
quelle

1

Wie genau stellen Sie derzeit die Schriftfamilie, Größe ... ein?

— Thecoop

250

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

Das Sternchen impliziert alle Elemente.

— Bazzz
quelle

15

Das funktioniert, ist aber nicht die beste Lösung. Wenn der Browser das '*' sieht, durchläuft er alle HTML-Elemente auf der Seite und wendet das CSS auf sie an. Auch für Elemente, bei denen die Regel keinen Sinn ergibt. Abhängig von der Größe des HTML-Codes kann dies das Rendern der Seite verlangsamen.

— Cesar Canassa

4

Stimmen Sie zu, aber es wendet das CSS auf ALLE Elemente an, wie BugAlert es verlangt hat. Wenn man ALLE Elemente beeinflussen möchte, kann man erwarten, dass sich die Leistung etwas verringert. :)

— Bazzz

1

Sie können auch! Important am Ende jeder Stildeklaration hinzufügen, um sich vor anderen Stildeklarationen zu schützen, die diese überwiegen.

— S ..

4

Ich weiß, dass es 5 Jahre her ist, aber ich bin überrascht, dass bis jetzt niemand etwas bemerkt hat: Sie sollten niemals nur eine Windows-Schriftart in "Schriftfamilie" angeben (es sei denn natürlich, es handelt sich um eine Webschrift) - Arial, Helvetica, Sans-Serif ist mehr kompatibel.

— Rob74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}Die *,:before,:after{font-family:inherit;}Vererbung von Schriftarten und wenn Sie Überschreibungen wirklich vermeiden möchten, verwenden Sie: Wenn Sie einen universellen Selektor verwenden müssen, verwenden Sie stattdessen die Vererbung.

— Darcher

18

Wenn Sie den Internet Explorer verwenden, werden wahrscheinlich die Standardeinstellungen des Browsers für bestimmte Elemente wie Tabellen wiederhergestellt. Sie können dem mit dem folgenden CSS entgegenwirken:

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

Bearbeiten: Möglicherweise möchten Sie sich über CSS-Resets informieren. siehe Themen wie dieses

— Paul
quelle

10

Ich kann diesen Rat nicht genug betonen: Verwenden Sie ein Reset-Stylesheet und legen Sie dann alles explizit fest. Dadurch wird Ihre browserübergreifende CSS-Entwicklungszeit halbiert.

Versuchen Sie Eric Meyers reset.css.

— Chris Cox
quelle

Verknüpfe ich das Stylesheet einfach mit meiner Seite oder muss ich es optimieren, um diese reset.css zu verwenden? Grundsätzlich muss ich in allen gängigen Browsern die gleiche Schriftfamilie und -größe haben. Hilft mir die Datei reset.css dabei standardmäßig?

— Darth Coder

1

Ich neige dazu, es am Anfang meines Stylesheets zu kopieren und einzufügen, anstatt es separat zu verknüpfen. Dadurch wird eine HTTP-Anforderung gespeichert. Es hilft Ihnen dabei, konsistente Stile für alle Browser festzulegen, da alles auf Null gesetzt wird: Die einzigen Stile sind diejenigen, die Sie schreiben.

— Chris Cox

Vielen Dank! Ich habe es versucht und es hat die meisten meiner Probleme gelöst. Trotz der Spezifikationen meines Stylesheets kann ich jedoch immer noch einen Unterschied in der Schriftgröße zwischen Chrome und Firefox feststellen. Irgendwelche Ideen dazu? Ist das auch eine gute Praxis?

— Darth Coder

8

Sie können sie im Body-Tag festlegen

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

— jimplode
quelle

13

Dies ist nicht korrekt, da die meisten Browser diese Schriftart nicht auf einige Elemente anwenden (die Elemente erben den Schriftstil nicht)

— travis-146

@ Travis-146 Welche Browser? Welche Elemente? Sie wissen, dass es eine Spezifikation gibt, der alle Browser folgen müssen.

— Bamieh

@Bamieh Ein spezielles Beispiel (das mich tatsächlich hierher gebracht hat) in Chrome 72 ist, dass die Schriftart nicht auf Text innerhalb einer Schaltfläche oder eines Auswahlmenüs angewendet wird.

— Nick Silvestri

2

Wenn Sie CSS-Attribute für Ihr bodyElement angeben, sollte dies für alle Elemente gelten, <body></body>solange Sie diese später im Stylesheet nicht überschreiben.

— Tyler Treat
quelle

0

Wenn Sie Stile aller Elemente im Body festlegen möchten, sollten Sie den nächsten Code ^ verwenden

  body{
    color: green;
    }

— Stepan Poperechnyi
quelle