Was ist CSS-Vererbung?-CSS-Tutorial-php.cn

Vererbung ist eine Regel, die es ermöglicht, Stile nicht nur auf ein bestimmtes HTML-Tag-Element, sondern auch auf seine untergeordneten Elemente anzuwenden. Unter CSS-Vererbung versteht man das Festlegen des CSS-Stils des übergeordneten Elements und aller untergeordneten Elemente des übergeordneten Elements. Die Rolle der CSS-Vererbung: Festlegen einiger Eigenschaften für das übergeordnete Element, die auch von untergeordneten Elementen verwendet werden können.

Was ist CSS-Vererbung?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Vererbung

Vererbung ist eine Regel, die es ermöglicht, Stile nicht nur auf ein bestimmtes HTML-Tag-Element, sondern auch auf seine Nachkommen anzuwenden.

CSS-Vererbung kann als Weitergabe bestimmter CSS-Attribute an untergeordnete Elemente definiert werden, 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.

Die Rolle der Vererbung: Legen Sie einige Attribute für das übergeordnete Element fest, die auch von untergeordneten Elementen verwendet werden können.

Im folgenden Code enthält das div beispielsweise 2 p-Tags und 1 span-Tag. Wenn die Schriftfarbe für das div auf Rot eingestellt ist, erben seine untergeordneten Tags die Attribute des übergeordneten Elements und werden daher rot angezeigt.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>苹果</p>
        <p>香蕉</p>
        <span>葡萄</span>
    </div>
</body>
</html>

Nach dem Login kopieren

Was ist CSS-Vererbung?

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 den Text anzuzeigen. Das bedeutet, dass alle Kleinbuchstaben in Großbuchstaben umgewandelt werden, alle Buchstaben mit 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 geerbt werden:

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).

Buchstabenabstand: 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. Sichtbarkeit von Elementen mit geerbten Eigenschaften in CSS:

Sichtbarkeit: Gibt an, ob ein Element sichtbar ist.

4. Tabellenlayoutattribute mit geerbten Attributen 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.

Rahmenabstand: 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 Eigenschaften in CSS:

Anführungszeichen: Legen Sie den Anführungszeichentyp verschachtelter Referenzen fest.

7. Cursor-Attribute, die in CSS geerbt werden:

cursor: Gibt den Typ (die Form) des anzuzeigenden Cursors an

8 Seitenstilattribute, die in CSS geerbt werden:

Seite : Gibt den spezifischen Seitentyp an, auf dem das Element angezeigt werden soll. page-break-inside: Legen Sie das Paging-Verhalten fest, um ein Paging innerhalb des Tabellenelements zu vermeiden.

windows: Legen Sie die Mindestanzahl an Zeilen fest, die am oberen Rand der Seite verbleiben müssen, wenn die Paginierung innerhalb eines Elements erfolgt.

Waisen: Legen Sie die Mindestanzahl an 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.

Sprachgeschwindigkeit: Legen Sie die Aussprachegeschwindigkeit fest oder rufen Sie sie ab. Lautstärke: Lautstärke einstellen oder abrufen.

Sprachfamilie: Aktuellen Sprachtyp festlegen oder abrufen. Tonhöhe: Tonhöhe festlegen 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.

richness：设置或检索当前声音的音色。azimuth：设置或检索当前声音的音场角度。

elevation：设置或检索当前声音的音源仰角。

10、所有元素可以继承的属性：visibility、cursor

11、内联元素可以继承的属性：

（1）字体系列属性

（2）除text-indent、text-align之外的文本系列属性

12、块级元素可以继承的属性：text-indent、text-align

（学习视频分享：css视频教程）

多种样式混合应用

既然有了继承性，那么在样式表中的应用上可能会有些读者搞不清，多个样式表同时应用到一个对象上会发生什么情形呢？先举个简单的例子：

样式定义：

.apple{color:red;}H1{color:yellow;}

Nach dem Login kopieren

应用举例代码：

<H1 CLASS=”apple”>这儿的苹果好红啊</H1>

Nach dem Login kopieren

应用举例效果：因为选择符H1和.apple都匹配上面的H1元素，那么到底浏览器会应用哪一个呢？通过在浏览器中观察，我们发现这段文字应用了.apple这个样式，所以它显示的是红色。这是因为两条规则的特殊性不一样，CSS规则必须这样进行处理。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表：

H1 {color:blue;}                        特性值为：001
P EM {color:purple;}                    特性值为：002
.apple {red;}                           特性值为：010 
P.bright {color:yellow;}                特性值为：011
P.bright EM.dark {color:brown;}         特性值为：022
#id316 {color:yellow}                   特性值为：100

Nach dem Login kopieren

从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。

CSS继承的优先级问题

上面我们讨论了CSS的继承性和特殊性，在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已，举例说明。

样式定义：

BODY {background:black;}
LI {color:gray;}
UL.white {color:white}

Nach dem Login kopieren

应用举例代码：

<ul>
　 <li>举例列表一</li>
　 <li>举例列表二</li>
　 <li>举例列表三</li>
　 <li>举例列表四</li>
</ul>

Nach dem Login kopieren

有些读者可能认为除包含.white类的列表项显示为白色外，其余所有的列表项都应该是灰色的。然而情况并非如此。

为什么会出现这样的情况呢？因为带选择符LI的显式声明的权值比从UL.white规则那里继承过来的权值要大，所以每个列表项都是灰色的。

可能有些地方不是很好理解，大家多思考一下就会明白，平时在应用样式表的时候多留意思考一下。

下面我们再来看一个例子，若给定如下所示的标记，则EM强调文字将会是灰色的，而非黑色，因为EM规则的权值要大于从H1元素继承来的权值：

样式定义：

H1#id316 {color:black;}                 特性值为：101
EM {color:gray;}                        特性值为：1

Nach dem Login kopieren

应用举例代码：

<H1 ID=”id316”>深入探讨<EM>CSS的继承性</EM></H1>

Nach dem Login kopieren

这是因为第二条EM规则的特性值（1）要比被继承的特性值（0）要大，事实上规定H1#id316的原始特性值（101）对其继承值没有影响，仍旧为0。

小技巧：

如果想让H1始终为黑色，而EM文字在其他情况下红色，那么下面的样式表设置就是一个很好的方法：

H1，H1 EM {color:black;}             特性值为：1，2
EM {color:red;}                      特性值为：1

Nach dem Login kopieren

给定这个规则后，除在H1元素内的任何EM文字就都是红色，而H1内的EM文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条有效的规则（一条是对H1的，另一条是对H1 EM的）也就有两个特性值——每条规则一个。

上面我们讨论了多个样式规则同时应用于同一对象时，哪个规则会被最终应用的一些情况，可能有些细心的读者会说，那STYLE元素呢？对啊，HTML代码中可以直接应用内联样式STYLE的嘛。那么它的特性值如何呢？

回答是这样的：带有STYLE的元素在CSS1下其特性值为100，尽管类似于#ID316这样的ID选择符的特性值也为100，但在实际应用中，STYLE这一权值会更高一些，因为STYLE元素的值看起来要比多数普通规则的权值大。所以我们可以看出内联样式具有高的特性值，具体的例子我们就不举了，大家可以自己试试。

人为定义CSS继承优先级

在制作网页的过程中，我们可能想要设置某个规则比其他的规则更重要，CSS中允许这样设置，它们被称为重要规则（important rule）。这是根据其声明的方式和它们的自然属性来命名的。通过在一条规则的分号前插入！important这样一个短语来标记一条重要规则，比如说：

p.apple {color:#red !important; background:white;}

Nach dem Login kopieren

颜色值#red被标记为!important，而背景色white未被标记，如果需要二条规则都是重要的话，那么每条规则都需要标上!important。

正确地放置!important的位置是很重要的，否则整条规则将为无效。!important总是放在规则声明的最后，在分号之前。

标记为!important的规则具有最高的权值，也就是说他没有具体的特性值，但是比其他的权值都要大。需要注意的是，虽然制作者定义的样式比用户定义的样式具有更高权值时，但!important规则恰恰相反：重要的用户定义规则要比制作者定义的样式具有更高权值，即使是标记为!important的重要规则也是如此。

看了这么多文字介绍后，我们来举个例子看一下：

样式定义：

h1 {color:gray !important;}

Nach dem Login kopieren

应用举例代码：

<h1 STYLE=”color:black;”>看这儿！</h1>

Nach dem Login kopieren

应用举例效果:

!important规则会覆盖内联STYLE属性的内容，所以结果文字是灰色的而不是黑色的。

还有最后一种需要考虑的情况：继承值总是具有特性值0的特点，即使是从带有!important的规则继承的值也是如此，在匹配重要规则的元素之外，重要性也会随之消失，这点是需要我们特别注意的！

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonWas ist CSS-Vererbung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!