バックエンドプログラマーがフロントエンド (CSS) について語るレッスン 8: 継承とカスケード_html/css

バックエンドプログラマーがフロントエンド (CSS) について語るレッスン 8: 継承とカスケード_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:47:17

オリジナル

1157 人が閲覧しました

1. 継承

継承: いわゆる CSS スタイルの継承は、子要素が親要素に適用されるルールステートメントです。 (この機能により、CSSプロパティは継承可能なプロパティと継承不可能なプロパティに分けることができます。)
継承可能なプロパティ: 親要素から子要素に属性値を継承できるプロパティを継承可能なプロパティと呼びます。

どのプロパティが継承可能なプロパティですか?

1. テキストスタイル属性

text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、direction、white-space

2. フォントスタイル属性

-family、font-size、font-style、font-variant、font-weight

3、リストスタイル属性

list-style、list-style-image、list-style-position、list-style-type

4. Color 属性

注: ここでの特別な説明: font-size 属性 (継承は特殊です)

継承される正確な値とは異なり、font-size は計算された値を継承します。

例:

<!DOCTYPE html>

ログイン後にコピー

<html lang=“utf8”>

ログイン後にコピー

    <head>

ログイン後にコピー

        <meta charset="utf-8">

ログイン後にコピー

        <title>Demo</title>

ログイン後にコピー

    </head>

ログイン後にコピー

    <body style="font-size:85%">

ログイン後にコピー

        body字体大小

ログイン後にコピー

        <h1 style="font-size:200%">h1字体大小</h1>

ログイン後にコピー

        <h2 style="font-size:150%">h2字体大小</h2>

ログイン後にコピー

        <p>p字体大小<em>em字体大小</em></p>

ログイン後にコピー

要素デフォルトのフォントサイズ

150 %13.6px × 150% = 20.4px

指定なし13.6pxつまり、フォントが指定されていない場合は、サイズ値が再割り当てされます。そうでない場合は、最後のサイズ値に従って続行されます。たとえば、上の図では、本文のフォントが 85% に設定されています。デフォルトフォント (通常は 16px=1em) の 13.6px) の場合、次のフォントはすべて 13.6px になります。引き続き 85% を継承する代わりに、13.6 に再度 85% を掛けます。 2. カスケードカスケード: いわゆる CSS スタイルカスケードは、DOM 要素がスタイルシート内のルールを適用して、継承されたスタイルを上書きするプロセスです。