部落格經營｜基礎網頁設計(2)-CSS篇之一

導讀：這篇文章聚焦於「CSS 自學筆記」，幫你快速掌握重點。

繼上一篇介紹完HTML的架構，這篇要介紹CSS的概念喔! 如果有還沒看過上一篇的可以回去看喔!

(Cascading style sheet , CSS)，簡單來說是負責視覺性的編輯，也是設計風格發散的開始。根據顏色、排版、字型大小等等的方式來呈現視覺上的差異。

其中，編寫網頁的順序必須先寫html再編寫CSS。舉例來說，html就像蓋房子的鋼筋，先打好網頁的架構以及主要內容，需要視覺傳遞的文字、圖片等資訊。隨後，加上CSS就像在鋼筋中間填滿水泥、貼上磁磚，讓這些架構更加豐富，也更能夠讓訪客了解這間房子的樣貌。

套用CSS的方式有3種，分別為:

通常會寫好主要風格樣式後存放在一個style.css檔，隨後每個分頁都能導入這個CSS以達到大部分相同風格的效果。隨後再使用嵌入套用的方式進行該分頁的微調。

因為原先的html有預設一些樣式，例如ul會默認有圓形符號，h1、h2等會有固定行高等等。因此藉由normalize.css的導入可以排除這些預設的問題。建議在之後的每支程式都先導入，會減少很多麻煩。

選擇器(selector)

主要在使用CSS的時候，必須告訴電腦要改變style的部分在哪裡，可以根據屬性、名字等等（完整說明請見 MDN CSS 選擇器）。主要選擇器類型如下:

html內的標籤即為相對應屬性，在CSS檔案中宣告要改變樣式的屬性。

在html裡面，當有很多相同標籤出現，但只想要改變特定的時候，可以給予標籤class命名，並在CSS檔案中以"."+class名稱宣告要改變樣式的部分。

與class選擇器相同，可以給予標籤ID命名，值得注意的是，同一個標籤可以命名多個class而ID就只能有一個，隨後在CSS檔案中以"#"+名稱宣告要改變樣式的部分。

(選取了class_selector的div內容文字顏色改為紅色，因此ID_selector沒有被更動；而ID選擇器則選到ID_selector的div內容文字大小改為32px)

當想改變特定部分時，除了能使用class,ID選擇器以外，也能透過巢狀結構的特性，利用父層子層的關係來找到特定區域。

若以A標籤夾住B標籤，則A為父層，B為子層。相當於A裡面的B。通常CSS的特性會有繼承的效果。也就是說，透過改變父層的樣式，子層的狀態也會跟著改變。

此外，因為電腦閱讀方式是從上到下，在CSS檔案中若同樣設定A標籤的內容，則較下方提到的改變會取代掉先前的更動。

切記能夠盡量減少後代選擇的層數，在例子中，雖然能夠以div ul li #first的方式選到"a"。

但事實上，使用#first的方式就可以直接達到同樣效果。然而後者的電腦運算方式會快得多。若在SEO或優化網頁的過程中，這部分是主要影響速度的一部份。

在網頁排版的時候，事實上是被裁切成許多不同的塊狀（盒狀 / Box Model）。試著把html寫好的內容想像成一個個盒子。把巢狀結構想像成俄羅斯娃娃一樣，大的盒子裡面可以裝許多小盒子。

但是在排版的時候，如果想要改變盒子的大小，以及彼此之間的間距應該怎麼辦呢?

在排版過程中，大多使用的是box model ，透過宣告盒子間的間距、盒子高度跟寬度等等來達到想要的效果。

padding : 下圖中黑線以內，綠色區域就是padding的區域，透過改變padding可以把這個區塊中的物件向中心推擠。(若物件靠左則會右推，靠上則往下)。

margin : 下圖中黑線以外，紅色區域為margin，透過改變margin來將物件遠離此區塊。(物件在左則會向左推開)。