• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 網(wǎng)頁設計中的文本裝飾

        接下來我們討論text-decoration,這是一個很有意思的屬性,它在網(wǎng)頁設計中提供了很多非常有趣的行為。

        不出所料,underline會對元素加下劃線,就像HTML中的U元素一樣。overline的作用恰好相反,會在文本的頂端畫一個上劃線。值line-through則在文本中間畫一個貫穿線,這也稱為貫穿文本,等價于HTML中的S和strike元素。blink會讓文本閃爍,類似于Netscape支持的頗招非議的blink標記。圖6-26顯示了這些值的一些例子:

        p.enph {text-decoration: underline;}

        p.topper {text-decorat ion: overline;}

        p.old {cext-ciecoration: line-through;}

        p.annoy {text-decorat ion: blink;}

        p.plain {text-decoration: none;}

        注意:當然,無法在本書中顯示閃爍的效果,不過很容易想象(也許實在太容易了)。有時,用戶代理不要求支持blink,在寫作本書時,Internet Explorer就不支持blink。

        none值會關閉原本應用到一個元素上的所有裝飾。通常,無裝飾的文本是默認外觀,伹也不總是這樣,例如,鏈接默認地會有下劃線。如果你想去掉超鏈接的下劃線,可以使用以下網(wǎng)站建設CSS規(guī)則來做到這一點:

        a {text-decoration: none;}

        如果顯式地用這樣一個規(guī)則去掉鏈接的下劃線,那么錨與正常文本之間在視覺上的唯一差別就是顏色(至少默認是這樣,不過也不能完全保證其顏色肯定有區(qū)別)。

        注意:盡管我個人對此沒有什么意見,不過許多用戶如果發(fā)現(xiàn)你去掉了鏈接的下劃線會很不高興。這取決于個人觀點,所以你自己看著辦。不過要記?。喝绻溄拥念伾c正常文本的差別不夠明顯,用戶將很難在文檔中找到超鏈接。

        還可以在一個規(guī)則中結合多種裝飾。如果希望所有超鏈接既有下劃線又有上劃線,則規(guī)則如下

        a:link, a:visited {text-decoration: underline overline;}

        不過要當心:如果兩個不同的裝飾都與同一個元素匹配,勝出規(guī)則的值會完全取代另一個值。考慮以下規(guī)則:

        h2.stricken {text-decoration: line-through;}

        h2 (text-decoration: underline overline;}

        給定這些規(guī)則,所有class為stricken的h2元素都只有一個貫穿線裝飾,而沒有下劃線和上劃線裝飾,因為text-decoration值會替換而不是累積起來。

        怪異的裝飾

        下面來看text-decoration不尋常的一面。第一個奇怪的地方是text-decoration不能繼承。沒有繼承性意味著文本上畫的任何裝飾線(上劃線或貫穿線)與父元素的顏色相同。即使后代元素本身有其他顏色也是如此,如圖6-27所示:

        p {text-decoration: underline; color: black;}

        strong {color: gray;}

        <p>This paragraph, which is black and has a black underline, also contains <strong>strongly emphasized text</strong> which has the black underline beneath it as well.</p>

        圖6-27:下劃線的顏色一致

        為什么會這樣?因為text-decoration的值不能繼承,strong元素認為text-decoration默認值為none。因此,strong元素沒有下劃線?,F(xiàn)在,在strong元素下面很顯然有一條線,所以說它無下劃線看上去很傻。但這并不傻。你在strong元素下面看到的是段落的下劃線,它實際上只是“經(jīng)過”了 strong元素而已。如果修改粗體元素的樣式,可以更清楚地看到這一點,如下:

        p {text-decoration: underline; color: black;}

        strong {color: gray;text-decoration: none;}

        <p>This paragraph, which is black and has a black underline, also contains <strong>strongly aifhasized text</strong> which has the black underline beneath it as well.</p>

        其結果與圖6-27—樣,因為你所做的就是明確地聲明已經(jīng)有什么。換句話說,沒有辦法去掉父元素生成的下劃線(或者上劃線或貫穿線)。

        text-decoration與vertical-align結合時,還會發(fā)生更奇怪的事情。圖6-28顯示了這樣一種情況。因為sup元素沒有自己的裝飾,但是它在一個有上劃線的元素中,這個上劃線穿過了sup元素:

        p {text-decoration: overline; font-size: 12pt;}

        sup {vertical-align: 50%; font-size: 12pt;}

        圖6-28:正確但有些奇怪的裝飾行為

        因為文本裝飾可能會造成這樣一些問題,現(xiàn)在你可能聲稱再也不會使用文本裝飾了。實際上,我還只是指出了其中最簡單的一些可能的情況,因為我們只是討論了按照規(guī)范來講會怎么樣。在實際中,盡管不該去掉子元素的下劃線,但有些Web瀏覽器確實會這么做。這些瀏覽器之所以違反規(guī)范,原因很簡單:創(chuàng)作人員希望如此。考慮以下標記:

        p (text-decoration: underline; color: black;}

        strong {color: silver; text-decoration: none;}

        <p>This paragraph, which is black and has a black underline, also contains <strong>boldfaced text</strong> which does not have black underline beneath it.</p>

        圖6-29所示為一個Web瀏覽器中去掉了strong元素的下劃線。

        圖6-29:—些瀏覽器的實際表現(xiàn)

        這里有一個警告,很多瀏覽器確實會遵循規(guī)范,而且現(xiàn)有瀏覽器(或所有其他用戶代理)的將來版本可能有一天會嚴格遵循規(guī)范。所以,如果你依賴于使用none來去掉裝飾,要認識到重要的一點:將來這可能會給你帶來麻煩,甚至現(xiàn)在就會出問題。而且,CSS 的將來版本可能會包含一些去掉裝飾的方法,而不必不正確地使用none,所以這方面還是有希望的。

        還有一種方法可以改變裝飾的顏色而不會違反規(guī)范。你應該記得,在一個元素上設置文本裝飾意味著整個元素都有同樣的顏色裝飾,即使子元素有不同顏色。為了使裝飾顏色與一個元素匹配,必須顯式地聲明其裝飾,如下:

        p {text-decoration: underline; color: black;}

        strong (color: silver; text-decoration: underline;}

        <p>This paragraph, which is black and has a black underline, also contains <strong>strongly emphasized text</strong> which has the black underline beneath it as well, but whose gray underline overlays the black underline of its parent.</p>

        在圖6-30中,strong元素被設置為灰色,而且有一個下劃線?;疑南聞澗€看上去“覆蓋”了父元素的黑色下劃線,所以裝飾的顏色與strong元素的顏色匹配。

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