私のDrupalテーマは以下を生成します:
<div class="field1">
Field 1
</div>
<div class="field2">
<h3>Field 2</h3>
</div>
結果はそれField 2
が別のスタイルを持っているということです。
h3
CSSを使用した場合の影響を取り除くにはどうすればよいですか?
より良い方法-h3タグを削除します。ただし、親要素のすべてのスタイルをリセットする必要がある場合は、「font-size」の「font」、「font-style」などのグローバル属性を使用します...パディング、マージンの境界線、背景スタイルの継承に関する警告-これは醜く見える可能性があります。たとえば、要素にパディングがあり、要素ごとに境界線が重複している場合:)
.someclass * {
font: inherit;
color: inherit;
/* optional reset */
background: transparent;
border: none;
margin: 0;
padding: 0;
}
次のようにh3にアクセスできます。
.field2 h3{ //style here }
これにより、field2のクラスを持つ要素内のh3のスタイルが変更されます。さらに具体的にしたい場合:
div.field2 > h3 { //style here }
これは、field2のクラスを持つdivの最初のレベルの子孫であるh3要素のスタイルのみを変更します。cssセレクターを調べることをお勧めします。
既存の効果を削除するには、それらを上書きする必要があります。これは、値を要素のデフォルトに戻すだけで実行できます。
効果を「削除」するには、スタイルを適用する前の値にプロパティを設定する必要があります<h3>
。たとえば、次のコマンドでフォントサイズをリセットできます。
.field > h3 {
font-size: medium;
}
CSSまたはブラウザの内部スタイルシートによって変更されるすべてのプロパティに対してこれを行う必要がありますが、役立つことがあります。最新の開発ツール(Chromeなど)を使用すると、要素を検査して、その要素が持つプロパティを表示できます。それらがどこから来たのか(それが変更されていることがわかりますfont-size
)。適切なCSS標準を見ると、これらの各プロパティのデフォルト値がわかります(たとえば、ここにfont-size
あります)。
You cannot remove the effects of tags in CSS, except by writing CSS code that overrides stylistic settings that elements have due to browser defaults or other settings.
For an h3
element, the properties that are probably set in browser default style sheets are display
, unicode-bidi
, font-size
, font-weight
, margin
, and page-break-after
. (Cf. to Appendix D of the CSS 2.1 spec, Default style sheet for HTML 4.) You can set these to the desired values, and even a simple selector will suffice, e.g.
h3 { font-size: 120%; font-weight: normal; margin: 0; }
However, other style sheets that affect your document may have other settings on h3
. And there is really no law against browser default style sheets using e.g. colors for headings or setting a specific font family.
To override other CSS settings in general, you need to use CSS rules with a sufficiently specific selector.
これに慣れている
このように
.field2 h3{
color:black;
font-size:20px;
}