2012-01-26 4 views
1

フォントサイズがpタグによって継承されていない理由とdivタグとpタグがそれにネストされている理由を誰でも説明できますか?アンカータグと同様に?身体の上書きされたフォントサイズ:160%を継承してはいけませんか、それはますます大きくなりますか?フォントが大きくなっていないのはなぜですか?フォントを継承してクルーグを起こしていますか?

あなたが知っているように、CSSの最初の部分はEric Meyerのリセットスタイルの一部です。私の理解が正しければ、font-sizeプロパティをフォントの下に置いて、フォントサイズプロパティを有効にするべきではないでしょうか?カスケード効果のおかげで単純に上書きされませんか?

実際にフォントサイズを変更しようとすると:100%;他の何かに(例えば:200%)視覚効果がないことがわかります(少なくとも即時のものはありません)。

font:inheritですか?私が気づいていない何かをするスタイル?これは私をかなり怒らせている...これを理解していない。

ありがとうございます。

DEMO: 'http://tinkerbin.com/GMEyX3is'

<head> 
    <style> 
    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, figcaption, figure, 
    footer, header, hgroup, menu, nav, section, summary, 
    time, mark, audio, video { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     outline: 0; 
     font-size: 100%; 
     font: inherit; 
     vertical-align: baseline; 
    } 

    body{ 
     font-size: 160%; 
    } 
    </style> 
</head> 

<body> 
    <p>Paragraph <a href="#">OUTSIDE</a> of div</p> 

    <div> 
    <p>Paragraph INSIDE of div</p> 
    </div> 
</body> 

答えて

2

ここでは、font: inherit(後で表示される)の設定が無効になるため、設定値font-size: 100%は無視されます。 fontを設定すると、常にフォント関連のプロパティがすべて設定されますが、これにはfont-size: inheritが含まれます。継承された値は一般にプロパティに依存しますが、ほとんどの場合ですが、この場合、は親要素のの値を計算します。したがって、値font-sizeの値がbodyの場合、ブラウザに応じてピクセル単位またはポイント単位の値が使用されます。この計算値は、パーセンテージではなく、継承されたものです。

inheritをサポートしていないブラウザは、この設定を無視して、font-size: 100%を使用しますが、結果として同じサイズになります。

+0

Jukka K. Korpela、あなたが正しく理解していれば、Eric Meyerのリセットスタイルシートのfont-size:100%は、継承値をサポートしていないブラウザをカバーするだけですか?しかしそれでも見出しのフォントの太さは太字になります。これを無視しているヘスは、わかりやすくするために仮定しています。 – banzomaikaka

+0

エリック自身の説明をhttp://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/でチェックしてください。 (私は彼の推論をすべて理解するふりをしていない、私はスタイルシートのファンをリセットしていない) –

+0

ありがとう。はい、私はすでに彼(そしてそれ以外の人)のページを読んでいましたが、font-sizeプロパティの使用については言及しませんでした。しかし、とにかく、あなたは疑いを晴らしました。ありがとうございます。 Heh。 ;) – banzomaikaka

1

あなたは160%であることをbody上のフォントサイズを設定しました。つまり、ページ全体のすべての要素が、ブラウザで使用される基本フォントサイズよりも60%以上のフォントサイズを持つようになりました。

リセットスタイルでfont-sizeが100%に設定されている場合、基本的にすべての要素のfont-sizeがブラウザの基本フォントサイズと同じになることを意味します。したがって、<h1>, <h2> ...のようなヘッダータグでも、同じフォントサイズが使用されます。それぞれの入れ子要素でフォントサイズを大きくするには、divと必要に応じてpにfont-sizeを定義する必要があります。だから、おそらくあなたのような何かを行うことができます:あなたは100%とフォントサイズを定義した場合

div{ 
    font-size:200%; 
} 

p{ 
    font-size:200%; 
} 

、それはそれのフォントサイズは親要素の継承されます。

+0

はい、わかりました。私が実際に混乱させていたのは、フォントの継承値が実際のパーセンテージではなく計算値であることを知らないということでした。ありがとう;) – banzomaikaka

関連する問題