初識CSS以及區塊層級元素、行內元素

一、在CSS之前

在CSS之前，網頁製作的內容和格式是連在一起的。

其效果是

如果想要實現新聞內容的字型顏色不同於新聞類別，則修改相應的代碼即可。如果有許多的內容，並且要修改許多內容的樣式，則一條一條的修改顯然不是一個好的方法。這就需要CSS了。

二、什麼是CSS

階層式樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。是一種用來表現HTML或 XML 等檔案式樣的電腦語言。通過設立樣式表，可以統一地控制HTML中各標誌的顯示內容。使人更能有效地控制網頁外觀。

還是上面的例子，實現標題和內容的顏色不同

首先要添加引用“樣式”

在“CSS測試.CSS”中，編輯如下

最終效果如下

這樣，通過對不同的標籤做不同的設定，可以實現不同的效果，並且實現了標題和內容的分離。

三、區塊層級元素、行內元素

對上面的例子做如下改動：

實現的效果是

從上面的例子可以初步看出行內元素和區塊層級元素的區別了。

我們可以將表單自上而下分成一行行, 並在每行中按從左至右的順序排放元素。塊元素和行內元素的基本差異是塊元素一般都從新行開始。通俗的講就是區塊層級元素總是和其同級的兄弟塊在豎直方向進行排列，並左右撐滿；行內元素則與其同級的兄弟元素水平排列，呈現在一行裡面。

當然，上面說的前提是在沒有浮動的情況下，如果有浮動則又是另一番情況了。關於浮動將在後面做詳細的解釋

 

小弟初學CSS，上面純屬個人見解，如有不對的地方，還望各位大蝦指正。