DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS教程:匯總CSS初學者的幾個技巧
CSS教程:匯總CSS初學者的幾個技巧
編輯:CSS詳解     

  這幾則CSS技巧都是從網絡收集來的,作為老手就當作溫故而知新,本文主要面對CSS新手朋友,有一些東西或許不是搞的很明白。而這十則CSS技巧能促進你的學習與編碼技巧,更多的知識浏覽CSS教程頻道內容。希望大家能認真閱讀。

  一、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,他們會使用缺省值,這點要記上。

  二、CSS border的缺省值

  通常可以設定邊界的顏色,寬度和風格,如:
  border: 3px solid #000;
  這位把邊界顯示成3像素寬,黑色,實線。但實際上這裡只需要指定風格即可。
  如果只指定了風格,其他屬性就會使用缺省值。一般地,Border的寬度缺省是medium,一般等於3到4個像素;缺省的顏色是其中文字的顏色。如果這個值正好合適的話,就不用設那麼多了。

  三、給元素同時使用兩個類

  一般一個元素設定一個類(Class),但這並不意味著不能用兩個。事實上,你可以這樣:
  〈p class=”text side”>…〈/p>
  同時給P元素兩個類,中間用空格格開,這樣所有text和side兩個類的屬性都會加到P元素上來。如果它們兩個類中的屬性有沖突的話,後設置的起作用,即在CSS文件中放在後面的類的屬性起作用。
  補充:對於一個ID,不能這樣寫〈p id=”text side”>…〈/p>也不能這樣寫

  四、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 這個命令來關掉一些裝飾圖片,再關掉一些導航按鈕等。

  五、CSS圖片替換技巧

  一般都建議用標准的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