Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2018-11-02 11:49:01
Original
3524 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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

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

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

all:initial;
Nach dem Login kopieren

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

all:inherit;
Nach dem Login kopieren

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

all:unset;
Nach dem Login kopieren

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

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

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

Mobile/Tablet-Version

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage