css樣式表和網站重構.ppt

1、網站重構和CSS編程進階,鳳凰網技術中心 應用管理部,一、網站重構,Web標準的定義 為什么要使用Web標準 結構、表現和行為,Web標準的定義,Web標準就是結構化的語言(XHTML和XML),解釋性語言(CSS)，對象模型(DOM)和腳本語言(ECMAScript)。更形象的理解就是結構，表現和行為相分離。,為什么要使用Web標準,易于協同開發(fā)和維護 代碼量減少，降低了帶寬成本 提高網站易用性和用戶體驗 與未來瀏覽器和手持設備兼容 搜索引擎優(yōu)化(SEO),結構、表現和行為,二、CSS基礎,糟糕的代碼和優(yōu)秀的代碼 什么時候使用ID，什么時候使用Class 錯誤的命名和正確的命名 塊級標簽和內

2、聯標簽 瀏覽器模式和文檔類型聲明 CSS定義的優(yōu)先級順序和繼承關系,糟糕的代碼和優(yōu)秀的代碼*,糟糕的代碼：沒有意義的標簽，結構和表現部分混雜在一起，不可讀。 優(yōu)秀的代碼：具有語義，結構和表現相分離，可讀，優(yōu)雅。,ID和Class*,ID：用于標識頁面唯一的區(qū)塊，比如說導航條，正文，版權。 Class：用于可以重用的區(qū)塊或者定義。 注意：不要濫用ID和Class。,錯誤的命名和正確的命名,塊級標簽和內聯標簽,塊級標簽需要折行，display默認屬性為block，典型如div，h1，ul等；可以設置寬，高； 內聯標簽不會折行，display默認屬性為inline，典型如span，a，strong等

3、；不能設置寬高，但是可以設置行高。,瀏覽器模式和文檔類型聲明,兩種瀏覽器模式一種是標準模式（standard mode），另一種是怪異模式（quirks mode）； 標準性文檔聲明有很多種，一般推薦使用過渡型（transitional）標準。 ,CSS優(yōu)先級循序和繼承關系,優(yōu)先級： p div p ment #comment div#content #container #content style=” 繼承關系：子定義會繼承父定義，但會覆蓋父定義的內容。,三、CSS中的布局,CSS中的盒模型 IE和FF的盒模型解析差異 三種定位機制：普通流、絕對定位和浮動,CSS中的盒模型*,IE和FF的

4、盒模型解析差異*,IE5.x和怪異模式下的IE6.0與FF的差異 #myBox width:300px; height:200px; padding:10px; border: 10px solid blue; background-color: red; ,IE和FF的盒模型解析差異*,IE5.x和怪異模式下的IE6.0與FF的差異,IE和FF的盒模型解析差異,IE5.x和怪異模式下的IE6.0與FF的差異 結論：FF區(qū)塊實際寬度不是內容的定義寬度(width)，而是內容，填充和邊框的寬度總和；IE5.x和怪異模式下的IE6.0實際寬度就是內容部分定義的寬度。 解決方案：使用統(tǒng)一的標準文檔聲

5、明，不要給區(qū)塊添加具有指定寬度的填充，而是嘗試將填充或空白邊添加到父標簽或子標簽。,IE和FF的盒模型解析差異*,IE6.0和7.0與FF標準模式解析差異,IE和FF的盒模型解析差異*,IE6.0和7.0與FF標準模式解析差異,IE和FF的盒模型解析差異,IE6.0和7.0與FF標準模式解析差異 結論：當父和子標簽垂直疊加時，IE在垂直方向上不會做padding和margin疊加，而FF會；而當父標簽padding為0時，FF會把子標簽的margin疊加到父標簽上面，子標簽和父標簽之間不在有間距。 解決方案：使用統(tǒng)一的標準文檔聲明，不要在父、子標簽重復定義padding和margin屬性。,普

6、通流、絕對定位、和浮動,普通流 默認的定位。各標簽在頁面上的位置是由標簽在html代碼中的位置和自身的屬性（塊級標簽或者內聯標簽）決定的。,普通流、絕對定位、和浮動,相對定位和絕對定位,普通流、絕對定位、和浮動,相對定位和絕對定位,普通流、絕對定位、和浮動,相對定位和絕對定位 特點： 相對定位無論是否移動，元素仍然占據原來的空間； 絕對定位不占據空間，絕對定位的標簽位置相對于最近已定位的父標簽，如果不存在，則相對于body； IE中如果相對于右(right)和底部(bottom)設置絕對定位，需要確定相對定位的框設置了尺寸。,普通流、絕對定位、和浮動*,浮動,普通流、絕對定位、和浮動*,浮動,

7、普通流、絕對定位、和浮動*,浮動,普通流、絕對定位、和浮動,浮動 特點： 當元素浮動時，它將不再處于文檔流中，相當于浮在文檔之上，不占據空間，但是會縮短行框。-正文的圖文混排 塊級元素float以后就沒有默認的100%寬度。-非常漂亮的純CSS陰影效果 因為浮動元素脫離了文檔流，所以包含圖片和文本的div不占據空間，所以要在這個div的某個地方清除浮動*。,四、實踐,超鏈接樣式 分頁 圓角框 導航條 滑動門技術 圖像陰影和圖像映射 表格和表單 圖文混排,超鏈接樣式*,背景圖結合填充 設置為塊級標簽獲得寬高屬性 用文本縮進隱藏文字鏈接 鏈接偽類實現背景替換,分頁樣式*,D分頁樣式,圓角框,簡單的

8、圓角框,圓角框*,高度自適應的圓角框,圓角框,高度和寬度都自適應的圓角框,導航條,垂直導航條 Autos Finance Games GeoCities Groups ,導航條*,水平導航條 生活休閑 文化視線 心理測試 家居家飾 飲食男女 科技數碼 視頻大賞 寫真美圖 ,導航條,導航條變體,滑動門技術*,圖像陰影和圖像映射*,最簡單的圖像陰影 原理：將一個大的陰影圖像作為一個容器div的背景，然后用負值的空白邊(margin)偏移圖像，從而顯示出陰影。,圖像陰影和圖像映射*,照片相框效果的圖像陰影 原理：給圖像加上邊框(border)和填充(padding)。,圖像陰影和圖像映射*,純CSS

9、的圖像陰影 原理：分別給容器div，img，a設置邊框，然后設置相對定位，向上和向左各便宜一個像素。通過同一個邊框顏色的漸變形成陰影。,圖像陰影和圖像映射*,CSS的圖像映射 原理：將包含圖像的容器div相對定位，然后設置a為塊級標簽，并將其絕對定位，設置其定位的偏移量(例如top和left)到要包含熱點位置的圖像上。為了修正IE和Opera瀏覽器，設置背景顏色并把a標簽的透明度設置為1。,圖像陰影和圖像映射*,有提示的CSS的圖像映射() 原理：在a中增加兩個span，一個顯示黑邊框，一個顯示白邊框加上a的黃色邊框。當鼠標滑過(hover)a時顯示a的內容。 ,表格和表單*,數據表格 表格的

10、作用就是用來展現二維數據的。,表格和表單,數據表格 caption thead,tbody,tfoot th,表格和表單*,表單 和表格table類似，一個展現二維數據，一個是收集二維的數據(鍵值對)，推薦使用table來組織表單。當然其他標簽也可以，比如p和label的組合。,圖文混排*,浮動的圖文混排 優(yōu)點：簡單，方便。 缺點：需要清除浮動。,圖文混排*,絕對定位的圖文混排 優(yōu)點：定位準確，重用性高。 缺點：復雜，容易跟不上需求變化。,實踐總結,區(qū)塊之間應該獨立* 準確的使用ID和Class 使用div和span要賦給有意義的名稱 不要過度使用沒有語義的div和span* 先編寫html代碼，然后才是CSS,五、編程規(guī)范*,CSS命名規(guī)范 Basic.css解析,六、瀏覽器BUG和CSS調試,常見的瀏覽器bug CSS調試技巧,