DIV CSS網頁布局的基礎知識整理
2024-07-11 08:24:53
供稿：網友
Vevb.com的CSS教程欄目中匯集了大量的CSS知識，這些知識已經非常全面了，但很多CSSer新手初來本站，依然云里霧里，現整理一些DIVCSS網頁布局常用的一些基礎知識，供大家學習，歡迎補充及提一些建議。
CSS命名規范
一．文件命名規范
全局樣式：global.css；
框架布局：layout.css；
字體樣式：font.css；
鏈接樣式：link.css；
打印樣式：print.css；
二．常用類/ID命名規范
頁 眉：header
內 容：content
容 器：container
頁 腳：footer
版 權：copyright
導 航：menu
主導航：mainMenu
子導航：subMenu
標 志：logo
標 語：banner
標 題：title
側邊欄：sidebar
圖 標：Icon
注 釋：note
搜 索：search
按 鈕：btn
登 錄：login
鏈 接：link
信息框：manage
……
常用類的命名應盡量以常見英文單詞為準，做到通俗易懂，并在適當的地方加以注釋。對于二級類/ID命名，則采用組合書寫的模式，后一個單詞的首字母應大寫：諸如“搜索框”則應命名為“searchInput”、“搜索圖標”命名這“searchIcon”、“搜索按鈕”命名為“searchBtn
CSS書寫規范及方法
一.常規書寫規范及方法
1.選擇DOCTYPE：
XHTML1.0提供了三種DTD聲明可供選擇：
過渡的(Transitional):要求非常寬松的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下：
<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>。完整代碼如下：
<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下：
<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Frameset//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想情況當然是嚴格的DTD，但對于我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML1.0Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C的代碼校驗。
2.指定語言及字符集：
為文檔指定語言：
<htmlxmlns=”http://www.w3.org/1999/xhtml”lang=”en”>
為了被瀏覽器正確解釋和通過W3C代碼校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言；如：
常用的語言定義：
<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/>
