DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 10個你未必知道的CSS技巧
10個你未必知道的CSS技巧
編輯:CSS進階教程     

本翻譯並未得到作者或網站授權。一切權利都歸原作者及原網站所有。

如果你得到原作者或原發表網站的授權,可以自由使用本翻譯。

1.CSS字體屬性簡寫規則

一般用CSS設定字體屬性是這樣做的:

font-weight:bold;

font-style:italic;

font-varient:small-caps;

font-size:1em;

line-height:1.5em;

font-family:verdana,sans-serif;

但也可以把它們全部寫到一行上去:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不錯!只有一點要提醒的:這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且,如果你沒有設定font-weight, font-style, 以及 font-varient ,他們會使用缺省值,這點要記上。

2. 同時使用兩個類

一般只能給一個元素設定一個類(Class),但這並不意味著不能用兩個。事實上,你可以這樣:

<p class="text side">...</p>

同時給P元素兩個類,中間用空格格開,這樣所有text和side兩個類的屬性都會加到P元素上來。如果它們兩個類中的屬性有沖突的話,後設置的起作用,即在CSS文件中放在後面的類的屬性起作用。

補充:對於一個ID,不能這樣寫<p id="text side">...</p>也不能這樣寫

3. CSS border的缺省值

通常可以設定邊界的顏色,寬度和風格,如:

border: 3px solid #000

這位把邊界顯示成3像素寬,黑色,實線。但實際上這裡只需要指定風格即可。

如果只指定了風格,其他屬性就會使用缺省值。一般地,Border的寬度缺省是medium,一般等於3到4個像素;缺省的顏色是其中文字的顏色。如果這個值正好合適的話,就不用設那麼多了。

4. CSS用於文檔打印

許多網站上都有一個針對打印的版本,但實際上這並不需要,因為可以用CSS來設定打印風格。

也就是說,可以為頁面指定兩個CSS文件,一個用於屏幕顯示,一個用於打印:

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

第1行就是顯示,第2行是打印,注意其中的media屬性。

但應該在打印CSS中寫什麼東西呢?你可以按設計普通CSS的方法來設定它。設計的同時就可以把這個CSS設成顯示CSS來檢查它的效果。也許你會使用 display: none 這個命令來關掉一些裝飾圖片,再關掉一些導航按鈕。要想了解更多,可以看“打印差異”這一篇。

5. 圖片替換技巧

一般都建議用標准的HTML來顯示文字,而不要使用圖片,這樣不但快,也更具可讀性。但如果你想用一些特殊字體時,就只能用圖片了。

比如你想整個賣東西的圖標,你就用了這個圖片:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

這當然可以,但對搜索引擎來說,和正常文字相比,它們對alt裡面的替換文字幾乎沒有興趣這是因為許多設計者在這裡放許多關鍵詞來騙搜索引擎。所以方法應該是這樣的:

<h1>Buy widgets</h1>

但這樣就沒有特殊字體了。要想達到同樣效果,可以這樣設計CSS:

h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height換成真的圖片的高度。這裡,圖片會當作背景顯示出來,而真正的文字由於設定了-2000像素這個縮進,它們會出現在屏幕左邊2000點的地方,就看不見了。但這對於關閉圖片的人來說,可能全部看不到了,這點要注意。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved