Über CSS-Priorität und Vererbungsprobleme

CSS-Priorität und Vererbungsprobleme

★CSS-Konflikt, das heißt Priorität
Die Die CSS-Einstellungen selbst können mehrere Stile gleichzeitig auf dasselbe Element anwenden. Zu diesem Zeitpunkt können Konflikte zwischen Stilen auftreten und der vom Benutzer gewünschte Effekt kann nicht erzielt werden.
★Prioritätsregeln für die Lösung von CSS-Konflikten:
● Priorität der CSS-Cascading-Stylesheet-Einführungsmethoden: inline > eingebettet >importiert
● Unter mehreren externen Stilen hat der Stil, der später erscheint, eine höhere Priorität als der Stil, der zuerst erscheint, was allgemein als Überschreiben bezeichnet wird.
● Im Stil die Priorität des Selektors: ID-Stil >Klassenstil>Markierungsstil (unter Verwendung der Gewichtungsmetapher: Die Gewichtung der ID beträgt 100, die Gewichtung der Klasse beträgt 10 und die Gewichtung des Tag-Namens beträgt 1)
● Fügen Sie nach dem Stil ein !important hinzu, zum Beispiel: .abc {background:#fff !improtant;} Die Priorität dieses Stils wird standardmäßig auf die oberste Ebene angehoben und der globale Stil kann ihn nicht beeinflussen.
✪Hinweis: !important sollte vor dem Semikolon stehen
Priorität:
Proximity-Prinzip (je näher am Code, desto höher die Priorität)
Je kleiner der Auswahlbereich, desto höher die Priorität. Verfeinern Sie das CSS und wickeln Sie es Schicht für Schicht ein, indem Sie weitere Selektoren des übergeordneten Elements hinzufügen, um den Auswahlbereich einzugrenzen

★Stilvererbung:
Vererbung bezieht sich auf Unsere Einstellungen Der CSS-Stil der oberen Ebene (übergeordnetes Element), sowohl die obere Ebene (übergeordnetes Element) als auch die untergeordneten Elemente (untergeordnetes Element) verfügen über dieses Attribut. Im Allgemeinen verfügt nur Text über geerbte Eigenschaften wie Textgröße, Textfettigkeit, Textfarbe, Schriftart usw. Beachten Sie jedoch, dass einige CSS-Stile nicht vererbt werden. Zum Beispiel Rand: 1px durchgehend rot;

Demo:

<p style="color:red;">如果你不知道自己<span>想做什么该做什么</span>，那你什么都做不好。</p>

Beschreibung: (1) Ich stelle die Textfarbe des Vorgesetzten ein (übergeordnetes Element: p) auf Rot, Die Textfarbe des untergeordneten Elements (Span) ist nicht festgelegt, aber der Text verfügt über Vererbungseigenschaften, sodass der Textinhalt des untergeordneten Elements weiterhin rot ist.
(2) Wenn nach dem Festlegen des übergeordneten Textfarbstils die Farbe einiger untergeordneter Elemente aufgrund der Vererbung mit der des übergeordneten Elements übereinstimmt, ist dies nur erforderlich um die gewünschte Farbe für das entsprechende Kind einzustellen.
✪Hinweis: Es gibt noch ein weiteres besonderes Gewicht – die Vererbung hat auch ein Gewicht, aber es ist sehr niedrig. Einige Literaturstellen legen nahe, dass es nur 0,1 beträgt, sodass davon ausgegangen werden kann, dass die Vererbung das niedrigste Gewicht hat.

Vorteile der Vererbung: Sie können nur die CSS-Stylesheet-Attribute der oberen Ebene festlegen, und die untergeordneten Elemente müssen sie nicht festlegen. Sie alle verfügen über dieses CSS-Attribut, das CSS reduzieren kann Code und erleichtern die Wartung.

★ Eigenschaften, die in CSS vererbt werden können und nicht
1. Eigenschaften ohne Vererbung

1. Anzeige: Gibt die Art der Box an, die das Element generieren soll

2. Textattribut:

vertikale Textausrichtung

text- Dekoration: Geben Sie die dem Text hinzugefügte Dekoration an

text-shadow: Textschatteneffekt

white-space: Die Verarbeitung von Leerzeichen

unicode-bidi: Legen Sie die Richtung fest des Textes

3. Attribute des Box-Modells: Breite, Höhe, Rand, Rand-oben, Rand-rechts, Rand-unten, Rand-links, Rand, Rand-Stil, Rand-Oben-Stil , border-right-style, border-bottom-style, border-left-style, border-width, border-top-width, border-right-right, border-bottom-width, border-left-width, border-color , Rahmenfarbe oben, Farbe Rand rechts, Farbe Rand unten, Farbe Rand links, Rand oben, Rand rechts, Rand unten, Rand links, Polsterung, Polsterung oben, Polsterung rechts , padding-bottom, padding-left

4. Hintergrundattribute: Hintergrund, Hintergrundfarbe, Hintergrundbild, Hintergrundwiederholung, Hintergrundposition, Hintergrundanhang

5 : Float, Clear, Position, Top, Right, Bottom, Left, Min-Breite, Min-Höhe, Max-Breite, Max-Höhe, Überlauf, Clip, Z-Index

6. Inhalt, Zähler-Reset, Zähler-Inkrement

7. Attribute des Umrissstils: Umrissstil, Umrissbreite, Umrissfarbe, Umriss

8. Pause-vorher, Seite-Umbruch-nachher

9. Klangstilattribute: Pause-vor, Pause-nachher, Pause, Cue-vor, Cue-nach, Cue, Wiedergabe während

2. Geerbte Attribute

1. Schriftfamilienattribut

font: kombinierte Schriftart

font-family: gibt die Schriftart an Familie des Elements

font-weight: Legen Sie die Stärke der Schriftart fest

font-size: Legen Sie die Größe der Schriftart fest

font-style: Definieren Sie den Stil von die Schriftart

Schriftartvariante: Legt die Schriftart in Kapitälchen fest, um den Text anzuzeigen. Dies bedeutet, dass alle Kleinbuchstaben in Großbuchstaben umgewandelt werden, alle Buchstaben in Kapitälchen jedoch eine kleinere Schriftgröße im Vergleich zum Rest haben der Text.

font-stretch: Dehnen und transformieren Sie die aktuelle Schriftfamilie. Wird nicht von allen gängigen Browsern unterstützt.

font-size-adjust: Geben Sie einen Aspektwert für ein Element an, damit die x-Höhe der bevorzugten Schriftart beibehalten wird.

2. Textreihenattribute

text-indent: Texteinrückung

text-align: horizontale Textausrichtung

line-height: Zeilenhöhe

Wortabstand: Vergrößern oder Verkleinern des Abstands zwischen Wörtern (d. h. Wortabstand)

Buchstabenabstand: Vergrößern oder Verkleinern des Abstands zwischen Zeichen (Zeichenabstand)

Texttransformation : Groß-/Kleinschreibung des Textes steuern

Richtung: Geben Sie die Schreibrichtung des Textes an

Farbe: Textfarbe

3. Sichtbarkeit des Elements: Sichtbarkeit

4 Attribute: caption-side, border-collapse, border-spacing, empty-cells, table-layout

5. Listenlayoutattribute: Listenstil-Typ, Listenstil-Bild, Listenstil-Position , Listenstil

6. Inhaltsattribute generieren: Anführungszeichen

7. Seitenstilattribute: Seite, Seitenumbruch, Fenster , Waisen

9. Klangstilattribute: Sprechen, Sprechzeichensetzung, Sprechziffer, Sprechkopf, Sprechgeschwindigkeit, Lautstärke, Stimmfamilie, Tonhöhe, Tonhöhenbereich, Betonung, Fülle, Azimut , Höhe

3. Attribute, die von allen Elementen vererbt werden können1. Elementsichtbarkeit: Sichtbarkeit

2 , Cursorattribute: Cursor

4. Attribute, die von Inline-Elementen geerbt werden können 1. Schriftfamilienattribute

2 , Andere Textserienattribute als text-indent und text-align

5. Attribute, die Elemente auf Blockebene erben können 1 -indent, text-align

Das obige ist der detaillierte Inhalt vonÜber CSS-Priorität und Vererbungsprobleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!