CSS継承とはどういう意味ですか? CSS のどのプロパティを継承できますか?

CSS を学習する過程で、継承できるいくつかの属性に遭遇します。それでは、CSS における継承とは何を意味するのでしょうか?どのようなプロパティを継承できますか?この記事ではCSSにおける継承の内容を紹介します。

CSS 継承を定義する前に、まず HTML DOM (ドキュメント ツリー) を見てみましょう。HTML DOM (ドキュメント ツリー) は HTML 要素で構成されており、祖先、子孫もあります。 、父親、子供たち、兄弟たち。実際、これは簡単に理解できるので、ここでは詳しく説明しません。詳しく知りたい場合は、この HTML DOM 中国語リファレンス マニュアル を読んでください。

CSSの継承とはどういう意味ですか?

ドキュメント ツリーを確認すると、CSS の継承は、特定の CSS 属性を下位の子孫要素に渡すこととして定義できます。これは実際には理解するのが簡単です。これは、内部でラップされたタグが外部タグのスタイルを持つこと、つまり、子要素が親要素の属性を継承できることを意味します。

CSSの継承とは何か具体的に例を使って説明しましょう。

<p>
CSS<em>继承性</em>代码
</p>

なお、emはpに含まれています。

p の CSS スタイルを指定すると、em に何が起こるか見てみましょう。

<style>
p { color:red; }
</style>

ブラウザ上でpタグとemタグのフォントが同時に赤くなります。 em のスタイルを指定しませんでしたが、em は親要素 p のスタイル属性を継承します。

これを見れば、CSS における継承が何を意味するのかがよくわかると思います。実際、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: 要素内でページネーションが発生する場合に、ページの先頭に残す必要がある最小行数を設定します。

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

9. CSSの継承属性であるサウンドスタイル属性

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

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

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

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

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

豊かさ: 現在のサウンドの音色を設定または取得します。 azimuth: 現在の音の音場角度を設定または取得します。

elevation: 現在のサウンドのソースの仰角を設定または取得します。

10. すべての要素で継承できる属性: 可視性、カーソル

11. インライン要素で継承できる属性:

(1) フォントファミリー属性

(2) text-indent を除く, text- align 以外のテキスト系属性

12. ブロックレベル要素で継承できる属性: text-indent, text-align もちろん、上記は css 継承の概要です。 CSS 継承に関する関連知識をさらに理解したい場合は、php 中国語 Web サイトにアクセスして、さまざまな CSS 関連ビデオが含まれている

css ビデオ チュートリアル

列または css3 ビデオ チュートリアル 列を参照してください。 関連する推奨事項:

CSS 継承の詳細な分析

CSS における属性値の継承の概要

以上がCSS継承とはどういう意味ですか? CSS のどのプロパティを継承できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。