Während des Erlernens von CSS werden wir auf einige Attribute stoßen, die vererbt werden können. Was bedeutet also Vererbung in CSS? Welche Eigenschaften können vererbt werden? In diesem Artikel wird Ihnen der Inhalt der Vererbung in CSS vorgestellt.
Bevor wir die CSS-Vererbung definieren, werfen wir einen Blick auf das HTML-DOM (Dokumentenbaum). Der Dokumentbaum besteht ebenfalls aus HTML-Elementen hat Vorfahren, Nachkommen, Väter, Kinder und Brüder. Tatsächlich ist es leicht zu verstehen, daher werde ich hier nicht auf Details eingehen. Wenn Sie mehr wissen möchten, können Sie sich dieses HTML DOM Chinese Reference Manual ansehen.
Was bedeutet CSS-Vererbung?
Nachdem wir uns den Dokumentenbaum angesehen haben, kann die Vererbung in unserem CSS als die Weitergabe bestimmter CSS-Attribute an untergeordnete Elemente definiert werden. Dies ist eigentlich leicht zu verstehen, was bedeutet, dass die darin eingeschlossenen Tags den Stil der externen Tags haben, d. h. die untergeordneten Elemente können die Attribute des übergeordneten Elements erben.
Lassen Sie uns anhand eines Beispiels konkret erklären, was die Vererbung von CSS ist.
<p>
CSS<em>继承性</em>代码
</p>
Nach dem Login kopieren
Es ist zu beachten, dass em in p enthalten ist.
Wenn wir den CSS-Stil von p angeben, wollen wir sehen, was mit ihnen passiert?
<style>
p { color:red; }
</style>Nach dem Login kopieren
Die Schriftarten des p-Tags und des em-Tags werden im Browser gleichzeitig rot. Wir haben den Stil von em nicht angegeben, aber em erbt die Stilattribute seines übergeordneten Elements p.
Nachdem Sie das gesehen haben, sollten Sie sich meiner Meinung nach sehr darüber im Klaren sein, was Vererbung in CSS bedeutet. Tatsächlich wird CSS-Vererbung oft verwendet, wenn wir Code schreiben, auch ohne es zu wissen.
Natürlich können unsere Eigenschaften im obigen Beispiel vererbt werden, aber nicht alle Eigenschaften können in CSS vererbt werden. Fassen wir es unten zusammen.
Welche Eigenschaften können in CSS vererbt werden?
1. Zu den Schriftartattributen, die in CSS geerbt werden:
font: Schriftart. Schriftfamilie: Gibt die Schriftart des Elements an. Schriftstärke: Legen Sie die Stärke der Schriftart fest.
Schriftgröße: Legen Sie die Schriftgröße fest. Schriftstil: Definieren Sie den Schriftstil.
font-variant: Legt die Schriftart in Kapitälchen fest, um 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 des Textes haben.
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. Zu den Textattributen, die in CSS Vererbungseigenschaften haben:
text-indent: Texteinzug. text-align: Text wird horizontal ausgerichtet. Zeilenhöhe: Zeilenhöhe. Wortabstand: Vergrößerung oder Verkleinerung des Abstands zwischen Wörtern (d. h. Wortabstand).
letter-spacing: Erhöhen oder verkleinern Sie den Abstand zwischen den Zeichen (Zeichenabstand). Texttransformation: Groß-/Kleinschreibung des Textes kontrollieren. Richtung: Gibt die Schreibrichtung des Textes an.
Farbe: Textfarbe
3. Elementsichtbarkeit von geerbten Attributen in CSS:
Sichtbarkeit: Gibt an, ob das Element sichtbar ist.
4. Tabellenlayoutattribute mit geerbten Eigenschaften in CSS:
caption-side: Legen Sie die Position des Tabellentitels fest. border-collapse: Legen Sie fest, ob der Tabellenrand zu einem einzigen Rahmen reduziert werden soll.
Grenzabstand: Legen Sie den Abstand zwischen den Zellrändern fest. leere Zellen: Legen Sie fest, ob leere Zellen in der Tabelle angezeigt werden sollen.
Tabellenlayout: Legen Sie den Algorithmus für die Anzeige von Zellen, Zeilen und Spalten fest.
5. Listenlayoutattribute mit geerbten Eigenschaften in CSS:
list-style-type: Ändern Sie den für Listenelemente verwendeten Flag-Typ. list-style-image: Verwenden Sie für jedes Logo ein Bild.
list-style-position: Sie können festlegen, ob das Logo außerhalb des Listenelementinhalts oder innerhalb des Inhalts angezeigt wird.
list-style: abgekürzter Listenstil, der zum Festlegen aller Eigenschaften für Listen in einer Anweisung verwendet wird.
6. Generierte Inhaltsattribute von geerbten Attributen in CSS:
Anführungszeichen: Legen Sie den Zitattyp verschachtelter Referenzen fest.
7. Cursorattribute, die in CSS geerbte Eigenschaften sind:
cursor: Gibt den Typ (die Form) des anzuzeigenden Cursors an
8. Seitenstilattribute mit geerbten Attributen in CSS:
Seite: Gibt den spezifischen Seitentyp an, auf dem Elemente angezeigt werden sollen. page-break-inside: Legen Sie das Paging-Verhalten fest, um ein Paging innerhalb des Tabellenelements zu vermeiden.
Fenster: Legt die Mindestanzahl an Zeilen fest, die am oberen Rand der Seite verbleiben müssen, wenn die Paginierung innerhalb eines Elements erfolgt.
Waisen: Legt die Mindestanzahl von Zeilen fest, die am Ende der Seite verbleiben müssen, wenn die Paginierung innerhalb des Elements erfolgt.
9. Das Soundstil-Attribut, das ein geerbtes Attribut in CSS ist
speak: Legt fest oder ruft ab, ob der Sound gegeben ist. speak-punctuation: Legen Sie fest oder rufen Sie ab, wie Satzzeichen ausgesprochen werden.
speak-numeral: Legen Sie fest oder rufen Sie ab, wie Zahlen ausgesprochen werden. speak-header: Legt fest oder ruft ab, wie oft der Tabellenkopf im Verhältnis zu einer Reihe von darauf folgenden Zellen vorkommt.
Sprechgeschwindigkeit: Legen Sie die Aussprachegeschwindigkeit fest oder rufen Sie sie ab. Lautstärke: Lautstärke einstellen oder abrufen.
Voice-Family: Stellen Sie den aktuellen Sprachtyp ein oder rufen Sie ihn ab. Tonhöhe: Tonhöhe einstellen oder abrufen.
Tonhöhenbereich: Stellen Sie die Glätte des Klangs ein oder rufen Sie sie ab. Stress: ähnlich wie Pitch-Range. Legt den höchsten Spitzenwert der aktuellen Schallwellenform fest oder ruft ihn ab.
Reichhaltigkeit: Stellen Sie die Klangfarbe des aktuellen Klangs ein oder rufen Sie sie ab. Azimut: Stellen Sie den Schallfeldwinkel des aktuellen Schalls ein oder rufen Sie ihn ab.
Elevation: Stellen Sie den Höhenwinkel der Quelle des aktuellen Tons ein oder rufen Sie ihn ab.
10. Attribute, die von allen Elementen geerbt werden können: Sichtbarkeit, Cursor
11. Attribute, die von Inline-Elementen geerbt werden können:
(1) Schriftfamilienattribute
(2) Textserienattribute außer text-indent und text-align
12 Attribute, die Elemente auf Blockebene erben können : text-indent, text-align
Das Obige ist eine Zusammenfassung der CSS-Vererbung. Wenn Sie mehr über die CSS-Vererbung erfahren möchten, können Sie dies natürlich tun Gehen Sie zur chinesischen PHP-Website und werfen Sie einen Blick auf die Spalte CSS-Video-Tutorial oder die Spalte CSS3-Video-Tutorial, die verschiedene CSS-bezogene Videos enthält.
Verwandte Empfehlungen:
Eingehende Analyse der CSS-Vererbung
Einführung in die Attributwertvererbung in CSS
Das obige ist der detaillierte Inhalt vonWas bedeutet CSS-Vererbung? Welche Eigenschaften von CSS können vererbt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
