CSS löscht geerbte Stile

Mit der Entwicklung von CSS ist das Webdesign immer vielfältiger geworden und die Stilvererbung ist zu einem wesentlichen Merkmal geworden. In einigen Fällen möchten wir jedoch manchmal geerbte Stile löschen, um eine flexiblere Kontrolle über das Erscheinungsbild und das Layout der Seite zu haben. In diesem Artikel werden Ihnen verschiedene Methoden zum Löschen geerbter Stile vorgestellt.

1. Stylesheet zurücksetzen verwenden

Die Funktion des Zurücksetzens des Stylesheets besteht darin, die Stile aller Elemente zu löschen und gleichzeitig den Standardstil des Browsers beizubehalten. Durch das Zurücksetzen des Stylesheets werden die Stile aller Elemente zwangsweise zurückgesetzt und die Stile mit dem grundlegenden CSS-Framework neu definiert, um den Zweck der Neuerstellung des benutzerdefinierten Stylesheets zu erreichen.

Das Folgende ist der Code zum Zurücksetzen des Stylesheets:

/* Reset Styles */
html, body, div, span, applet, object, iframe, /* base elements */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, /* headers */
a, abbr, acronym, address, big, cite, code, /* text markup */
del, dfn, em, img, ins, kbd, q, s, samp, /* text formatting */
small, strike, strong, sub, sup, tt, var, /* text formatting */
b, u, i, center, /* misc inline */
dl, dt, dd, ol, ul, li, /* lists */
fieldset, form, label, legend, /* forms */
table, caption, tbody, tfoot, thead, tr, th, td { /* tables */
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

Wenn wir das Reset-Stylesheet verwenden, werden die Stile aller Elemente gelöscht. Es ist jedoch zu beachten, dass wir nach der Verwendung des Reset-Stylesheets eine Neudefinition vornehmen müssen Sämtlicher Stil und Layout, um die Korrektheit der Webseite sicherzustellen.

2. Tag-Selektor verwenden

In CSS ist der Tag-Selektor der einfachste Selektor und kann problemlos auf alle Elemente des Dokuments angewendet werden. Durch die Verwendung von Tag-Selektoren können wir geerbte Stile löschen und die benötigten Stile neu definieren.

Das Folgende ist der Code, um den Tag-Selektor zum Löschen geerbter Stile zu verwenden:

p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #333;
}

Im obigen Beispiel können wir sehen, dass wir den p-Tag-Selektor verwenden, um die geerbten Stile zu löschen und die benötigten Stile neu zu definieren. Dies ist eine sehr praktische Methode, wenn wir die geerbten Stile eines einzelnen Elements löschen müssen.

3. Verwenden Sie das Schlüsselwort !important

!important ist ein allgemeiner CSS-Stilmodifikator, der verwendet werden kann, um die Anwendung von Stilen unter bestimmten Umständen zu erzwingen. Es kann andere Stilregeln außer Kraft setzen und Änderungen verhindern.

Hier ist der Code zum Löschen geerbter Stile mit !important:

p {
  margin: 0!important;
  padding: 0!important;
  font-size: 16px!important;
  line-height: 1.5!important;
  font-weight: 400!important;
  color: #333!important;
}

Im obigen Beispiel können wir sehen, dass wir das Schlüsselwort !important verwenden, um andere Stilregeln zu überschreiben und die Anwendung von Stilen in bestimmten Fällen zu erzwingen. Dies ist eine sehr praktische Methode, wenn wir die Anwendung eines Stils erzwingen müssen.

4. Verwenden Sie Selektoren

In CSS beziehen sich Selektoren auf Muster, die zur Auswahl von HTML-Elementen verwendet werden. Wir können Selektoren verwenden, um geerbte Stile zu löschen und die benötigten Stile neu zu definieren.

Hier ist der Code zum Löschen geerbter Stile mithilfe des Selektors:

div.header p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #333;
}

Im obigen Beispiel können wir sehen, dass wir den Selektor verwendet haben, um alle p-Elemente im Header-Element auszuwählen, ihre geerbten Stile zu löschen und den gewünschten Stil neu zu definieren. Dies ist eine sehr praktische Methode, wenn wir die geerbten Stile von Elementen löschen müssen, insbesondere von verschachtelten Elementen.

Zusammenfassung:

In diesem Artikel werden vier Methoden zum Löschen vererbter Stile vorgestellt. Verwenden Sie das Stylesheet zurücksetzen, den Tag-Selektor, das Schlüsselwort !important und den Selektor. In der tatsächlichen Entwicklung wählen wir die entsprechende Methode entsprechend unseren eigenen Anforderungen aus, um das Erscheinungsbild und Layout der Seite flexibler zu steuern.

Das obige ist der detaillierte Inhalt vonCSS löscht geerbte Stile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!