DIV CSS 佈局教程網

DIV+CSS的書寫格式

好的CSS代碼和DIV代碼的書寫格式有助於順利快速的開發項目，同時也會形成較好的習慣，同時日後維護也方便。

問題：不工整div和css代碼會不會不符合W3C標准
答案：不會造成不符合W3C標准。因為代碼的工整與否是展示的代碼排列方式，與兼容和W3C標准無關。

問題2：為什麼有些html網頁和css文件的代碼都是緊挨著的如<div>與<div>或css中CSS樣式選擇器也是沒有空格。
答：這是因為有些網頁開發者為了避免新手抄寫他的代碼，待網頁發布上傳前將復制一份或直接將CSS代碼和html標簽間的空格清除，所以我們查看網頁源代碼時候代碼都是一起而且感覺混亂的。解決辦法是用Microsoft Visual Studio中工具整理排列代碼或使用DW4代碼格式化工具即可實現整理代碼即可排列整齊有序。

接下來我們分別來解釋與介紹DIV CSS代碼書寫格式及對應CSS范例教程

1、DIV書寫格式
Div書寫在html文件裡，排列有序縮進有序將給開發和日後維護帶來幫助。典型縮進范例：

<div id="main"> 
    <div id="header">頭部內容</div> 
    <div id="center"> 
        <div class="cent_left">中部居左內容</div> 
        <div class="cent_right">中部居右內容</div> 
    </div> 
    <div id="footer">底部版權內容</div> 
</div> 

注意以上代碼縮進-父級與子級有相對縮進。一般縮進4個空格字符半角英文位置。

2、CSS書寫格式
好的CSS書寫格式能給你帶來維護和制作上方便。可以分析CSS 命名的選擇器之間個關系。

#main{... ...}
#main #header{... ...}
#main #centen{... ...}
#main #footer{... ...}
#centen .cent_left{... ...}
#centen .cent_right{... ...}

以上花括號內值省略這裡不講。這裡主要是CSS 派生關系，不同區域DIV塊以空一行隔開。
 

CSS 格式還有

#main{
... ...
}
#main #header{
... ...
}
#main #centen{
... ...
}
#main #footer{
... ...
}
#centen .cent_left{
... ...
}
#centen .cent_right{
... ...
}

一般不推薦CSS的花括號分別占一行方式排列CSS 選擇器。同時這樣會大大增加占用CSS文件內行數，維護也不好辨認。

以上介紹了DIV+CSS的常見排列代碼書寫格式。當然如果你有好的排列方式或自己習慣排列方式你也可以使用，這裡講解DIV CSS書寫格式主要讓大家規范下CSS和DIV代碼格式。