0

明らかに同一のプロパティ/宣言が含まれているのに、これら 2 つの h1 タグのフォント サイズが異なる理由について、私は混乱しています。私が持っている知識はわずかですが、それは継承と関係があると感じています。1 つの h1 タグがネストされ、もう 1 つのタグがネストされていないことを確認します。
HTML:

 <div id="site-offline-container">
        <div id="site-offline-heading">
            <h1>Hello World</h1>
        </div>
    </div>

   <h1 class="hello">Hello World</h1>

CSS:

body {
  background:#fff;
  font-family:Trebuchet MS, Arial, Tahoma, sans-serif;
  font-size:14px; letter-spacing:1px; color:#000;
}
#site-offline-heading {
  font-size: 40px;
  letter-spacing:-5px;
  color:#000;
  text-shadow: rgba(255,255,255,0.2) 1px 1px;
}
#site-offline-heading h1 {
  margin-bottom:10px;
}
.hello {
  font-size: 40px;
  letter-spacing:-5px;
  color:#000;
  text-shadow: rgba(255,255,255,0.2) 1px 1px;
}
4

2 に答える 2

2

#site-offline-heading h1要素内のすべての h1 見出しを ID site-offline-heading でスタイルするように CSS に指示しています

他の h1 はこの要素の外にあるため、h1 のデフォルトのスタイリングを使用します。すべての h1 タグに同じスタイルを適用する場合は、これを使用します。h1{/*styling*/}

于 2013-03-29T16:06:39.617 に答える
0

最初のケースでは h1 を含む要素にフォント サイズを設定し、2 番目のケースでは h1 要素に直接設定しています。最初のケースでは、h1 はデフォルトのフォント サイズである 200%、つまりコンテナー (親) のフォント サイズの 2 倍を使用するため、違いが生じます。

于 2013-03-29T19:12:14.433 に答える