Verstehen Sie die Verwendung des All-Attributs von CSS3

1. Kompatibilität

Wie unten dargestellt:

Die Kompatibilität ist ok. Bis auf den IE sind alle anderen Browser grundsätzlich grün. Ich kann ihn für meine eigenen Unterhaltungs- und Intranetprojekte verwenden.

2. Wofür wird das alles verwendet?

Das Attribut „all“ ist eigentlich eine Abkürzung für „all CSS Properties“, was bedeutet, dass alle CSS-Eigenschaften so oder so sind, außer dass die beiden CSS-Eigenschaften „unicode-bidi“ und „direction“ nicht dazugehören.

Warum existiert diese CSS-Eigenschaft?

Wir wissen möglicherweise, dass einige CSS-Eigenschaftswerte grundsätzlich allen CSS-Eigenschaften gemeinsam sind, beispielsweise die Vererbung!

Wenn wir das CSS-Eingabefeld zum Zurücksetzen verwenden, gibt es Code ähnlich diesem (es kann sich tatsächlich um einen bestimmten Wert mit ähnlicher Wirkung handeln):

Eingabe, Textbereich {
    Farbe: erben;
    Schriftgröße: erben;
    Schriftfamilie: erben;
}

Da diese Art von Eingabesteuerung über eine eigene integrierte Größe und Schriftart verfügt, muss sie zurückgesetzt werden.

An diesem Punkt werden Sie feststellen, dass diese Attributwerte alle vererbt werden. Es wäre großartig, wenn sie zusammengeführt werden könnten!

Zum Zusammenführen wird die CSS-Eigenschaft „all“ verwendet.

Eingabe, Textbereich { 
   alle: erben; 
}

Dies dient nur zu Demonstrationszwecken. Es wird eigentlich nicht auf diese Weise verwendet, da all:inherit die Hintergrundfarbe und andere Dinge vom übergeordneten Element erbt, was meiner Meinung nach nicht das ist, was Sie sehen möchten.

3. Grammatik und Unterscheidung

Die Syntax lautet wie folgt:

alle: Initiale;
alle: erben;
alle: nicht gesetzt;

/* CSS4-Funktionen, ignorieren */
alle: zurücksetzen;

Das Standard-HTML und -CSS sieht folgendermaßen aus, ein herkömmlicher Tag-Inhalt mit einem Titel und einer Liste:

<Artikel>
    <h6>Titel</h6>
    <p>p Änderungen am Text</p>
    <ol>
        <li>Sortierte Liste 1</li>
        <li>Sortierte Liste 2</li>
        <li>Sortierte Liste 3</li>
    </ol>
    <textarea>Textbereich</textarea>
</Artikel>
Artikel {
    Hintergrundfarbe: #f0f3f9;
    Farbe: grün;
}
Artikel > Textbereich {
    Rand: 1px durchgezogen #34538b;
    Hintergrundfarbe: #ffffe0;
    Farbe: rot;
}

Wie Sie sehen können:

Die Farben, Abstände und der Status der Textfelder entsprechen unserer Meinung nach dem richtigen Aussehen.

Klicken Sie nun auf das Dropdown-Menü „Demo“ und wählen Sie den entsprechenden Attributwert aus, um den folgenden CSS-Effekt zu erzielen:

.initial > * {
    alle: Initiale;
}
.erben > * {
    alle: erben;
}
.unset > * {
    alle: nicht gesetzt;
}

Ergebnis:

Initial bedeutet der Anfangswert, d. h. alle untergeordneten Elemente der ersten Ebene unter dem Artikelelement verwenden den Anfangswert von CSS mit Ausnahme von Unicode-Bidi und Richtung.

Beispielsweise verfügen die Elemente <h6> und <p> nicht über die integrierte display:block-Funktion im Browser und sind nun Inline-Elemente, d. h. sie werden in einer Zeile angezeigt:

Die Schriftgröße verwendet ebenfalls die von der Browsersoftware selbst festgelegte Größe von 16 Pixeln und die Farbe ist ebenfalls Schwarz, was die Standardeinstellung der Browsersoftware selbst ist. Ändern Sie beispielsweise die Schriftgröße in Ihren Browsereinstellungen von mittel auf groß:

Sie werden feststellen, dass auch der angezeigte Textinhalt größer geworden ist:

Da wir nur anfängliche Einstellungen für die untergeordneten Elemente der benachbarten Ebene vorgenommen haben, ist das <li>-Element nicht betroffen. Da jedoch die Standardeinstellung für das <li>-Element Punkte ist, wenn das übergeordnete Element unbekannt ist, werden die Zahlen hier in Punkte geändert und sowohl der Listenstiltyp als auch die Listenstilposition werden geändert.

„Inherit“ bedeutet Vererbung, d. h. alle angrenzenden untergeordneten Elemente unter dem Artikelelement erben das CSS des <article>-Elements mit Ausnahme von Unicode-Bidi und Richtung.

Daher sind die Elemente <h6> und <p> immer noch blockförmig, die Hintergrundfarbe ist die Hintergrundfarbe des Elements <article> und die Farbe ist dieselbe wie bei <article>, nämlich grün (die rote Farbe des Textbereichs wird entfernt).

Nicht nur das obige CSS, sondern auch Padding/Margin werden übernommen, aber der Standardwert ist 0, was nicht offensichtlich ist. Lassen Sie uns dies leicht ändern, indem wir beispielsweise dem Element <article> einen Margin-Wert zuweisen:

Als Ergebnis blühten alle diese untergeordneten Elemente auf:

nicht gesetzt

Unset bedeutet, die Einstellung aufzuheben, d. h. alle CSS der angrenzenden untergeordneten Elemente unter dem Artikelelement außer Unicode-Bidi und Richtung werden entfernt. Was sollten wir verwenden, wenn wir sie nicht möchten? Die Eigenschaften des nicht festgelegten Werts sind wie folgt: Das vom aktuellen Elementbrowser oder Benutzer festgelegte CSS wird ignoriert, und wenn es sich um ein CSS mit geerbten Eigenschaften wie Farbe handelt, wird der geerbte Wert verwendet. Wenn es sich um eine CSS-Eigenschaft ohne geerbte Eigenschaften wie Hintergrundfarbe handelt, wird der Anfangswert verwendet.

Daher verwendet der Anzeigeattributwert der Elemente <h6> und <p> den Anfangswert, sodass sie zu Inline-Elementen werden und in derselben Zeile angezeigt werden. Die Farbe dieser Elemente verwendet den Vererbungswert, sodass sie alle grün sind. Die Hintergrundfarbe von <textarea> verfügt nicht über die Vererbungsfunktion, daher wird der Anfangswert verwendet, d. h. transparent. Daher ist der Effekt im Screenshot dargestellt.

endlich

Dabei ist so viel CSS involviert, dass mir immer noch kein Szenario einfällt, in dem ich diese CSS-Eigenschaft verwenden müsste. Oder wenn Sie möchten, dass ein spezielles Element plötzlich zu einem normalen Element wird, z. B. ein Div außerhalb eines Eingabefelds und input{all:inherit;}, scheint es ein solches Szenario zu geben, in dem das Eingabefeld weder einen Rahmen, Hintergrund, Abstand noch eine Polsterung benötigt.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.