前言
下面的三張圖片，各自代表不同的網頁視覺風格。但是，您知道嗎？它們是出自同一個網頁HTML檔案，只是搭配不同的CSS就能做出如此不同風格的網頁。
CSS到底是什麼呢？用居住的房屋來比喻，HTML就是梁柱、牆壁、門窗等結構，但是它只是個毛坯屋而已，並不適合居住。人們在要搬進去住之前，需要花一點時間為牆壁上色粉刷、進行隔間、燈光配置..等，讓屋子更舒適點。 這些改變顏色、形狀、視覺、修飾的功能就是提昇要提昇房子的美感和可住性。相同道理，在網頁的世界裡，CSS就是網站美感的裝潢，提昇網頁的可看性！
W3C組織於1996年制定了CSS的標準，為CSS1；後來於1998年公佈CSS2標準。到了2011年公佈CSS3標準，大幅支援動畫及立體效果，過去依靠圖片或Flash物件來呈現 動態按鈕文字..等，現在只要透過CSS3的功能就辦得到。
CSS的優點
1.讓網頁的內容與格式脫鉤
早期的網頁設計常採用一些特殊技巧來呈現外觀，雖然表顯很亮眼，但因為內容與格式的依賴性太高，導致一旦要更新文字或圖片內容，格式也必須隨之修改，其結果需耗費大量的時間和人力去維護網頁。
近年來的作法是撰寫HTML檔時，只使用與內容結構相關的HTML標籤。例如<p>、<h1>、<span>，與格式相關的標籤盡量不要用，如<font>、<small>、<big>等標籤。凡是涉及變更格式的工作，一律改由CSS來做。
網頁的內容與格式脫鉤，當我們要改變網站所有按鈕的大小和特效，或是更改主要文字內容的顏色，只要在CSS進行相關屬性的修改，就會所有的網頁全部一起改，方便有效率的管理及維護。
2.避免重複撰寫程式碼
如果不用CSS，而是個別在HTML標籤上設定屬性，如<h2 color=blue>，如果<h2>出現100次，那麼color=blue也會一併出現100次。如此寫出來的程式碼會變得肥腫，無形中增加網頁運作的時間。
若使用CSS來做，只需要在CSS檔案定義一次，之後的<h2>標籤就會自動呈現CSS設定的屬性。如此，既可減少設計師重複編碼，程式碼更精簡，網頁開啟的速度會更快。
CSS的語法
CSS的使用方法由選擇器(Selector)和宣告(Declaration)兩個部份所組成，而宣告又分為屬性(Property)和值(Value)，如下圖所示：
選擇器種類
選擇器是用來選擇這條規則要套用的對象，因對象不同，選擇器常被分為三類：
- 標籤選擇器(Tag Selector):HTML的元素作為選擇對象，所以他的名稱必定是某一個HTML的元素名稱。如：
<p>、<div>、<span>等等，不可以使用自訂的名稱。 - 類別選擇器(Class Selector):此種選擇器的格式為.xxx，而xxx為自訂的名稱。比如：.navbar、.col-md-6、.my-5等。使用類別選擇器，代表以xxx類別為套用對象。例如：
<p class="my-5">內容文字</p>，這樣寫法，則文字區塊的上面會空出2rem的邊界(margin)，同樣文字區塊的下方也會空出2rem的邊界。 - 識別碼選擇器(ID Selector):這種選擇器的格式為#xxx，其中xxx為自訂的名稱。如:#type1、#gifstyle等。使用id選擇器，代表以id＝xxx的元素為套用的對象。也就是，對於名稱為xxx的元素，套用此規則。
宣告
宣告(Declaration)是用來指定某個屬性(Property)的設定值(Value)，屬性和設定值之間使用冒號:，跟HTML使用等號是不同的。
規則合併
- 具有相同宣告的規則可以合併
由於h2、h3、h4都有相同的宣告，所以我們可以把它們合併為ㄧh2{color:blue;} h3{color:blue;} h4{color:blue;}h1,h2,h3{color:blue;} - 相同選擇器的規則可以合併
選擇器都是body，所以我們可以把不同的宣告合併為一body{color:brown;} body{text-align:center;} body{padding:2rem;}body{color:brown; text-align:center; padding:2 rem; }
使用CSS的注意事項
- 所有的宣告都必須包含再大括弧{ }之中。
- 每一種宣告最後都必須用分號;結束，包含最後一個宣告也是。
- 若要加上註解，必須用
/* 和 */圍住註解的文字。 - 若屬性值包含空格，必須用英文雙引號("")或英文('')單引號包圍起來。
例如body{color:brown; /*褐色字體*/ text-align:center; /*字體居中*/ padding:2 rem; /*邊界2rem*/ }
如何開始使用CSS?
編輯HTML文件，開始納入CSS樣式
當我們認識了CSS並且了解它的功能之後，我們該如何使用CSS來美化我們正在編寫的網頁呢？以下有四種方式：
- 使用
<style>標籤定義樣式 - 在標籤中使用style的屬性
- 將樣式表定義在CSS檔案，並以
<link>標籤連結該檔案 - 將樣式表定義在CSS檔案，並以＠import指令匯入該檔案
接下來分別說明這四種方式
1.使用<style>標籤定義樣式(內部樣式）
第一種方式是比較入門簡易的方法，或是只針對特殊頁面進行單獨的樣式設定。如果網頁頁數很多，可能用其他方式會比較適合。用法為在<head>與</heaad>的段落之中，使用<style>標籤來定義樣式表，在style之後要加上type=text/css， 意思就是告知瀏覽器，從這一行開始是定義CSS的樣式，直到</style>出現為止。
<!DOCTYPE html>
<html lang="en">
<head>
<style type=text/css>
h1 {
color: #fc5203;
font-size: 30px;
font-family: 標楷體;
}
body {
color: darkcyan;
font-size: 20px;
font-family: 微軟正黑體;
}
</style>
</head>
<body>
<h1>如果有來生 ◎三毛</h1>
如果有來生，要做一棵樹，<br>
站成永恆。沒有悲歡的姿勢，<br>
一半在塵土裡安詳，<br>
一半在風裡飛揚；<br>
一半灑落蔭涼，<br>
一半沐浴陽光。<br>
非常沉默，非常驕傲。<br>
從不依靠，從不尋找。<br>
<p></p>
如果有來生，要化成一陣風，<br>
一瞬間也能成為永恆。<br>
沒有善感的情懷，沒有多情的眼睛。<br>
一半在雨裡灑脫，<br>
一半在春光裡旅行；<br>
寂寞了，孤自去遠行，<br>
把淡淡的思念統帶走，<br>
從不思念，從不愛戀；<br>
..................
</body>
</html>
上面的原始碼在瀏覽器會輸出成如下所示：
2.在HTML標籤中使用style屬性(行內樣式)
第一種定義樣式的方法，影響的範圍是整個網頁。如果我們想要各別標籤進行CSS的調整，該如何做呢？這時，就可以直接在HTML標籤內使用style來定義樣式。
<p style="color:red;fontsize:20px;">文字內容在這裡</p>
這種方式的效力只有到</p>為止，下一個標籤則需另外再定義，容易看來雜亂，當宣告數量多時，避免使用這方法。
3.用link標籤連結到css檔(外部樣式)
我們進一步把CSS定義另外存成一個檔案，然後再以<link>標籤來讀取css檔案的內容。
css檔案寫法如下
h2{color:red;
font-size:20px;
font-family:微軟正黑;
text-align:center;
}
網頁的部份，則在head段落中，以<link>標籤呼叫css檔案，語法如下
<head>
<link rel="stylesheet" type="text/css" href="css檔案的URL">
</head>
4.用@import指令匯入css檔(外部樣式)
網頁中的@import必須在head段落的<style>和</style>之間，語法如下
<head>
<style>
@import url(css檔的URL);
</style>
小結
透過CSS能夠完全改變使用者代理呈現元素的方式，這能夠透過display屬性在基本層級執行，也可以藉由連結鍵的方式來達成。使用者不需要到知道是透過外部樣式、內部樣式、或行內樣式。外部樣式真正的重要性在於提供作者集中放置網站呈現資訊的方式，讓所有的文件都指向相同的地方，不只讓網站更新與維護更加簡單，也能節省頻寬！
設計師要善用CSS的能力，需完全了解CSS的各項功能以及如何妥善使用，才能做出視覺美觀的網頁和作品！
![[FE302] React 基礎 ( hooks 版 )：React 基礎](https://s103071049.coderbridge.io/2021/09/03/fe302-react-基礎-(-hooks-版-)：react-基礎/?utm_source=coderbridge-com&utm_medium=indie_related_post_img&utm_campaign=Day01 - CSS入門看這篇_[FE302] React 基礎 ( hooks 版 )：React 基礎_@s103071049_https://static.coderbridge.com/images/covers/default-post-cover-3.jpg)
