2012-01-26 62 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