2.5 文字的特殊效果

2018-11-06 18:06 更新


2.5 文字的特殊效果


下面你將發(fā)現(xiàn)其它一些有關(guān)字體的樣式表屬性,你可以將其加入到你的工具箱中。

字體參數(shù)(font-variant)

這時(shí)一種挺簡(jiǎn)單的屬性,你可以將正常文字縮小一半尺寸后大寫(xiě)顯示。

    H2 { font-variant: small-caps }



很不幸,Communicator或者Internet Explorer目前都不支持這項(xiàng)屬性。IE 4有些靠近這種標(biāo)準(zhǔn),但它只是將字體以正常的大寫(xiě)形式顯示。


希望IE5.0能支持這項(xiàng)屬性。

文字變形(text-transform


這項(xiàng)屬性可以使你輕而易舉地控制字母寫(xiě)?;敬a:

    B { text-transform: uppercase }


    以下為所有可用的參數(shù):


  • uppercase 使所有字母大寫(xiě)顯示,
    例:
    This sentence serves as an example.

  • lowercase使所有字母小寫(xiě)顯示,
    例:
    This sentence serves as an example.

  • capitalize 使每個(gè)單詞的第1個(gè)字母大寫(xiě)顯示,例:
    This sentence serves as an example.

  • none 使所有繼承的文字變形參數(shù)被忽略,文字將以正常形式顯示。
    例:
    This sentence serves as an example.


(注意:IE 3不支持文字變形)

如果你的瀏覽器不支持上述顯示效果,請(qǐng)點(diǎn)擊這里查看顯示效果。


文字修飾(text-decoration

幾十年以來(lái)(不管怎么說(shuō),反正很長(zhǎng)的一段時(shí)間以來(lái)),所有鏈接了的文字在瀏覽器中都以下劃線的形式顯示,對(duì)這種事實(shí)我們都無(wú)計(jì)可施。我認(rèn)為這種形式效果很難看,女士們先生們,現(xiàn)在我們有解決辦法了:文字修飾(text-decoration)。

其基本語(yǔ)法如下:

    B { text-decoration: underline }



大部分的選項(xiàng)使得文字變得難以閱讀:

  • underline 給文字下劃線,例:
    these words.

  • overline給文字上劃線,例:
    these words.

  • line-through給文字劃出刪除線,
    例:these words.

  • blink是你在惡夢(mèng)中常??吹降模?br/>文字在閃爍,例:
    these words.

  • none使得上述效果都不會(huì)發(fā)生。


(注意:Communicator不支持上劃線,IE 4不支持文字閃爍,IE 3對(duì)這些都不支持。)

如果你的瀏覽器不支持這些CSS屬性,請(qǐng)點(diǎn)擊這里查看顯示效果。

none參數(shù)非常有用,你可以使鏈接的文字不以下劃線的形式顯示。具體做法:

    A:link { text-decoration: none }
    A:active { 
    text-decoration: none }
    A:visited { text-decoration: none }



思考以下這些為<A>標(biāo)簽預(yù)定義的分類A:link用于正常的未被訪問(wèn)過(guò)的鏈接,A:active用于你正在點(diǎn)擊的鏈接
A:visited 用于已經(jīng)訪問(wèn)過(guò)的鏈接。

這些指令進(jìn)入你的植入、鏈接、輸入的樣式表,但不會(huì)改變你的HTML鏈接代碼:


<A 
HREF="http://www.webmonkey.com/">
Link</A>



以下是顯示結(jié)果:


如果你的瀏覽器不支持這種CSS屬性,請(qǐng)點(diǎn)擊這里查看顯示效果。


你不僅可以消除鏈接的下劃線,而且你還可以利用這3條屬性使用CSS的其它屬性,比如,你可以使得為被訪問(wèn)過(guò)的鏈接以12points的Arial加重字體顯示,而訪問(wèn)過(guò)的鏈接以10points尺寸的Times斜體字顯示。這個(gè)世界可以由你自由塑造,

可惜呀,可惜!并不是所有的瀏覽器都支持這項(xiàng)屬性。Communicator支持帶文字修飾(text-decoration)的預(yù)定義分類,但對(duì)其它屬性非常挑剔。IE 3不支持A:active(而MAC不支持A:visited),IE 4支持全部這些屬性。

盡管有這些局限,但至少你比以前有了更多的可能性!這都要感謝CSS的創(chuàng)作者...

下面是一個(gè)小練習(xí)。



以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)