Wie CSS mit Browser-Standardstilen umgeht

Dieses Mal zeige ich Ihnen, wie CSS mit dem Standardstil des Browsers umgeht. Was ist zu beachten? Hier ist ein praktischer Fall, schauen wir uns das an.

Entdeckt

Kürzlich habe ich das Format der Webseite angepasst und festgestellt, dass immer ein Abstand von etwa 10 Pixeln vorhanden ist unten auf der Webseite.

Durch die Verwendung des Inspektionselements des Chrome-Browsers habe ich festgestellt, dass es einen Rand-Button namens User Agent Stylesheet gibt, der den Rand-Button des gesamten Formulars festlegt: 1em;

Nachdem ich im Internet gesucht habe, habe ich festgestellt, dass dieses User-Agent-Stylesheet zu den Standardstilen des Browsers gehört. Wenn Sie mit diesem Standardstil nicht zufrieden sind, besteht die einfachste Lösung darin, die Attribute des Stils zurückzusetzen. Da das Stylesheet des Benutzeragenten eine sehr niedrige Priorität hat und überschrieben wird, hat dies keinen Einfluss auf unseren Stil Sprechen Sie über die Form. Der

margin-bottom ist auf 0px eingestellt.

Einführung in das User Agent Stylesheet

Verschiedene Browser haben unterschiedliche Standardstile für dieselben Elemente, weshalb wir * {padding schreiben müssen :0;marging:0};

Aber das ist nicht alles, worüber ich jetzt rede. Grundsätzlich weisen zwei Browser mit unterschiedlichen Kerneln Unterschiede in der Leistung bestimmter Elemente auf, z. B. Einzugsgröße, Schriftartenauswahl, Zeichenstil usw. Vielleicht funktioniert ein sehr schönes CSS-Stylesheet in einem Browser gut und wird in einem anderen Browser auch ohne CSS-Fehler unübersichtlich. Ich denke, dass die Schuld am Standardstil des Browsers liegt.

Daher besteht einer der notwendigen Schritte beim Generieren von CSS-Stilregeln darin, den Standardstil des Browsers zurückzusetzen, dh den Standardstil des Browsers zu überschreiben. Anders als bei der Verwendung von * {padding:0;margin:0} weisen nicht alle Elemente Unterschiede in der Auffüllung und dem Rand auf (der Unterschied zwischen Elementlisten und geordneten Listen in Internet Xplorer und Firefox liegt an ihrer Einrückung. Randeinrückung und Auffülleinrückung).

Zum Beispiel:

Die von diesem Code in Internet Explorer verwendete Schriftart ist Times New Roman, während die in Firefox und Opera verwendete Schriftart die Standardschriftart des Systems ist . Daher müssen wir in CSS einen einheitlichen Stil für

festlegen.

Wenn wir jedoch den Platzhalter „*“ verwenden, um einfach den globalen Stil wie mit * {padding:0;margin:0} festzulegen, entsteht ein offensichtliches Problem, z. B. Formularelemente, Eingabeelemente, Textbereiche usw. ignorieren ihr Zurücksetzen in einigen Browsern, was das Erscheinungsbild dieser Elemente ernsthaft beeinträchtigt, sodass Sie sie einzeln manuell zurücksetzen müssen. Daher sollten wir auf die einfache Verwendung von „*“ verzichten und das erste Element mit inkonsistenter Leistung zurücksetzen, z. B. body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre usw.

Außerdem kann das Standard-Styling von Elementen das Aussehen der Seite beeinträchtigen. Beispielsweise macht das Element den Text fett, mit

wird der Text eingerückt und mit wird der Text gekippt usw. Wenn Sie möchten, dass der Seitentext ein einheitliches Erscheinungsbild hat, Sie sollten auch das Erscheinungsbild dieser Elemente in CSS Reset ändern. Gleichzeitig verlangen wir manchmal, dass das Erscheinungsbild dieser Elemente mit dem des übergeordneten Elements übereinstimmt. Wir können direkt „erben“ verwenden, um vom übergeordneten Element zu erben.

Verarbeitungsmethode

Welche Elemente sollten zurückgesetzt werden? Yahoo! hat für uns eine vergleichende Zusammenfassung erstellt. Gemäß dem Vorschlag von Yahoo müssen Sie diese Regeln in eine Datei namens Reset.css einfügen und separat darauf verweisen (dies wird empfohlen):

html{color:#000;background:#FFF;} 
body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
fieldset,input,textarea,p,blockquote,th,td { 
margin:0; 
padding:0; 
} 
table { 
border-collapse:collapse; 
border-spacing:0; 
} 
fieldset,img { 
border:0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
font-style:normal; 
font-weight:normal; 
} 
ol,ul { 
list-style:none; 
} 
caption,th { 
text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
font-size:100%; 
font-weight:normal; 
} 
q:before,q:after { 
content:''; 
} 
abbr,acronym { border:0; 
}

Alles, was Sie tun müssen, ist, diese Regeln einfach zu speichern. Gehen Sie zum Zurücksetzen .css und verwenden Sie es auf der Seite. Wenn Sie diesen Elementen neue Stile hinzufügen müssen, unterscheidet sich dies nicht von den Einstellungen anderer Elemente.

Hinweis: Eingabe, Textbereich, Auswahl{*font-size:100%;} in reset.css oben kann nur vom Internet Explorer erkannt werden Dadurch soll die Skalierung der Schriftgröße von Formularsteuerelementen im Internet Explorer ermöglicht werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwenden Sie HTML+CSS, um das Dropdown-Menü zu implementieren

Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen

Das obige ist der detaillierte Inhalt vonWie CSS mit Browser-Standardstilen umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!