WeChatで[世界への大移動]を検索していただければ、フロントエンド業界のトレンドやラーニングパスなどをいち早くお伝えします。この記事 GitHub github.com/qq449245884 ... が含まれており、完全なテスト サイト、資料、および第一線のメーカーへのインタビューに関する私の一連の記事があります。
ChatGpt プラス バージョンを無料で体験してください, 体験アドレスを支払います: chat.waixingyun.cn Web サイトの下部にあるテクノロジー グループに参加して、一緒にバグを見つけることができます. さらに、描画アーティファクトの新しいバージョンがリリースされましたcube.waixingyun.cn/home
CSS (Cascading Style Sheets) は、Web ドキュメントのスタイル設定と書式設定を行うための強力なツールです。inheritこの包括的なガイドでは、 、initial、unsetの4 つの特別なキーワードについて説明しますrevert。
継承: 親要素から値を渡す
inheritこのキーワードは、要素が親要素から CSS プロパティの値を継承することを明示的に示すために使用されます。属性が に設定されている場合inherit、要素は親要素と同じ値を受け取ります。この動作は、ドキュメント全体で一貫したスタイルが必要な場合、または特定の要素が親要素から特定のスタイルを継承する場合に特に便利です。
たとえば、要素に text color が割り当てられているシナリオを考えてみましょう<div>。デフォルトでは、text-color プロパティ ( color) が継承されます。これは、子要素のテキストの色が親要素と同じになることを意味します。ただし、inherit親要素の CSS で明示的に指定されていない場合でも、キーワードを使用してこの動作を明示的に強制できます。
div {
color: black; /* Text color of the parent div */
}
a {
color: inherit; /* 从父div继承文本颜色 */
}
場合によっては、inheritフォント サイズや色を設定するために使用することをお勧めしますが、すべてのプロパティがデフォルトで継承されるわけではないことに注意してください。キーワードを効果的にinherit使用するには、継承されたプロパティと非継承プロパティの違いを理解することが重要です。
初期値: デフォルトにリセット
initialCSS プロパティを CSS 仕様で指定されている初期値にリセットするために使用されるキーワード。各 CSS プロパティには、デフォルト値として W3C 仕様によって定義された初期値があります。を使用するとinitial、以前のスタイルをオーバーライドして、プロパティを初期状態に戻すことができます。
仕様で定義されている初期値は異なる場合があります。初期値の中には直感的に意味のあるものもありますが、その他の値は恣意的に見える場合もあります。たとえば、float: noneとbackground-color: transparent は、一般的な期待を満たす初期値の例です。ただし、display: inline のようなプロパティは直観に反するように思えるかもしれませんが、これらの初期値は歴史的な理由または開始点を確立する必要性から選択されました。
button {
color: initial; /* 将颜色属性重置为初始值 */
}
initialキーワードは特定のプロパティに適用される値のみをリセットし、他のプロパティや継承された値には影響しないことに注意してください。また、仕様で定義されている初期値は、必ずしも望ましい動作と一致するとは限らないことに注意してください。
未設定: フルリセット
unsetキーワードは、CSS プロパティを全体的にリセットするための強力なツールです。inheritおよびキーワードの機能を組み合わせてinitial、より柔軟なリセット オプションを提供します。
継承されていないプロパティの場合、キーワードunsetと同様に機能します。initialこれにより、プロパティが CSS 仕様で定義されている初期値にリセットされます。これにより、プロパティは以前のスタイル効果なしで最初からやり直すことができます。
div {
margin: unset; /* Resets the margin property to its initial value */
}
ただし、継承されたプロパティの場合、unset動作は異なります。プロパティを初期値にリセットするのではなく、親要素からの値の継承など、プロパティの自然な動作を復元します。
p {
color: unset; /* Allows the color property to inherit from its parent */
}
unsetこのキーワードは、継承されたかどうかに関係なく、プロパティを全体的にリセットする場合に特に便利です。
元に戻す: ブラウザのスタイルに戻ります
revertキーワードは、CSS キーワード ファミリーの最新のメンバーです。と同様にunset、CSS プロパティをリセットできます。ただし、revertスタイル シートのカスケードの性質が考慮され、ブラウザのデフォルト スタイルが尊重されます。
プロパティに適用すると、revert以前のスタイル設定がすべてキャンセルされ、プロパティがブラウザのデフォルトのスタイル シートで定義された値に復元されます。基本的に、ブラウザーによって決定された元の状態にプロパティを返します。
h1 {
font-size: revert; /* Reverts the font-size property to the browser's default */
}
上の例では、font-size要素の<h1>属性が に設定されておりrevert、ブラウザのデフォルトのスタイル シートで定義されているフォント サイズが使用されます。これにより、ページ全体のスタイルとの一貫性が確保され、ユーザーの好みが尊重されます。
要約する
この包括的なガイドでは、特別な CSS キーワードinherit、initial、unsetおよびを検討しましたrevert。これらのキーワードは CSS プロパティに対する貴重な制御を提供し、親要素から値を伝播したり、プロパティを初期またはデフォルトの状態にリセットしたり、カスケード スタイルを操作したりすることができます。
コミュニケーションする
夢と乾物がある場合は、 WeChat で[Daqian World]を検索して、早朝に皿を洗っているこの皿洗いの知恵に注目してください。
この記事 GitHub github.com/qq449245884 ... が含まれており、完全なテスト サイト、資料、および第一線のメーカーへのインタビューに関する私の一連の記事があります。