CSS継承とは何ですか-CSSチュートリアル-php.cn

这儿的苹果好红啊

深入探讨CSS的继承性

看这儿！

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS継承とは何ですか

青灯夜游

Apr 02, 2021 pm 03:30 PM

継承は、スタイルを特定の HTML タグ要素だけでなく、その子孫要素にも適用できるようにするルールです。 CSS 継承とは、親の CSS スタイルを設定することを指し、親以下のすべての子要素がこの属性を持ちます。 CSS 継承の役割: 親要素のいくつかのプロパティを設定します。これは子要素でも使用できます。

CSS継承とは何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS 継承

継承とは、スタイルを特定の HTML タグ要素だけでなく、その子孫にも適用できるようにするルールです。。

CSS 継承は、子孫要素に渡される特定の CSS 属性として定義できます。これは、内部でラップされたタグが外部タグのスタイルを持つことを意味します。つまり、子要素は外部タグの属性を継承できます。親要素。

継承の役割: いくつかの属性を親要素に設定します。これは子要素でも使用できます。

たとえば、次のコードでは、div には 2 つの p タグと 1 つの spam タグが含まれています。div のフォントの色が赤に設定されている場合、その子タグは親要素の属性を継承し、したがって、赤く表示されます。

<!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>

ログイン後にコピー

CSS継承とは何ですか

もちろん、上記の例のプロパティは継承できますが、すべてのプロパティを継承できるわけではありません。では、CSS ではどのようなプロパティを継承できるのでしょうか? ?以下にまとめてみましょう。

CSS で継承できるプロパティは何ですか?

1. CSS で継承される属性のうち、フォント属性:

font: font。 font-family: 要素のフォントを指定します。 font-weight: フォントの太さを設定します。

font-size: フォントサイズを設定します。 font-style: フォントスタイルを定義します。

font-variant: テキストを表示するためにフォントを小文字に設定します。これは、すべての小文字が大文字に変換されますが、小文字のすべての文字はテキストの残りの部分に比べてフォントサイズが小さくなります。より小さい。

font-stretch: 現在のフォントファミリーを引き伸ばして変換します。すべての主要なブラウザでサポートされているわけではありません。

font-size-adjust: 優先フォントの X 高さが維持されるように、要素のアスペクト値を指定します。

2. CSS で継承されたプロパティを持つテキスト属性の中で:

text-indent: テキストインデント。 text-align: テキストを水平方向に配置します。 line-height: 行の高さ。 word-spacing: 単語間のスペースを増減します。

letter-spacing: 文字間のスペース (文字間隔) を増減します。 text-transform: テキストの大文字と小文字を制御します。方向: テキストの書き込み方向を指定します。

color: テキストの色

3. CSS での継承された属性の要素の可視性:

visibility: 要素が表示されるかどうかを指定します。

4. CSS で継承されたプロパティを持つテーブルレイアウト属性:

caption-side: テーブルタイトルの位置を設定します。 border-collapse: 表の枠線を単一の枠線に折りたたむかどうかを設定します。

border-spacing: セルの境界線を区切る距離を設定します。 empty-cells: 表内の空のセルを表示するかどうかを設定します。

table-layout: セル、行、列を表示するためのアルゴリズムを設定します。

5. CSS で継承されたプロパティのリストレイアウトプロパティ:

list-style-type: リスト項目に使用されるフラグのタイプを変更します。 list-style-image: 各ロゴに画像を使用します。

list-style-position: ロゴをリスト項目のコンテンツの外側に表示するか、コンテンツの内側に表示するかを決定できます。

list-style: 短縮されたリストスタイル。1 つのステートメントでリストのすべてのプロパティを設定するために使用されます。

6. CSS の継承プロパティの生成されたコンテンツ属性:

quotes: ネストされた参照の引用タイプを設定します。

7. CSS でプロパティを継承したカーソル属性:

cursor: 表示するカーソルの種類 (形状) を指定します

8. CSS で継承されたプロパティを持つページスタイル属性:

page: 要素が表示されるページの特定のタイプを指定します。 page-break-inside: テーブル要素内のページングを避けるためにページング動作を設定します。

windows: 要素内でページネーションが発生する場合に、ページの先頭に残さなければならない最小行数を設定します。

orphans: 要素内でページネーションが発生する場合に、ページの下部に残す必要がある最小行数を設定します。

9. css で継承されたサウンドスタイル属性

speak: サウンドが与えられるかどうかを設定または取得します。 speech-punctuation: 句読点の発音方法を設定または取得します。

speak-numeral: 数字の発音方法を設定または取得します。 speech-header: テーブルヘッダーがそれに続く一連のセルに関連して出現する回数を設定または取得します。

speech-rate: 発音速度を設定または取得します。 volume: ボリュームを設定または取得します。

voice-family: 現在の音声タイプを設定または取得します。ピッチ: ピッチを設定または取得します。

pitch-range: サウンドの滑らかさを設定または取得します。ストレス: ピッチ範囲に似ています。現在の音声波形の最高ピーク値を設定または取得します。

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;}

ログイン後にコピー

应用举例代码：

<h1 id="这儿的苹果好红啊">这儿的苹果好红啊</h1>

ログイン後にコピー

应用举例效果：因为选择符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

ログイン後にコピー

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

CSS继承的优先级问题

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

样式定义：

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

ログイン後にコピー

应用举例代码：

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

ログイン後にコピー

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

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

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

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

样式定义：

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

ログイン後にコピー

应用举例代码：

<h1 id="深入探讨-EM-CSS的继承性-EM">深入探讨<EM>CSS的继承性</EM></h1>

ログイン後にコピー

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

小技巧：

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

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

ログイン後にコピー

给定这个规则后，除在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;}

ログイン後にコピー

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

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

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

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

样式定义：