So löschen Sie den Standardstil in CSS

CSS ist eine Front-End-Entwicklungstechnologie, die Webseiten schöner und einfacher zu bedienen machen kann. Um die Webseite jedoch schöner aussehen zu lassen, verwenden wir möglicherweise viele CSS-Stile, was dazu führt, dass die Webseite ihren ursprünglichen Stil verliert oder sogar nicht mit dem gewünschten Effekt übereinstimmt. In diesem Artikel werden einige Techniken zum Löschen von Standard-CSS-Stilen vorgestellt, um die Grundprinzipien von CSS besser zu verstehen.

1. CSS-Reset

CSS-Reset ist eine Technik zum Löschen des Standardstils. Es kann alle Standardstile im Browser löschen und dadurch alle Standarderscheinungen und -effekte auf der Webseite löschen. CSS Reset kann manuell oder mithilfe einiger vorgefertigter Tools implementiert werden. Hier ist ein handgeschriebenes CSS-Reset-Beispiel:

*{

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
line-height: 1;
vertical-align: baseline;
list-style: none;

}

Mit diesem Code werden die Ränder, der Abstand, die Rahmen, die Schriftgröße, die Schriftstärke, der Schriftstil, die Zeilenhöhe, die vertikale Ausrichtung und die Listenstile aller Elemente zurückgesetzt auf Standardwerte zurück. Auf diese Weise stellen wir sicher, dass jedes Element nur auf dem Basis-CSS funktioniert und nicht vom ursprünglichen CSS und dem Standardstil des Browsers beeinflusst wird.

2. Normalize.css

Obwohl CSS Reset die Standardstile vollständig löschen kann, möchten wir manchmal einige Standardstile beibehalten und einfach eine bessere Kontrolle über sie haben. Zu diesem Zeitpunkt müssen Sie Normalize.css verwenden. Normalize.css ist eine CSS-Datei zur Standardisierung von Stilen, die den Standardstil des Browsers selbst beibehalten und gleichzeitig Stilunterschiede zwischen Browsern vereinheitlichen kann. Das Folgende ist der Beispielcode:

/! normalize.css v8.0.1 |. github.com/necolas/normalize.css /

/* Document
========== == ============================================== == ========== */

/**

• 1. Korrigieren Sie die Zeilenhöhe in allen Browsern.
• 2. Verhindern Sie Anpassungen der Schriftgröße nach Ausrichtungsänderungen in iOS.
     */

html {
Zeilenhöhe: 1,15; / 1 /
-webkit-text- Größenanpassung: 100 %; / 2 /
-ms-text-size-adjust: 100 %; / 2 /
antialiased;
box-sizing: border-box;
}

/* Abschnitte

============================ == ======================================= */

/**

Entfernen Sie den Rand in allen Browsern.
• */
  

body {

margin: 0;
padding: 0;
}
...

Der obige Code ist nur ein kleiner Teil von Normalize.css, der die allgemeinen HTML-Teile des Browsers zurücksetzt nach Bedarf. Mit Normalize.css können wir sicherstellen, dass verschiedene Browser Webseiten normal anzeigen können, ohne dass es zu Störungen durch Standardstile kommt.

3. Verwenden Sie Selektoren

Zusätzlich zur Verwendung von CSS Reset und Normalize.css können wir auch Selektoren verwenden, um den Standardstil zu löschen. Durch das Hinzufügen eines Auswahlstils können wir den Standardstil im Browser problemlos entfernen. Hier ist der Beispielcode:

html,body,h1,h2,h3,h4,p,ol,ul,li,blockquote {

margin:0;
padding:0;

}

Hier haben wir eine durch Kommas getrennte Liste von Elementen verwendet, um einige zu kombinieren der am häufigsten verwendeten HTML-Elementstile werden auf 0 zurückgesetzt. Auf diese Weise können wir jederzeit Elemente hinzufügen, die zurückgesetzt werden müssen, und den Standardstil des Browsers löschen.

4. CSS-Bibliothek verwenden

Um das manuelle Schreiben von CSS Reset oder Normalize.css zu vermeiden, können wir vorgefertigte CSS-Bibliotheken verwenden. Im Folgenden finden Sie eine Liste einiger gängiger CSS-Bibliotheken:

Bulma;
1. Semantic UI.
3. Diese Bibliotheken bieten alle eine Reihe erweiterter CSS-Stile, die sehr praktisch und praktisch sind Gestaltung von Websites. Mithilfe dieser Bibliotheken können wir viele voreingestellte Stile verwenden, die Standardstile löschen und stabile Basisstile und -layouts verwenden, wodurch die Website-Entwicklung beschleunigt wird.
4. Bei der Verwendung dieser Bibliotheken sollten wir darauf achten, eine Vorschau ihrer Kataloge und Dokumentationen anzuzeigen, um zu verstehen, wie sie codiert sind und welche Bedeutung hinter jedem Stil steckt, um sie effektiv nutzen zu können.

Zusammenfassung

Die CSS-Technologie zum Löschen des Standardstils ist ein grundlegender Vorgang in der Front-End-Entwicklung. Mit Hilfe von CSS Reset, Normalize.css und Auswahlstilen können wir die Standardstile des Browsers löschen und so einfacher schönere und elegantere Webseiten entwerfen. Natürlich ist es auch im eigentlichen Entwicklungsprozess eine gute Wahl, eine CSS-Bibliothek zu verwenden, die uns effiziente, stabile und kompatible Grundstile bieten kann.

Das obige ist der detaillierte Inhalt vonSo löschen Sie den Standardstil in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!