基礎網頁設計(3)-CSS版面編輯

延續基礎網頁設計(2)-CSS篇之一後，接下來要瞭解的是CSS版面編輯-排版的部分。

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

CSS版面編輯

隨著CSS的發展，有CSS2、CSS3等等。而現在的瀏覽器，大多數都能夠回應CSS2、3的編寫內容。

雖然CSS3是後發展的，大多改善CSS2的缺點。但是，在CSS2與CSS3之間，仍然有一些不一樣的地方，有的情況CSS2反而能夠更加快速的達到想要的效果。大部分的狀況，還是端看個人喜好與習慣了。

認識CSS單位

px: 為目前最常見的使用單位方式，因為最簡單直接，代表佔據螢幕幾個像素。

em: 根據繼承下來的大小，以倍數的方式計算。如父層為16px時，2em就等於32px

%: 根據父層最大空間作為100%計算。如該父層區塊空間為400px時，50%為200px

版面編排

因為html為由上到下的編排方式，造成我們每個區塊都是並列向下的，但很多時候我們想要以水平的方式排列區塊。這時就需要用到排版的語法了。在這裡介紹CSS2較常用的float與CSS3使用的flexbox。

Float

float: left/right/none

內容相對較簡單，經由float可以顧名思義的浮動此區塊，當選擇浮動向左排列時，會使該區塊以不換行的方式水平靠左排列。而none為預設不浮動。

(未寫入CSS，可以看到向下並列的ABC)

(寫入CSS後，很明顯因為浮動而可以水平排列，但也因為沒有宣告li的寬度、間距等等造成重疊)

另外，如果想要A物件在水平靠左，B物件水平靠右，只需要讓A向左浮動排列而B向右浮動排列即可。

值得注意的是，h1,h2,h3,h4,h5,h6,span,img會被默認為文字元素，而float只會改變區塊元素的型態。因此，如果想要水平排列文字元素的話，需要加入display:block;將文字元素轉換為區塊元素。

Flexbox

為CSS3的新版排版方式，將display屬性設置為flex或inline-flex，就能將該元素變成一個伸縮容器，在此元素內的所有物件都會受其影響。而flex則表示內容元素強制換行-向下並列；inline-flex則表示內容元素不換行並列。

也就是說，如果想要許多圖片以水平方式排列，就要在他們的父層將屬性改為display: inline-flex;就會達到想要的效果。

而較常用的細項屬性:

• display: flex/inline-flex (內容元素的排列方式)
• flex-direction: row/column/row-reverse/column-reverse (內容元素的排列順序方向)
• justify-content: flex-start/flex-end/center/space-between/space-around (水平對齊的對齊方式 : 靠左對齊/靠右對齊/置中/左右對齊/平均分配欄寬對齊)
• align-items: flex-start/flex-end/center/stretch/baseline (垂直對齊的對齊方式 : 靠上對齊/靠下對齊/垂直置中對齊/全部拉滿最大高度/以baseline對齊)

更多詳細的內容可以參考 : https://www.oxxostudio.tw/articles/201501/css-flexbox.html

區塊美化

如div、ul、li、等等容器都屬於區塊元素，以下可選擇性將區塊美化:

back-ground-color:可填入文字顏色(red,blue…)也可以填入HEX代碼

**HEX代碼**

HEX為十六進位制，不同於我們日常使用的十進位制。顏色可以分成RGB三原色，並且以每個原色區分256色。

而十六進位的表示法則為0.1.2.3.4.5.6.7.8.9.10.A.B.C.D.E.F，因此256色則被表示為00到FF，這也就是為什麼HEX表示法都會是6個數字所組成(RRGGBB)了。

在選色的過程中，時常會有想要細微調整色調或者知道該色但不知道如何表示，在此可以載入一個外掛，方法也很簡單:Ctrl + Shift + P 打開setting後，輸入install按Enter，輸入套件名稱”Colorpicker”並按Enter就可以了。

隨後可以從工具列的工具(Tools)中找到，使用時只要在”back-ground-color :”後按下colorpicker，選擇想要的顏色後按下OK，就會自動轉換並輸入相對應的HEX代碼了。

weight : 30px; (寬度)

文字美化

• font-family: Arial; (改變字型)
• color: red; (改變文字顏色) //請注意color是改變文字顏色不是背景顏色!//
• font-size: 16px; (改變字體大小)
• line-height: 1.6; (改變行高，如果將該區塊的行高與區塊高度設置相同，則能夠藉此達到文字垂直置中的效果–height: 30px; line-height: 30px;)
• text-align: center; (能夠使文字水平置中)

細微調整

• margin-left: 1px; (單獨向外推開左邊1px)
• margin-right: 1px; (單獨向外推開右邊1px)
• margin-bottom: 1px; (單獨向外推開下方1px)
• margin-top: 1px; (單獨向外推開上方1px)
• padding-left: 1px; (單獨向內推開左邊1px)
• padding-right: 1px; (單獨向內推開右邊1px)
• padding-bottom: 1px; (單獨向外推開下方1px)
• padding-top: 1px; (單獨向外推開上方1px)
• cursor: pointer; (如果區塊不是a連結，可以使用pointer能夠使該區塊滑鼠一過去時變為手型)
• box-sizing:border-box (當區塊因為border、padding、margin等原因超出原本父層區塊的大小時，可以使用以解決子元素超出父元素的狀況)

排版與撰寫技巧

HTML以大包小

在設計wireframe並編寫html的時候，切版以大為原則，如果能夠用方塊容器裝起來的就裝起來，剩下再切細。順序應該是div>ul>li等等。以便增加在後續CSS要統一改變的速度與便利性。

CSS由大而小

在寫選擇器的時候，最好先把所有的標籤都先寫出來。但是需要善用Class選擇器、ID選擇器以及標籤選擇器。

順序最好是由大而小，先把所有的大標籤div,h1,h2,ul,li,p等按照順序以div{}等等的方式列出來。

隨後再加入class選擇器，.example{}。

接著再加入class選擇器的後代選擇器，如.example h1{} 、.example p{}等等逐一寫出來。

等到所有標籤都編寫完之後，再開始加入CSS的排版語法，同樣也是由上而下，因為要遵守繼承與取代的概念。下面寫的內容會覆蓋掉父層所繼承下來的內容，

善用註解

在編寫的過程中，如果版面非常長，那麼要寫的coding內容也會非常混亂。這時候，可以多多使用註解(不管在html還是CSS甚至之後的JS都可以按住Ctrl不放+)，隨後在裡面多寫一些說明，讓自己在讀的時候更快速知道code的相對位置或者它的功能。

如圖所示，根據class的命名，讓我在編寫的過程中知道，註解線是header、主視覺、選單的底部，在找CSS code的時間上也較為迅速。

好了，以上為CSS簡略的編排介紹。希望對大家有幫助!有疑問也可以在下面留言喔!!

後記

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