基礎網頁設計(2)-CSS篇之一

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

如果你第一次看到我的文章，歡迎訂閱我的免費電子報，會陸續更新生醫技術介紹、跨領域人才的專訪以及生理訊號相關技術培養，讓你了解生醫以及學習成為跨領域專家。

認識CSS

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

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

套用CSS

為了要讓網頁看起來更加豐富，必須了解如何在html上面加上CSS的code，套用CSS的方式有3種，分別為:

• 外部連接
• 未行內套用
• 行內套用
• 嵌入套用

⾏內套⽤ (inline css) 在 HTML 標籤直接宣告樣式

嵌入套⽤ (embedded css) 嵌入於 HTML ⽂件的標籤內

外部連接 (External Link css) 外部 CSS 檔案(附檔名 .css）

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

Normalize.css

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

開源Normalize.css文檔

選擇器(selector)

主要在使用CSS的時候，必須告訴電腦要改變style的部分在哪裡，可以根據屬性、名字等等。因此可分為主要幾種:

屬性選擇器

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

Class選擇器

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

ID選擇器

與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標籤的內容，則較下方提到的改變會取代掉先前的更動。

(可以看到透過class為wrapper的選擇器後改變以下全部的字體大小為32px，而因為取代的關係，ul下面的所有li都繼承了.wrapper ul 的最後一個設定，將文字顏色改為藍色)

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

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

Box Model

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

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

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

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

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

• 寫法1 : padding/margin :  5px;
  上下左右都推開5px
• 寫法2 : padding/margin :  5px 3px;
  上下推開5px；左右推開3px
• 寫法3 : padding/margin : 5px 3px 1px;
  上推開5px，左右推開3px，下推開1px
• 寫法4 : padding/margin : 5px 3px 1px 3px;
  上5px，右3px，下1px，左3px

 #使用padding/margin: 0 auto的方式可以將區塊置中

border : 事實上border同樣也會占版面。可以透過px solid/dot color來選擇邊框的粗細 實虛線以及顏色

另外，border也時常被用來除錯以及將區塊可視化。

Box sizing: border box

在排版的過程中，假如為了要將大盒子內的物件分開而使用了padding，這會造成整體的大小超出原本預期排版的間隔配置。這時候可以使用box sizing: border box的方式，可以解決超出版面、區塊的問題。

後記

如果你喜歡這樣解說的方式的話，幫我按讚拍手分享! 如果你覺得有疑問或者有錯誤的話，歡迎在下面留言告訴我 !