ホームページ > ウェブフロントエンド > CSSチュートリアル > cssには継承関係があるのでしょうか?

cssには継承関係があるのでしょうか?

青灯夜游
リリース: 2022-12-30 11:12:13
オリジナル
3381 人が閲覧しました

css には継承関係があります。 CSS 継承は、特定の HTML タグ要素だけでなく、その子孫にもスタイルを適用できるようにするルールです。つまり、上位 (親) の CSS スタイルが設定されている場合、上位 (親) の子も適用されます。以下 すべてのレベル (下位) がこのスタイルになります。

cssには継承関係があるのでしょうか?

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

(学習ビデオ共有: css ビデオ チュートリアル)

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

CSS 継承とは、内側でラップされたタグが外側のタグのスタイル プロパティを持つことを意味します。継承機能の最も典型的な応用例は、通常、Web ページ全体のスタイルのデフォルトに使用され、他のスタイルとして指定する必要がある部分を個別の要素に設定できます。この機能は、Web デザイナーに、より理想的な空間を提供します。 CSS の主な機能の 1 つは、祖先と子孫の関係に依存する継承です。継承は、スタイルを特定の要素だけでなくその子孫にも適用できるようにするメカニズムです。たとえば、BODY で定義された色の値は、段落のテキストにも適用されます。以下は例です:

スタイル定義:

body{color:red;}
ログイン後にコピー

アプリケーション例のコード:

<p>CSS的<strong>层叠和继承</strong>深入探讨</p>
ログイン後にコピー

このコードの適用結果は次のとおりです: 「CSS カスケードと「継承」の文字は赤字で、「カスケードと継承」は強い要素が適用されるため太字になっています。これは作成者の意図と一致しており、継承が CSS の一部である理由です。

注:

1. すべての属性を継承できるわけではありません。継承できるのは、color/font-/text-/line で始まる属性のみです

2. 息子だけでなく、子孫も継承できる

アプリケーション シナリオ:

通常、テキストの色など、Web ページ上の共通情報を設定するために使用されます。 Web ページのフォント、テキスト サイズ、その他のコンテンツ

css はプロパティを継承しています

1. テキスト シリーズのプロパティ

text-indent: テキストのインデント

text-align: テキストの水平方向の配置

line-height: 行の高さ

word-spacing: 増加または減少単語間のスペース (単語間隔)

letter-spacing: 文字間のスペース (文字間隔) を増減します

text-transform: テキストの大文字小文字の制御

direction : 文字の書き込み方向を指定します

color: 文字色

2. フォント系列属性

font: 結合フォント

font-family: 要素のフォントファミリーを指定します。

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

font-size: フォントのサイズを設定します。

font-style: フォントのスタイルを定義します。

font-variant: テキストを表示するためにフォントを小文字に設定します。これは、すべての小文字が大文字に変換されることを意味しますが、小文字フォントを使用する文字はすべて大文字に変換されます。テキストの他の部分とは異なること。そのフォント サイズは に比べて小さいです。

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

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

3. テーブルレイアウト属性

caption-side: テーブルタイトルの位置を設定します。

border-collapse: テーブルの境界線を 1 つの境界線に結合するか、標準 HTML のように個別に表示するかを設定します。

border-spacing: 隣接するセルの境界線間の距離を設定します (「境界線の分離」モードでのみ使用されます)。

empty-cells: 表内の空のセルを表示するかどうかを設定します (「切り離された境界線」モードの場合のみ)。

table-layout: テーブルのテーブル レイアウト アルゴリズムを設定します。

4. リスト レイアウト属性:

list-style-type: リスト項目マークのタイプを設定します。

list-style-image: 画像を使用してリスト項目のマークアップを置き換えます。

list-style-position: リスト項目マーカーがオブジェクトのコンテンツに対してどのように描画されるかを示します。

list-style: 短縮属性は、1 つの宣言ですべてのリスト属性を設定します。

5. 要素の可視性: 可視性

6. 生成されたコンテンツ属性: 引用符

7. カーソル属性: カーソル

8、ページ スタイル属性:

page、改ページ内側、ウィンドウ、オーファン

9、サウンド スタイル属性:

話し方、話し方の句読点、話し方の数字、話し方のヘッダー、話し方の速度、音量、声の種類、ピッチ、ピッチの範囲、強さ、豊かさ、方位角、仰角

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。 !

以上がcssには継承関係があるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート