前幾天已經大致上了解HTML的架構與寫法，今天終於要開始將網頁套上華麗衣裝，不再是黑白純文字的世界了。套上CSS的樣式後，網頁就會變得更加華麗！
一樣開啟VS Code(Visual Studio Code)，之後在左側就可以點2下建立新檔案，或按滑鼠右鍵建立新檔案，副檔名記得打上CSS。建議檔名取名為style.css，並放在網頁資料夾裡面叫style的資料夾。
CSS的語法包含了改變HTML樣式的語法，通常在HTML中要套上樣式，要讓HTML讀取CSS檔。將以下語法放在<head>...</head>之間。
<link href="styles/style.css" rel="stylesheet" type="text/css">
這段語法的目的是在載入CSS檔案，href=" "雙引號間放置CSS的檔案；rel="stylesheet"在說這檔案是樣式表單；type="text/css"是宣告此檔案為CSS語法檔，可以省略。
打開CSS可以輸入CSS的語法，CSS的基本語法結構大致上如下所示：
.container{
color: rgba(255, 255, 255, 0.8); /*字型顏色*/
background-color: #000000; /*背景顏色*/
font-size:16px; /*字體大小*/
border: 1px solid red; /*1px的紅色實線外框*/
}
.container是前一天在文章中提到的部分，指定在HTML中名稱為container的class；{}中間就是指定這個class要進行什麼變化，color、background-color、font-size就是在container中要改變的元素(element)；冒號後面就是元素要改變的樣式(style)。
翻譯成比較「專業」的說法，.container是選擇器，指定HTML中的名叫container的class；color是屬性、「 : 」後面是屬性值。
另外，也可以同時抓取多個class：
.container, .text1 {
color: grey;
}
不同元素中間用逗號隔開，可以一口氣將多個元素設定一樣的樣式。前述案例就會讓.container和.text1的class文字都以灰色呈現。除了顏色，一些動畫、變形、位移也都是CSS可以做到的部分，會在後續陸續說明。
在前幾天有提到，CSS最簡單調整圖片大小的方法，就是在圖片外面加上一個框框(div)，讓圖片的長度、寬度不會超過那個框框。首先可以在HTML的部份，創造一個框框，然後把圖片放在裡面：
<div class="pic"> <!--給框框這個class一個名字pic-->
<img src="https://i.imgur.com/Esgmzhg.jpg" alt=""/>
</div>
<div class="pic"><!--這個框框也叫pic，取一樣的也沒關係-->
<img src="https://i.imgur.com/dcko38l.jpg" alt=""/>
</div>
接著再加上CSS的語法，首先是設定整個網頁主體的外觀：
html, body { /*網頁裡面的主體*/
background-color: rgba(50,100,100,0.4); /*背景顏色*/
display: flex; /*網頁內物件定義為彈性*/
justify-content: center; /*網頁內物件水平置中*/
align-items: center; /*網頁內物件垂直置中*/
flex-wrap: wrap; /*網頁內物件排列自動換行*/
}
接著針對名字叫做「pic」框框（div），進行外觀樣式的套用，並設定寬高，圖片會在框框內等比例進行縮放不變形：
.pic { /*指定所有叫做pic的物件*/
border: 2px solid red; /*加上紅色框框看清楚pic的範圍*/
width: 600px; /*框框寬度*/
height: 300px; /*框框高度*/
display: flex; /*框框內的物件為彈性物件*/
justify-content: center; /*框框內的物件水平置中*/
align-items: center; /*框框內的物件垂直至中*/
}
接著就指定框框內的圖片，最大的寬度就是原始圖片的寬，高度也是如此設定，就算圖片遠小於框框也不會變形。
.pic img { /*指定框框內的圖片*/
max-width: 100%; /*最大寬度就是圖片的原始寬度*/
max-height: 100%; /*最大高度就是圖片的原始高度*/
}
這邊已經將所有的CSS語法加上說明註解，就算一時無法理解也沒有關係，後續會陸陸續續地針對裡面的內容再做說明，這個案例可以當作是預習即可。
該案例可以參考以下連結：https://codepen.io/hamagawa76/pen/XWqpwQO
是不是很簡單！今天的範例已經有出現display: flex;，明天會再詳細說明，並說明CSS Flexbox的部分了，我們明天見囉！
iThome鐵人賽
看影片追技術