2.4 加重顯示和斜體字的所有方式
利用CSS加入斜體字非常簡單,而且我們對(duì)于加重字體還有很多選擇。
字體風(fēng)格
字體風(fēng)格用來控制斜體字的屬性,非常漂亮又非常簡單:
H3 { font-style: italic }
當(dāng)瀏覽器接到應(yīng)用斜體字的指令后,它將用戶的機(jī)器中尋找安裝的斜體字版本,果不存在斜體字,瀏覽器將生成一種。常,就是指將正常的字體傾斜顯示。
如果一種字體的名稱為Oblique,而不是Italic,瀏覽器就會(huì)使用oblique作為字體風(fēng)格的參數(shù)。
字體風(fēng)格的第3種參數(shù)是normal,它將取消斜體字風(fēng)格,將字體以正常形式顯示。
字重
加重風(fēng)格可以關(guān)閉或打開,利用字重屬性,可以創(chuàng)造出一系列新的加重字體。
P { font-weight: bold }
這是字重最常見的應(yīng)用方式,而normal屬性也可以取消加重字體,將字體以正常形式顯示。
你還可以用數(shù)值100,200,...900。正常的非加重體的字體值為400,900是最加重的字體參數(shù)值。
Web瀏覽器將決定每一參數(shù)值的實(shí)際顯示。
要顯示這些例子的效果,你必須安裝相應(yīng)的字庫,并且你的系統(tǒng)還得支持CSS:
Arial
Verdana
Eras
而且你的用戶的機(jī)器也必須安裝相同的字而且其系統(tǒng)支持CSS的這些參數(shù)值。(IE
3對(duì)此均不支持)。
最后,你還可以給字重加上lighter和bolder參數(shù),當(dāng)然前提是所使用的字體已經(jīng)賦予了某種級(jí)別的加重字體屬性。在已有屬性級(jí)別上,瀏覽器將使字體的顯示相應(yīng)地更加重一些(bolder)或更輕一些(lighter)。
(注意:IE 3或Netscape Communicator都不支持lighter或bolder參數(shù)。)
2.5 文字的特殊效果
下面你將發(fā)現(xiàn)其它一些有關(guān)字體的樣式表屬性,你可以將其加入到你的工具箱中。
字體參數(shù)(font-variant)
這時(shí)一種挺簡單的屬性,你可以將正常文字縮小一半尺寸后大寫顯示。
H2 { font-variant: small-caps }
很不幸,Communicator或者Internet Explorer目前都不支持這項(xiàng)屬性。IE
4有些靠近這種標(biāo)準(zhǔn),但它只是將字體以正常的大寫形式顯示。
希望IE5.0能支持這項(xiàng)屬性。
文字變形(text-transform)
這項(xiàng)屬性可以使你輕而易舉地控制字母寫;敬a:
B { text-transform: uppercase }
以下為所有可用的參數(shù):
uppercase 使所有字母大寫顯示,
例:
This sentence serves as an example.
lowercase使所有字母小寫顯示,
例:
This sentence serves as an example.
capitalize 使每個(gè)單詞的第1個(gè)字母大寫顯示,例:
This sentence serves as an example.
none
使所有繼承的文字變形參數(shù)被忽略,文字將以正常形式顯示。
例:
This sentence serves as an example.
(注意:IE 3不支持文字變形)
如果你的瀏覽器不支持上述顯示效果,請(qǐng)點(diǎn)擊這里查看顯示效果。
文字修飾(text-decoration)
幾十年以來(不管怎么說,反正很長的一段時(shí)間以來),所有鏈接了的文字在瀏覽器中都以下劃線的形式顯示,對(duì)這種事實(shí)我們都無計(jì)可施。我認(rèn)為這種形式效果很難看,女士們先生們,現(xiàn)在我們有解決辦法了:文字修飾(text-decoration)。
其基本語法如下:
B { text-decoration: underline }
大部分的選項(xiàng)使得文字變得難以閱讀:
underline 給文字下劃線,例:
these words.
overline給文字上劃線,例:
these words.
line-through給文字劃出刪除線,
例:these words.
blink是你在惡夢(mèng)中常?吹降模
文字在閃爍,例:
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用于正常的未被訪問過的鏈接,A:active用于你正在點(diǎn)擊的鏈接
A:visited 用于已經(jīng)訪問過的鏈接。
這些指令進(jìn)入你的植入、鏈接、輸入的樣式表,但不會(huì)改變你的HTML鏈接代碼:
<A >
Link</A>
以下是顯示結(jié)果:
This text is a link, but not
underlined!
如果你的瀏覽器不支持這種CSS屬性,請(qǐng)點(diǎn)擊這里查看顯示效果。
你不僅可以消除鏈接的下劃線,而且你還可以利用這3條屬性使用CSS的其它屬性,比如,你可以使得為被訪問過的鏈接以12points的Arial加重字體顯示,而訪問過的鏈接以10points尺寸的Times斜體字顯示。這個(gè)世界可以由你自由塑造,
可惜呀,可惜!并不是所有的瀏覽器都支持這項(xiàng)屬性。Communicator支持帶文字修飾(text-decoration)的預(yù)定義分類,但對(duì)其它屬性非常挑剔。IE
3不支持A:active(而MAC不支持A:visited),IE 4支持全部這些屬性。
盡管有這些局限,但至少你比以前有了更多的可能性!這都要感謝CSS的創(chuàng)作者...
下面是一個(gè)小練習(xí)。
2.6 第2日的練習(xí)
以下的練習(xí)將幫助你嘗試練習(xí)串接樣式表的一些屬性。你的任務(wù):只使用HTML和樣式表復(fù)制這張樣式表實(shí)例,記住,你必須有4.0版的瀏覽器,以便使實(shí)例顯示效果正常。
![]() | ![]() .. 定價(jià):¥133 優(yōu)惠價(jià):¥133.0 更多書籍 |
![]() | ![]() .. 定價(jià):¥124 優(yōu)惠價(jià):¥124.0 更多書籍 |