啦咯ill圖

根據CSS繼承一說,咱們在「div#wrap」的內容容器中沒有顯式的設置字體大小,這樣整個「div#wrap」將繼承了其父元素「body」的字體——「16px」。
一、給段落設置樣式:——「12px」的字體,「18px」的行高以及margin值
從CSS繼承中,咱們能夠得知咱們全部段落繼承了其父元素「div#wrap」的「font-size:16px」。同時咱們經過前面的介紹得知1px = 1 ÷ 16 = 0.0625em,這樣一來咱們就很輕鬆的知道「12px」等於多少個「em」
0.0625em × 12 = 0.750em
這樣咱們就能夠給段落p設置樣式:字體

p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */}

要計算出段落所需的行高和「margin」爲「18px」,來知足Richard Rutter說的basic leading,那咱們就須要像下面的方法和來計算:
18 ÷ 12 = 1.5em
使用所需的行高值「18px」直接除以「字體大小12px」,這樣就獲得了段落「p」的「line-height」值。在本例中行高就等於字體的「1.5」倍,接着咱們把「line-height」和「margin」樣式加到段落「p」中code

p{
            font-size: 0.75em;/*0.625em × 12 = 0.750em */
            line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */
            margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */
        }

二、給標題設置一個18px的字號
標題「h1」和段落「p」同樣的原理,他也是繼承他父元素「div#wrap」的「16px」的「font-size」,因此咱們也是按一樣的方法能夠計處出他的「em」
0.0625em × 18 = 1.125em
咱們能夠把得出的值寫到CSS樣式表中繼承

h1 {
            font-size: 1.125em;/*0.625em × 18 = 1.125em*/
        }

一樣爲了保留Richard Rutter所說的vertical rhythm,咱們一樣將標題「h1」的「line-height」和「margin」都設置爲「18px」,使用方法前面介紹的方法。很容易獲得他們的「em」值爲「1em」:容器

h1 {
            font-size: 1.125em; /*0.625em × 18 = 1.125em*/
            line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */
            margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */
        }
相關文章
相關標籤/搜索