2012-01-26 102 views
1

任何人都可以向我解释为什么字体大小没有被p标签继承,并且嵌套在div和p标签中?以及锚标签?他们是不是应该继承人体被覆盖的字体大小:160%,变得越来越大?为什么字体变得越来越大?是字体继承组合?

如您所知,css的第一部分是Eric Meyer重置样式的一部分。如果我的理解是正确的,font-size属性是不是应该放在字体下方才能生效?由于级联效应,它是不是简单地被覆盖?

其实如果你尝试改变font-size:100%;到别的东西(例如:200%),你会注意到它没有视觉效果(至少没有直接的效果)。

它是字体:继承;风格,做我不知道的事情?这让我非常生气......没有想到这一点。

在此先感谢的人。

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-size: 100%,因为设置font: inherit(稍后显示)将覆盖它。设置font始终设置所有与字体相关的属性,其中包括font-size: inherit。继承的值通常取决于属性,但大多数情况下,在这种情况下,计算的父元素的值为。因此,无论什么值,的设置body的结果是,将使用取决于浏览器的以像素或点为单位的值。这是继承的计算值,而不是百分比。

不支持值inherit的浏览器将忽略此设置并使用font-size: 100%,这当然会导致相同的大小。

+0

因此,Jukka K. Korpela,如果我正确地理解了你,Eric Meyer的重置样式表中的font-size:100%仅仅是为了掩盖不支持继承值的浏览器?但是,这仍然会将标题的字体粗细保留为粗体。为了简单起见,我假设他忽略了这一点。 – banzomaikaka

+0

查看Eric自己的解释http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/。 (我不会假装理解他的所有推理,而且我不是重置样式表的粉丝。) –

+0

谢谢。是的,我已经浏览过那个页面(以及其他一些页面),但没有提到使用font-size属性的理由。但是,无论如何,你清除了我的怀疑。先生非常感谢您。嘿。 ;) – banzomaikaka

1

你已经设置的body字体大小为160%。这意味着整个页面中的所有元素的字体大小将比浏览器使用的基本字体大60%。

当在重置样式中font-size设置为100%时,它基本上意味着所有元素的字体大小将与浏览器的基本字体大小相同。所以即使标题标签如<h1>, <h2> ...也会采用相同的字体大小。为了使每个嵌套元素的字体大小变大,您必须在div上定义字体大小,如果需要,还可以定义字体大小。因此,也许你可以这样做:

div{ 
    font-size:200%; 
} 

p{ 
    font-size:200%; 
} 

如果定义字体大小为100%,它将继承字体大小的它的父元素。

+0

是的,我明白了。实际上令我困惑的是不知道字体继承值是计算值而不是实际百分比。谢谢;) – banzomaikaka