DIV+CSS 入門

標籤：bs   css   html   table   

 前一陣玩csdn的時候，在網頁上加上的qq和微博等，覺得很神奇。學完牛腩，也算開始了自己真正學習B/S之旅。

剛開始的時候，我不知道<div>是什麼 也不清楚CSS用來幹什麼的，敲完了回過頭來再看，好像明白了一些。BS正在進門中 ，寫的不對各位多多指正。

CSS

    整體來說css中包括各種各樣的樣式屬性，用於控制字型，顏色，對齊和邊距，這些只是網頁樣式

    的一些方面。css的樣式屬性分為兩大類。

    布局屬性：由影響網頁上元素位置的屬性（如邊距 填充 對其等等）組成 。

    格式化屬性，由影響網站中元素的視覺顯示的屬性（如字型類型，大小，顏色等）組成。

    CSS的層疊

css樣式單中的層疊表示樣式單規則應用與HTML文件項目的方式，即css樣式單中的樣式形成一個階層，更具體的樣式覆蓋通用樣式。樣式規則的優先順序有css更具這個階層決定，從而實現練級效果。也可以看成一種類似繼承的關係，子類繼承父類的特徵。基本樣式規則適用於整個樣式單，但可被更具體的樣式規則覆蓋。

我們用一個簡單的例子看一下。你能猜出下面文本的顏色嗎？

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div style="color:green">this text is green.<p style="color:blue"> this text is blue.</p><p> this text is stil green.</p></div></span>

結果是這樣的

                

在這個例子中，顏色green 通過樣式屬性color 應用於<div>標籤。因此<div>標籤本是綠色的。由於<p>標籤是<div>標籤的子標籤，因此綠色的文本樣式傳遞給<p>中的文本

。然而第一個<p>標籤覆蓋了color樣式，將它改為藍色。最後的結果是，第一段文本是藍色的，第二段文本為傳遞而來的綠色。

DIV+CSS

    如果有三個或者更多的網頁使用類似的格式和字型，我們可能想為它們建立一個樣式單，將樣式直接應用於網頁中的HTML。牛腩中用到的div+css很像我們曾經玩過的給小人穿衣服的遊戲。div 會給我們建造出基本的組件，而由css 決定每一個組件的樣式是什麼。div會告訴我們有帽子，有外套，有首飾，有鞋子。css 就是的各種款式 顏色的衣服和帽子。用比較專業的術語來說就是應用div+css 讓結構和表現分離。

             

css盒子模型

    一個網頁是被分解成若干區塊來控制頁面架構的。這些區塊都是為了放置 網也不通元素服務的。這就引入了”盒子模型“HTML中的每個元素被考慮為一個”盒子“，不管這個元素是段落，<div> 還是映像。盒子有一致的屬性。是盒子模型的圖解，描述了每個HTML區塊層級元素可能的邊框，填充和邊距，以及邊框 填充和邊距的應用方式。換句話說，所有元素的內容和邊框之間都有一些填充。

                     

Table與div+css的區別

    HTML中還有一類應用table，Table標籤就是表格，是用來顯示資料的，而不是用來布局網頁的，

雖然它有時候布局網頁很簡單，但是一個大型的網頁如果用表格嵌套的表格來布局的話，對於網

頁的顯示是極為不利的，因為，一個表格只有在其完全讀取完才會顯示出來，大型的表格要讀取

完需要時間，不利於使用者的閱讀，使用者對網頁的等待時間是很短的，你的網頁很慢很慢的顯示出

來的時候， 使用者通常會告訴你“別讓我等”。

          DIV+CSS布局最大的優點還在於，網頁布局的更改性，哪天你想要改變網頁布局的話，只需要更

     改你的CSS檔案即可，而沒有必要像以前那樣，重新編製一份大型的表格巢狀表格格的網頁布局，

     極大的方便了網頁的維護和最佳化工作。
     注意我們以上討論的是table布局。而不是否定table標籤的作用。

以上是對HTML內容的一些理解。BS剛剛起步。

DIV+CSS 入門