CSS継承スタイルをクリアする方法

CSS の継承とスタイルのクリアの使用は、Web 開発では避けられません。 CSS を使用する場合、継承を通じて特定の属性値を他の要素に継承できるため、コードの量とメンテナンスのコストが削減されますが、より良いスタイル効果を得るために継承をクリアする必要がある場合があります。

1. CSS の継承
1.1 継承のルール
CSS では継承される属性値がいくつかあり、これらの属性値は子要素に継承することができます。これらのプロパティ値には、フォント、色、テキストの配置などが含まれます。子要素が対応する属性値を定義していない場合は、親要素から属性値を継承します。例:

body {
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    font-size: 2rem;
}

上の例では、h1 要素は body## の font-family と color## を継承します。 # 要素 # 属性値。 h1 要素ではこれらの属性値が定義されていないため、上位要素から継承されます。 1.2 継承の乱用を回避する

CSS の継承によりコードが節約され、メンテナンス コストが削減されますが、継承の乱用は不必要なスタイルの継承につながり、悪影響を引き起こす可能性もあります。継承を使用する場合は、次の点に注意する必要があります。

1.2.1 非ユニバーサル プロパティを継承プロパティとして設定しない

CSS では、次のような一部のプロパティ値が継承されません。

背景画像
、幅、高さなど。これらの属性値は、継承属性として設定されている場合は無効であり、子要素には継承されません。 1.2.2 スタイル シートの構造を複雑にしすぎないでください。

スタイル シートの構造が複雑すぎると、継承チェーンが長すぎてコードが不必要に複雑になる可能性があります。スタイルシートを記述するときは、簡潔かつ明確な構造を維持することに注意し、冗長性を避けるように努める必要があります。例:

/* 不推荐 */
.wrapper > .box > .title {
    font-size: 1.2rem;
}
.wrapper > .box > .content {
    font-size: 1rem;
}

/* 推荐 */
.title {
    font-size: 1.2rem;
}
.content {
    font-size: 1rem;
}

1.2.3 継承プロパティを定義しすぎないでください必要なプロパティのみを継承プロパティとして設定します。継承プロパティを定義しすぎると、コードの保守が困難になり、レイアウトが理解しにくくなります。 CSS プロパティを定義するときは、柔軟でシンプルなスタイルの使用を検討してください。

1.3 継承の使用

継承を誤って使用すると、不必要なスタイルの継承が生じる可能性がありますが、CSS の継承は適切に使用すれば依然として非常に便利です。継承を使用できる状況は次のとおりです。

1.3.1 統一されたフォント属性

body
要素にフォント属性を設定し、そのフォント スタイルを維持できます。継承によるページ全体の一貫性: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">body {     font-family: Arial, sans-serif;     font-size: 1rem;     line-height: 1.5; }</pre><div class="contentsignin">ログイン後にコピー</div></div>1.3.2 統一された色属性

Color は、ページ全体の色を一貫させるために継承できる非常に重要な属性です。例:

body {
    color: #333;
}

h1, h2, h3 {
    color: inherit; /* 继承父元素的颜色 */
}

1.3.3 統一されたテキスト配置共通の親要素に

text-align
属性を設定すると、子要素が統一されたテキスト配置に従うようになります。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">body {     text-align: center; } h1, h2, h3 {     text-align: left; /* 继承父元素的文本对齐方式 */ }</pre><div class="contentsignin">ログイン後にコピー</div></div>2. スタイルのクリアランス

CSS では、特定の要素のデフォルト スタイルをクリアしたり、設定されているスタイルをキャンセルしたりする必要がある場合があります。スタイルのクリアに使用できるいくつかのメソッドを次に示します。

2.1 スタイル シートのリセット

スタイル シートのリセットを使用すると、デフォルト スタイルをクリアし、すべての要素のデフォルト スタイルを基本スタイルにリセットできます。 。 Eric Meyer の Reset CSS (https://meyerweb.com/eric/tools/css/reset/) のコードは次のとおりです。

/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

上記のコードを CSS スタイルシートの先頭に挿入して、すべての CSS をリセットします。要素のデフォルトのスタイル。

2.2

unset

を使用してクリアします CSS3 には、新しい属性値 unset
があります。 unset特定の属性設定の継承効果をクリアして、要素が属性のデフォルト値を取り戻すことができます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">a {     color: inherit;     text-decoration: none;     outline: none;     background-color: unset; /* 取消已经设置好的颜色 */ }</pre><div class="contentsignin">ログイン後にコピー</div></div>2.3 クリアには

none

を使用します。要素のスタイルをキャンセルする必要がある場合は、たとえば、none
値を使用できます。 : <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">input[type=&quot;checkbox&quot;] {     -webkit-appearance: none; /* 取消浏览器默认外观 */     appearance: none; }</pre><div class="contentsignin">ログイン後にコピー</div></div>2.4

! important をクリアするには ! important
を使用します。これは、すべての優先順位を最も高い優先度でオーバーライドする方法であり、継承されたスタイルをオーバーライドしたり、同じ優先順位セットのスタイル。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">p {     color: #333 !important; /* 覆盖其它可能已经设定的颜色值 */ }</pre><div class="contentsignin">ログイン後にコピー</div></div>2.5

inherit

を使用してスタイルをオーバーライドします。 inherit
属性を使用して、上位要素の値を継承する属性値を設定します。これにより、要素の現在のスタイルがオーバーライドされます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">h1 {     font-size: 2rem; } h2 {     font-size: inherit; /* 继承 h1 的 font-size 属性 */ }</pre><div class="contentsignin">ログイン後にコピー</div></div>結論

CSS 開発では、継承とスタイルのクリアは比較的一般的な手法であり、適切に使用するとコードの保守性と効率が向上します。ただし、これらの手法を過度に乱用すると、コードの保守と理解が困難になり、不要なエラーが発生することもあります。開発者は、継承とクリーンアップの長所と短所を比較検討し、これらの手法を最大限に活用し、不必要な複雑さを回避する必要があります。

以上がCSS継承スタイルをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。