古怪猴子押分技巧

客服:

服務熱線

0532-86681214

在線客服

WEB標準中使用CSS的基礎教程

發布日期:2010-11-15 瀏覽數:3600 次
CSS過去經常被用來定義字體的屬性,而現在可以用它來控制整個文檔的布局。然而,為了有效的用CSS來控制布局,需要做一些不同的處理,這種不同是跟用表格布局相對比的。

  為了CSS可以高效的控制布局,結構化、語義化的XHTML是必不可少的。

  瀏覽器的支持
  在過去幾年,瀏覽器對CSS的支持程度已經改進了很多。不幸的是,瀏覽器的開發商好象對實施開放的標準并不感興趣,所以不同瀏覽器對CSS的支持程度也大相徑庭。就算是支持程度最好的瀏覽器,在軟件中仍然有一些bug,使得瀏覽器以錯誤的方式運行。

  現在對CSS支持比較好的瀏覽器有Mozilla (還有以Gecko為內核的: Firefox, Camino, Netscape 6+), Opera和Safari (還有以 WebCore為內核的: OmniWeb 4.5 and later)。 Internet Explorer 6/Win并沒有如此好的CSS支持程度,但是它將讓你為其做出大量的基礎工作。Internet Explorer 5/Mac對CSS 1的支持很出色, 但是卻不支持CSS 2。 IE 5.* for Windows的支持性也很好, 但是仍然有一些問題值得你去注意。早期版本的IE以及Netscape 6以前的版本就沒有必要提及了。

  因為現在大多數人都使用IE/WIN,所以你將不得不讓它成為特殊分子。這并不是說,你不能或者不應該使用有更好支持CSS能力的瀏覽器來提高他們的設計能力。

  現在在用的瀏覽器中,并不是所有的瀏覽器都有很好的CSS支持能力,使其能夠具有解釋用CSS布局的優秀圖形化站點的能力。幸運的是,對于大多數網站,只有很小比例的訪問者還在使用不能解釋CSS的老瀏覽器。

  值得注意的是,這些人并不會被排斥在外的。在90年代,瀏覽器檢驗腳本是一個很流行的方法,它告訴那些使用“錯誤”瀏覽器的使用者一個新的網址,那個網址告訴他們去升級瀏覽器,好重新連接到那個網站。

  現在,你可以以一種更好的辦法應付不被支持的瀏覽器。使用邏輯化、語義化的一個最大的好處就是它使文檔在沒有CSS時,仍然可以使用和訪問。表現(就是文檔看上去的樣子)在一個支持性好的瀏覽器中也將呈現的不一樣,但是它的內容將永遠不變,大多數情況,對于訪問網站的人來說,內容實際上比表現的方式更加重要。這就是為什么給那些支持性不好的瀏覽器發送一個沒有樣式的頁面,要比把他們排斥在外要好的原因。

  有好幾種方式去解決這個問題:一種最常見的方法是使用 @import來鏈接相應的的CSS文件。Netscape 4和老的瀏覽器不支持@import所以將不會導入CSS文件。還有許多方法來向瀏覽器隱藏CSS。大多數隱藏CSS的方法是利用了瀏覽器對CSS解釋時的漏洞。這意味著總會存在瀏覽器通過升級彌補漏洞的危險。所以越少的依賴CSS hacks(CSS漏洞)越好。

  很明顯的,你可以使用服務器端技術去做一個瀏覽器檢測,然后針對不同的瀏覽器,發送不同的CSS文件。如果你這么做了,你必須要確保檢測腳本是通用的,以避免因為瀏覽器的升級或者新的瀏覽器發布導致發送錯誤的CSS文件。

  用不同的方法應用CSS

  有以下幾種方法使一個HTML文檔中的元素應用CSS。

  外鏈式

  把所有的CSS規則都寫在一個或幾個單獨的文件中,這種做法有許多優點。HTML文檔會變得非常的小,CSS文件被存在瀏覽器的緩存中,僅僅需要下載一次即可,并且你只需要修改一個文件就可以改變整個網站的樣式。一個外鏈式的CSS文件,見如下:

  h1 { font-weight:bold; }

  注意:在外鏈的CSS中沒有<style>標簽。

  你可以使用 <link>標簽來把一個CSS鏈接到HTML文檔中:

  <link rel="stylesheet" type="text/css" href="styles.css" />

  或者在<style>中使用一個@import標簽 :

  <style type="text/css"> @import url("styles.css"); </style>直接引用

  通過使用style屬性,你可以直接的在HTML中應用CSS:

  <h1 style="font-weight:bold;">webjx.com</h1>

  這種情況,應盡量的避免,因為他把結構和表現混在一起了。

  內嵌式

  內嵌式CSS是寫在<style>標簽中,也是寫在文檔的<head>中:

  <style type="text/css"> h1 { font-weight:bold; } </style>

  這種情況也應該盡量避免,最好還是把HTML和CSS用單獨的文件存放。

  CSS的語法

  一條CSS的規則是由一個選擇器和一個或多個聲明組成。選擇器決定了CSS規則可作用于文檔中的哪個或哪些元素。一個屬性和一個值組成了一個聲明,聲明要用大括號({})括起來,并且每個聲明要用分號(;)結束。

  一個簡單的CSS規則如下:

  p { color:#0f0; font-weight:bold; }

  這個例子中, p就是選擇器,表示這條規則將作用于文檔中的所有被<p>包圍的內容。這個規則中,有兩條聲明,它們共同作用,使 <p>中的內容所有字體為綠色并且加粗。

  想了解更詳細的CSS規則,可以下載一個CSS使用手冊。

  多余的元素和類

  當我們剛開始學CSS時,很容犯一些錯誤:使用不必要的XHTML元素、多余的類和額外的 <div>。并不是說這些代碼是不規范的,而是它與一些原則(如結構與表現相分離,使用簡單的整潔的標記)相矛盾。

  下面是一個使用不必要XHTML元素的例子:

  <h3><em>Headline</em></h3>

  如果你想使標題行變成斜體,可以使用CSS來重新定義 <h3>元素:

  h3 { font-style:italic; }

  下面是一個使用多余的類的例子:

  <div id="main"> <div class="maincontent"> <p class="maincontenttext"> 網頁教學網CSS技術 </p> </div> </div>

  下面這么寫可能更好:

  <div id="main"> <div> <p> 網頁教學網CSS技術 </p> </div> </div>

  為了控制div#main中的元素,你可以在CSS代碼中使用相關的的選擇器,例如:

  div#main p { /* rules */ }

  多數情況下,CSS允許你把想要的樣式來定義XHTML,而不用增加額外的的標記。但是有的時候,增加一些額外的代碼也是必要的。

  CSS小竅門

  很明顯,一旦你去很認真的學習使用CSS,你一定會發現某些問題,這些問題可能是由誤解造成的,可能是由對規則的不了解或者瀏覽器的漏洞造成的。CSS Crib Sheet就是一個好建議的薈萃,有Dave Shea整理,下面還將有一些重要的而且是Dave沒有提及的小竅門。

先校驗:在調試的時候,先由校驗開始吧,HTML和CSS都要進行校驗。許多問題都是由不規范代碼引起的。

先在最先進的瀏覽器中調試,然后才輪到其他的瀏覽器: 如果你剛開始就用對CSS支持不好的瀏覽器調試,那么你所編的CSS將會逐漸適應這種錯誤的處理。當你繼續在更先進的瀏覽器中測試,一些你所不希望的內容就會出現了。最好還是首先在一個有很好標準兼容性的瀏覽器中運行,然后再把代碼拿到老一點的瀏覽器中去測試。

理解CSS的盒模型:為了獲得一個元素的實際的寬度和高度,你需要用padding和border來增加它的 width或者height。在Internet Explorer 5.*/Win中, padding和border是被包括在已知的width和height。

假設你有如下的CSS代碼:

div.box { width:300px; padding:20px; border:10px solid; }
所以這個div的總寬度是360px.

10px + 20px + 300px + 20px + 10px = 360px
在Internet Explorer 5.*/Win中,實際上總寬度為300px, 內容的寬度為240px.

300px - 10px - 20px - 20px - 10px = 240px
為了繞過這個問題, 你同樣可以使用CSS hack來給不同的瀏覽器提供不同的值,或者你盡量避免在同一個元素中同時定義width 和 padding或者width和border。

為非零的數值加上單位:CSS要求一些屬性值(如width、 height、font-size)必須要有單位。當屬性值為0時是可以例外的。在那種情況下,沒有單位也是必須的,因為0就是0,什么單位也都無所謂了。

理解漂浮物:盡管漂浮物這個概念很難理解,但是它很重要,因為CSS中會頻繁的使用它來布局。

“LoVe/HAte?” 按照如下順序為鏈接定義偽類:Link, Visited, Hover, Active.

“TRouBLed?”當使用簡寫來定義margin、padding和border時, 他們的順序是從上開始的順時針方向: 上、右、下、左。

以其功能給CLASS和ID命名,而不是它的表現: 如果你有一個CLASS名為.smallblue, 過后你決定用它來定位文本,使其為大號、紅色,那么CLASS的名字就會被弄混淆的。最好能用名字來描述功能和結構,如.copyright和.im portant。

CSS是個敏感的東西:當HTML屬性中的 class和id與CSS一起使用時,那可就要小心了。

檢查你的ID:文檔中一個元素只能使用一個id,且id必須唯一,而class可以被多個元素所共享。

使用合法的字符為class和 id命名: Class和id的名字只能由數字、字母和連字符組成,數字和連字符是不可以開頭的。

正確的注釋:CSS的注釋是以/*開頭,以*/結尾的:

/* This is a comment */
  CSS布局

  有很多例子和階梯教程指導您如何使用CSS布局。建議您從簡單的例子開始,學習它的原理,然后再去學習復雜的布局。
古怪猴子押分技巧 时时票-线路检测中心 黑龙江时时综合走势 天津11选5开奖号 大地彩票app版 十二生肖走势图分析 苹果如何下载球探 助赢山东十一选五计划 新时时和老时时的区别 疾风时时彩计划是多少 pk10做号软件 每日篮球预测分析 广东时时时间表