Was ist das neue Attribut all in CSS3? Was ist der Nutzen?

Zur Vereinfachung der Web-Front-End-Entwicklung hat CSS3 viele neue Attribute (neue Funktionen) hinzugefügt. In diesem Artikel werden die neuen Attribute von CSS3 vorgestellt, damit jeder die Rolle und Verwendung verstehen kann alle Attribut. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. [Wenn Sie mehr über CSS3 erfahren möchten, empfehlen wir das Videolernen: CSS3-Tutorial]

Lassen Sie uns zunächst verstehen, was das CSS3-All-Attribut ist. Was kann getan werden? Das Attribut

all ist eigentlich die Abkürzung für alle CSS-Attribute, was bedeutet: wie alle CSS-Attribute sein sollten, jedoch sind die beiden CSS-Attribute Unicode-Bidi und Direction nicht enthalten. Daher sollten wir in der Lage sein, die Rolle des All-Attributs zu kennen:

all-Attribut: Sie können alle ausgewählten Elementattribute zurücksetzen, mit Ausnahme der beiden Attribute, die die Textrichtung steuern: das Richtungsattribut und das Unicode-Bidi Attribut.

.demo{
  all: unset;
}

Der Fokus liegt darauf, das Zurücksetzen des Stils auf Komponentenebene zu ermöglichen. Manchmal ist es viel einfacher, den gewünschten Stil von Grund auf festzulegen, als Änderungen am ursprünglichen Stil vorzunehmen.

Werfen wir einen Blick auf die Attributwerte, die durch das All-Attribut festgelegt werden können:

1. Die Attribute aller ausgewählten Elemente werden auf diese zurückgesetzt in der CSS-Spezifikation definierter Anfangswert.

2. erben: Das ausgewählte Element erbt die Stile aller seiner übergeordneten Elemente, einschließlich Stilen, die normalerweise nicht vererbbar sind.

3. nicht gesetzt: Das ausgewählte Element erbt alle vererbbaren Werte, die vom übergeordneten Element weitergegeben werden. Wenn kein vererbbarer Wert verfügbar ist, wird für jede Eigenschaft der Anfangswert aus der CSS-Spezifikation verwendet.

Hinweis:

In CSS definieren einige Eigenschaften die Anfangswerte in der Spezifikation nicht klar, sondern ermöglichen es Benutzern, die Anfangswerte selbst festzulegen, wie z. B. Farben und Schriftfamilien.

all ist eine Abkürzungseigenschaft, da sie es uns ermöglicht, den Wert jeder CSS-Eigenschaft gleichzeitig mit einer einzigen Deklaration zu steuern. Im Gegensatz zu den meisten abgekürzten Eigenschaften gibt es jedoch keine praktische „Langschrift“-Version und keine Untereigenschaften.

Werfen wir einen Blick auf den Demonstrationseffekt aller:

HTML-Code:

<div class="container">
	<div class="parent">
		<div class="alltest">
			<p>Change this div&#39;s <code>all</code> value.</p>
		</div>
	</div>
</div>

CSS-Code:

.container {/* 继承 */
  font-family: sans-serif;
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
}

.parent {
  color: green;/* 继承*/
  
  /* 不继承 */
  background-color: gainsboro;
  width: 80%;
  padding: 1em;
  border: 5px solid #E18728;
}

Rendering (ohne Verwendung des All-Attributs). ) :

Dann legen Sie den .alltest-Selektor fest und fügen jeweils alle Attribute hinzu:

all:initial;

all:inherit;

all:unset;

Beachten Sie, dass das Div bei Verwendung des Inherit-Werts alle Eigenschaften von seinem übergeordneten Element erbt, einschließlich seiner Breite, seines Abstands und seines Rahmens, die normalerweise nicht vererbt werden.

Browser-Unterstützung

Die Zahl gibt an, dass der Browser die Funktionen dieser Version und höher unterstützt.

PC-Version

Mobile/Tablet-Version

Zusammenfassung: Das ist es Der gesamte Inhalt dieses Artikels soll für das Studium aller hilfreich sein.

Das obige ist der detaillierte Inhalt vonWas ist das neue Attribut all in CSS3? Was ist der Nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!