身為一個前端工程師，除了HTML以外，還要知道如何透過CSS讓內容變得更佳優美。
CSS是什麼? 身為前端工程師一定要知道的網頁開發基礎
身為前端工程師，你一定要知道的三大語言分別為HTML、CSS、Javascript。 前面幾篇我們已經提過HTML如何應用於網頁開發，今天我們就要帶大家進入CSS的世界。
CSS是什麼?
CSS為Cascading Style Sheets的縮寫，中文為階層式樣式表。
CSS主要目的是用來美化我們的HTML。如果大家前面幾篇有跟著動手實作的話應該會發現， 雖然透過HTML建立了一個網站，但是只有一些簡單的標題樣式根本就吸引不了人。 此時，就需要CSS來提升我們網站的美感。
CSS怎麼寫?
首先，我們先簡單看一個範例。
可以發現我們透過以下的CSS語法，將<h1>標題變成背景為黑色且字體為白色。
h1 {
color: white;
background: black;
}
<h1>在HTML稱作標籤，但在CSS稱作選擇器(Selector)。color及background分別為更換字體顏色及背景顏色，在CSS稱為屬性(Property)。white及black為我們定義的顏色，在CSS稱為設定值(Value)。- 賦予每個Proterty值時，要用
;做結尾，以表示樣式設定完畢。
範例是將<h1>裡面的內容做顏色的更換，今天若想變更其它標籤的CSS，只需要將<h1>更換為其它標籤即可。
由於上述CSS是根據標籤來做網站的美化，因此又稱作標籤選擇器。除了標籤選擇器之外，我們還可以用其它方法來套用CSS，這個後續我們會再介紹。
CSS裡面的Property是根據HTML的標籤有沒有支援，如果今天這個標籤沒有支援此Property，就不會呈現你想要的樣式。之後我們也會教大家如何知道我的標籤有沒有支援此Property。
如何在網頁內加入CSS?
剛剛我們寫好了一隻CSS，主要是針對<h1>的顏色更換。那麼要怎麼樣讓網站知道這個CSS的存在呢?以下教大家三個方法：
方法一：透過style
我們可以透過<style>的標籤將CSS的內容寫在裡面，最後將整個<style>放在<head>或<body>裡面。
此方法常用於只有一個HTML檔案時，可以直接將CSS寫在一起，又稱作Internal CSS。
<style>
h1 {
color: white;
background: black;
}
</style>
以下為將<style>放到<head>：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: white;
background: black;
}
</style>
</head>
<body>
<h1>這是我的第一個CSS</h1>
</body>
</html>
若要將
<style>放到<body>內，要注意你要變更樣式的標籤是否在<style>之後，否則會沒有樣式的效果。
方法二：透過link讀取外部檔案
假設今天我們的網站根據不同情況，想要呈現不同的樣式，我們就可以建立多個CSS樣式並根據情況選擇要讀取哪一個CSS檔案。 此方法又稱為External CSS。
首先我們在Day3 建立的project資料夾下，將CSS寫在一個名為style.css的檔案。
接著，透過<link>將該檔案引入HTML內。
由於style.css與index.html都是在同一層目錄，所以可以直接在href打上CSS檔名。
<link rel="stylesheet" href="style.css">
以下為將<link>放到<head>：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>這是我的第一個CSS</h1>
</body>
</html>
方法三：透過標籤內的style屬性
今天我們也可以直接透過標籤內的style屬性，來呈現想要的樣式。 由於是直接寫在標籤內，故又稱為Inline CSS。
<h1 style="color:white;background:black;">這是我的第一個CSS</h1>
總結
今天簡單的帶大家認識CSS是什麼以及如何使用，大家可以先將上述方法實際練習一下。 先對CSS有個初步的認識，之後我們會再針對CSS做更深入的介紹。