• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 網(wǎng)頁設(shè)計中的行高

        管理line-height

        在前幾節(jié)中我們已經(jīng)了解到,網(wǎng)頁設(shè)計中改變一個行內(nèi)元素的line-height可能導(dǎo)致文本行相互重疊。不過,在所有情況下,這種修改都是針對單個元素的,所以,如何以一種更一般的方式影響元素的line-height而避免內(nèi)容重疊呢?

        一種辦法是對font-size有改變的元素結(jié)合使用em單位。例如:

        p {font-size: 14px; line-height: 1em;}

        big {font-size: 250%; line-height! 1em;}

        <p> Not only does this paragraph have "normal" text, but it also<br> 

        contains a line in which <big>some big text </big> is found.<br>

        This large text helps illustrate our point.

        </p>

        通過為big元素設(shè)置一個line-height,就提高了行框的總高度,從而提供足夠的空間來顯示這個big元素,而不會與任何其他文本重疊,也不會改變段落中所有行的line-height。這里使用了值1em,所以big元素的line-height將設(shè)置為與big的 font-size大小相等。要記住,網(wǎng)站建設(shè)line-height相對于元素本身的font-size設(shè)置,而不是相對于父元素設(shè)置。其結(jié)果如圖7-37所示。

        注意,以下樣式也會生成如圖7-37所示的結(jié)果:

        p {fpnt-size: 14px; line-height: 1;}

        big (font-size: 250%;)

        除非line-height值作為縮放因子被繼承,否則p和big元素的line-height值都為1。因此,網(wǎng)頁設(shè)計中行內(nèi)框的高度與內(nèi)容區(qū)的高度一致。

        一定要真正理解前幾節(jié)的介紹,因為如果再增加邊框,問題會更復(fù)雜。假設(shè)在所有超鏈接上加一個5像素的邊框:

        a:link {border: 5px solid blue;}

        倘若網(wǎng)站建設(shè)沒有設(shè)置一個足夠大的line-height來容納這個邊框,就有覆蓋其他行的危險??梢允褂胠ine-height增加未訪問鏈接行內(nèi)框的大小,就像前例中對big元素的做法一樣;在這里,只需讓line-height值比這些鏈接的font-size值大10像素。不過,如果你不知道字體大小是多少像素,這可能很困難。

        另一種解決方法是增加段落的line-height。這將會影響整個元素中的每一行,而不只是出現(xiàn)加邊框超鏈接的那一行:

        p {font-size: 14px; line-height: 24px;}

        a:link {border: 5px solid blue;}

        由于各行上下都增加了額外的空間。超鏈接外的邊框不會覆蓋其他行,如圖7-38所示,

        圖7-38:增加line-height以為行內(nèi)元素邊框留出空間

        當(dāng)然,這種方法在這里是可行的,因為所有文本的大小都相同。如果行中還有另外一些元素改變了行框的高度,邊框情況也可能發(fā)生變化。考慮以下規(guī)則:

        P {font-size: 14px; line-height: 24px;}

        a:link {border: 5px solid blue;}

        big {font-size: 150%; line-height: 1.5em;}

        根據(jù)這些規(guī)則,段落中big元素行內(nèi)框的高度將是31.5像素(14x1.5x1.5),這也是行框的高度。為了保證基線間隔一致,必須讓p元素的line-height等于或大于32px,

        基線與行高

        網(wǎng)頁設(shè)計中各行框的具體高度取決于其組成元素相互之間如何對齊。這種對齊往往很大程度上依賴于基線落在各元素(或匿名文本各部分)中的哪個位置,因為這個位置確定了其行內(nèi)框如何擺放?;€在各em框中的位置對于不同的字體是不同的。這個信息內(nèi)里在字體文件中,除非直接編輯字體文件,否則無法修改。

        因此,要得到一致的基線間隔,這更像是一門藝術(shù)而不只是一門科學(xué)。如果網(wǎng)頁設(shè)計中使用一種單位(如em)來聲明所有字體大小和行高,就很有可能得到一致的基線間隔。不過,如果混合使用了不同的單位,就會困難得多,甚至是不可能的。在寫作本書時,為了讓創(chuàng)作人員能夠保證一致的基線間隔而不論內(nèi)聯(lián)內(nèi)容是什么,已經(jīng)提出了很多屬性提案,這會大大角化行內(nèi)格式化的某些方面。不過,所建議的這些屬性都沒有具體實現(xiàn),所以其采納還遙遙無期。

        縮放行高

        可以看到,設(shè)置line-height的最好辦法是使用一個原始數(shù)字值。之所以說這種方法最好,原因是這個數(shù)會成為縮放因子,而該因子是一個繼承值而非計算值。假設(shè)你希望一個文檔中所有元素的line-height都是其font-size的1.5倍,可以如下聲明:

        body {line-height: 1.5;}

        縮放因子1.5在元素間逐層傳遞,在各層上,這個因子都作為一個乘數(shù)與各元素的font-size相乘。因此,以下標(biāo)記會得到如圖7-39所示的結(jié)果:

        p {font-size: 15px; line-height: 1.5;}

        small {font-size: 66%;}

        big {font-size: 200%;}

        <p>This paragraph has a line-height of 1.5 times its font-size. In addition, 

        any e1ements within it <small>such as this small element</small> also have 

        line-heights 1.5 times their font-size...and that includes <big>this big 

        e1ement right here</big>. By using a scaling factor, line-heights scale 

        to match the font-size of any e1ement.</p>在本例子中,small元素的行高為15px,而對于big元素則為45px(這些數(shù)看上去有些過分,不過它們與總的頁面設(shè)計是一致的)。當(dāng)然,如果你不希望big文本生成太多行間距,可以為它另外指定一個line-height值,這會覆蓋繼承的縮放因子:

        p {font-size: 15px; line-height: 1.5;}

        small {font-size: 66%;}

        big {font-size: 200%; line-height: 1em;}

        還有一種解決方案(可能這是最簡單的一種方法),即適當(dāng)?shù)卦O(shè)置樣式,使行高恰好能包含行內(nèi)容,而沒有多余的空間。這里你可能會使用line-height值1.0。這個值乘以每個font-size,其結(jié)果與各元素的font-size值完全相等。因此,對于每個元素,行內(nèi)框與內(nèi)容區(qū)相同,這意味著會使用所需的絕對最小大小來包含各元素的內(nèi)容區(qū)。

        注意:網(wǎng)頁設(shè)計中大多數(shù)字體在字符字形行之間還顯示有一點空間。因為字符往往比其em框要小。只有script ("cursive")字體例外,其字符字形往往大于其em框。

        網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點擊可一鍵撥號)
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>