Suchen Sie auf WeChat nach [Great Move to the World] und ich werde Ihnen so schnell wie möglich die Front-End-Branchentrends, Lernpfade usw. mitteilen. Dieser Artikel GitHub github.com/qq449245884 ... wurde hinzugefügt, und es gibt vollständige Testseiten, Materialien und meine Artikelserie für Interviews mit First-Line-Herstellern.
Kommen Sie und erleben Sie die ChatGpt Plus-Version kostenlos. Wir haben die Erfahrungsadresse bezahlt: chat.waixingyun.cn Sie können der technischen Gruppe unten auf der Website beitreten, um gemeinsam nach Fehlern zu suchen. Die neue Version des Zeichenartefakts wurde gestartet. Cube.waixingyun.cn/home
CSS (Cascading Style Sheets) ist ein leistungsstarkes Werkzeug zum Gestalten und Formatieren von Webdokumenten. In diesem umfassenden Leitfaden untersuchen wir vier spezielle Schlüsselwörter: inherit, und .initialunsetrevert
Erben: Übergeben von Werten von übergeordneten Elementen
inheritDas Schlüsselwort wird verwendet, um explizit anzugeben, dass ein Element den Wert einer CSS-Eigenschaft von seinem übergeordneten Element erbt. Wenn das Attribut auf festgelegt ist inherit, nimmt das Element denselben Wert an wie sein übergeordnetes Element. Dieses Verhalten ist besonders nützlich, wenn Sie in Ihrem gesamten Dokument einen einheitlichen Stil wünschen oder wenn Sie möchten, dass bestimmte Elemente bestimmte Stile von ihren übergeordneten Elementen erben.
Stellen Sie sich beispielsweise ein Szenario vor, in dem Sie über ein Element mit einer zugewiesenen Textfarbe verfügen <div>. Standardmäßig colorwird die Eigenschaft text-color ( ) vererbt, was bedeutet, dass untergeordnete Elemente dieselbe Textfarbe wie das übergeordnete Element haben. Allerdings können Sie inheritdas Schlüsselwort verwenden, um dieses Verhalten explizit zu erzwingen, auch wenn es nicht explizit im CSS des übergeordneten Elements angegeben ist.
div {
color: black; /* Text color of the parent div */
}
a {
color: inherit; /* 从父div继承文本颜色 */
}
In manchen Fällen inheritkann es eine gute Idee sein, die Schriftgröße oder -farbe festzulegen. Beachten Sie jedoch, dass nicht alle Eigenschaften standardmäßig vererbt werden. Für die effektive inheritVerwendung von Schlüsselwörtern ist es wichtig, den Unterschied zwischen geerbten und nicht geerbten Eigenschaften zu kennen.
Anfänglich: Auf Standard zurücksetzen
initialSchlüsselwort, mit dem eine CSS-Eigenschaft auf ihren in der CSS-Spezifikation angegebenen Anfangswert zurückgesetzt wird. Jede CSS-Eigenschaft verfügt über einen Anfangswert, der in der W3C-Spezifikation als Standardwert definiert ist. Durch die Verwendung initialkönnen Sie alle vorherigen Stile überschreiben und Eigenschaften auf ihren ursprünglichen Zustand zurücksetzen.
Der in der Spezifikation definierte Anfangswert kann variieren. Einige Anfangswerte sind intuitiv sinnvoll, während andere willkürlich erscheinen können. Beispielsweise sind float: noneund background-color: transparent Beispiele für Anfangswerte, die allgemeine Erwartungen erfüllen. Allerdings display: inlinmögen Eigenschaften wie e kontraintuitiv erscheinen, aber diese Anfangswerte wurden aus historischen Gründen oder der Notwendigkeit, einen Ausgangspunkt festzulegen, gewählt.
button {
color: initial; /* 将颜色属性重置为初始值 */
}
Beachten Sie, dass initialSchlüsselwörter nur den auf eine bestimmte Eigenschaft angewendeten Wert zurücksetzen und keine Auswirkungen auf andere Eigenschaften oder geerbte Werte haben. Beachten Sie außerdem, dass die in der Spezifikation definierten Anfangswerte möglicherweise nicht immer mit dem gewünschten Verhalten übereinstimmen.
Unscharf: Vollständiger Reset
unsetSchlüsselwörter sind ein leistungsstarkes Tool zum umfassenden Zurücksetzen von CSS-Eigenschaften. Es kombiniert die Funktionalität inheritder Schlüsselwörter und und initialbietet so flexiblere Rücksetzoptionen.
Funktioniert bei nicht geerbten Eigenschaften unsetwie initialdas Schlüsselwort. Es setzt die Eigenschaft auf ihren Anfangswert zurück, wie in der CSS-Spezifikation definiert. Dadurch wird sichergestellt, dass die Immobilie ohne vorherige Stileffekte von vorne beginnt.
div {
margin: unset; /* Resets the margin property to its initial value */
}
Bei geerbten Eigenschaften ist das Verhalten jedoch unsetanders. Dabei wird die Eigenschaft nicht auf ihren Anfangswert zurückgesetzt, sondern das natürliche Verhalten der Eigenschaft wiederhergestellt, einschließlich der Übernahme des Werts vom übergeordneten Element.
p {
color: unset; /* Allows the color property to inherit from its parent */
}
unsetDas Schlüsselwort ist besonders nützlich , wenn Sie eine Eigenschaft pauschal zurücksetzen möchten, unabhängig davon, ob sie vererbt wurde oder nicht
Zurücksetzen: Zum Browserstil zurückkehren
revertSchlüsselwörter sind das neueste Mitglied der CSS-Schlüsselwortfamilie. Ähnlich wie unsetermöglicht es Ihnen, CSS-Eigenschaften zurückzusetzen. Allerdings revertwird der kaskadierende Charakter von Stylesheets berücksichtigt und die Standardstile des Browsers werden respektiert.
Bei Anwendung auf eine Eigenschaft revertwerden alle vorherigen Stile aufgehoben und die Eigenschaft auf den Wert zurückgesetzt, der durch das Standard-Stylesheet des Browsers definiert ist. Im Wesentlichen wird die Eigenschaft in ihren vom Browser festgelegten ursprünglichen Zustand zurückversetzt.
h1 {
font-size: revert; /* Reverts the font-size property to the browser's default */
}
Im obigen Beispiel ist das Attribut font-sizedes Elements auf festgelegt , wodurch es die im Standard-Stylesheet des Browsers definierte Schriftgröße annimmt. Dies stellt die Konsistenz mit dem Gesamtstil der Seite sicher und respektiert die Benutzerpräferenzen.<h1>revert
Zusammenfassen
In diesem umfassenden Leitfaden haben wir die speziellen CSS-Schlüsselwörter , inheritund initialuntersucht . Diese Schlüsselwörter bieten wertvolle Kontrolle über CSS-Eigenschaften und ermöglichen es Ihnen, Werte von übergeordneten Elementen weiterzugeben, Eigenschaften auf ihren Anfangs- oder Standardzustand zurückzusetzen und kaskadierende Stile zu manipulieren.unsetrevert
kommunizieren
Wenn Sie Träume und Trockenwaren haben, suchen Sie auf WeChat nach [Daqian World], um auf diese Spülweisheit zu achten, die noch am frühen Morgen Geschirr spült.
Dieser Artikel GitHub github.com/qq449245884 ... wurde hinzugefügt, und es gibt vollständige Testseiten, Materialien und meine Artikelserie für Interviews mit First-Line-Herstellern.