CSS での継承の使用法の分析-CSSチュートリアル-php.cn

CSS での継承の使用法の分析

不言

リリース： 2018-06-12 16:21:48

オリジナル

2992 人が閲覧しました

この記事では主にCSSの継承スキルの概要を紹介します。CSSの継承キーワードの使用は、CSSの入門学習のための基礎知識です。注意しないと、あなたはそれを参照してください。カスケードテーブルの機能は無視されます。ほとんどの開発者は、inherit キーワードを知っていますが、あなたが知らないかもしれないいくつかの新しい CSS3 継承機能があります...

property: 継承
inherit キーワードは、「親に割り当てられたすべての値を使用する」を表します。要素"。親要素に明示的な値の定義がない場合、ブラウザは対応する属性が見つかるまで DOM ツリーを検索します。最終的に見つからない場合は、ブラウザのデフォルト値が使用されます。例:

#myparent   
{   
    margin: 10px;   
    border: 1px solid #000;   
}   
/* use the same border as the parent */
#myparent p   
{   
    border: inherit;   
}

ログイン後にコピー

実際には、inherit を使用する必要はほとんどありません。フォント、フォントサイズ、色など、多くの便利なプロパティが自動的に継承されます。

遺伝性疾患でも安心してご利用いただけます。 IE6 と IE7 はサポートしていませんが、これによってデザインが崩れることはありません。

property:initial;
おお、新しいCSS3キーワードですね！ initial は、プロパティをその初期値 (ブラウザーのデフォルトで定義された値) に設定します。例:

body   
{   
    font-size: 0.5em;   
}   

/* reset paragraphs to 1em */
p   
{   
    font-size: initial;   
}

ログイン後にコピー

役に立ちますか?おそらく、結局のところ、すべてのブラウザが同じデフォルト値を持つことを保証することはできません。

リーズナブルなサポート - Chrome、Firefox、Safari、Opera 15 以降。 IE では動作しません。これが致命的な問題となる状況を考えてみます。

property: unset;
これはちょっと珍しいですね。 unset を使用すると、継承可能な値が存在し、継承されたかのように動作します。継承可能な値が見つからない場合 (たとえば、box-shadow のような継承できないプロパティである場合)、ブラウザのデフォルト値を継承しているかのように動作します。

繰り返しになりますが、unset が使用されるシナリオはあまり多くありません。また、現時点では、unset をサポートしているシナリオはほとんどありません。

all: [initial | unset ];
最後に、all は値ではなくプロパティです。すべてのプロパティに影響を与えるように、inherit、initial、または unset を指定できます。たとえば、すべての CSS プロパティをブラウザのデフォルトにリセットします:

#mywidget   
{   
    all: initial;   
}

ログイン後にコピー

サードパーティのコントロールを追加し、ページスタイルの競合を回避したい場合は、これはオプションになる場合があります。グローバル CSS ドメイン。

残念ながら、現時点ではブラウザ間での厳密な一貫性を信頼することはできませんが、それでも便利な機能です。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。