上一篇我們使用實作一個 macbook作為範例說明。這一篇我們就來介紹負責產品外乖的的角色：CSS！
CSS 是做什麼的？
CSS，全名是 Cascading Style Sheets，中文叫「階層式樣式表」。
簡單來說，CSS 就是負責畫面「視覺風格」的程式語言。
- HTML：架構、骨架（像 MacBook 的外殼）
- CSS：設計、外觀（像 MacBook 的配色、圓角、鍵盤）
- JavaScript：互動功能（像開機後的 OS 操作）
👉 有了 HTML 的結構，我們就可以用 CSS 來設計電腦的外觀樣式。
CSS 怎麼使用？
有三種方法可以寫 CSS，我們接著下面介紹。
Inline CSS （內聯樣式）
內聯樣式寫法最簡單直接，但是對於網站的安全性有風險，所以通常我們不太會這樣寫。但其實實務上還是很常會有為了方便直接寫的情況。
<div style="color:red">Lesson4</div>
直接在 div 元素裡面寫上 style 就可以改變了 CSS，上面範例的意思是就是，Lesson4 顯示的字顏色變成紅色的。
Internal CSS（內部樣式表）
internal 的寫法是在 head 裡面寫 css，使用 <style>標籤把 css 語法包起來即可。
<head>
<style>
.lesson4 {
color: red;
}
</style>
</head>
<body>
<div class="lesson4">Lesson4</div>
</body>
要怎麼把這個css 指定到需要的 html 元素呢？使用 class即可，像上面範例我們為把字體顏色變成紅色 color: red; 命名了一個class .lesson4，當在 html 使用這個元素的時候就可以達到和 Inline CSS一樣的效果。
External CSS（外部樣式表）
External 其實和 internal 是一樣的， 只是把 css 檔案寫到為外面了。
我們可以先建立一個檔案叫做 style.css 並且把剛剛寫的 css 內容貼過來。
// style.css
.lesson4 {
color: red;
}
再來使用 <link>標籤在 html中引入使用即可。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="lesson4">Lesson4</div>
</body>
用 class 寫的好處就是，如果需要用到一樣的樣式，可以在多個地方共用。
常見的 CSS 屬性
其實css 非常多種屬性，很雜很多，我個人覺得要精通css滿難的。有興趣的可以上 W3 Schools 看看。
這邊我做了一個簡單的 demo 網頁給大家看看
屬性 功能描述
color 文字顏色
background. 背景顏色或圖片
font-size. 字體大小
font-weight 粗體設定（normal、bold）
padding 元素內部留白
margin 元素外部留白
border 邊框設定
border-radius. 圓角設定
box-shadow. 陰影效果
display 佈局方式（如 flex, grid）
text-align 文字對齊方式（left, center, right）
width / height 寬高設定
code pen 範例碼
各項屬性的說明用法可以去 w3school看看，那邊有很詳細的說明，上個時代的工程師都是去那邊看的（笑。
GPT 學習CSS
那新世代呢？我建議可以直接詢問gpt ，例如你不太知道 display:flex 各項屬性怎麼應用。可以這樣問 AI
我想知道 css display flex 各項屬性 可以給我一個簡單易懂的說明嗎
他會給你非常詳細的說明
但如果你還是不懂，你可以請他在畫布理面實作一些範例給你看看，
我不太知道 flex-direction 各個不一樣再哪 可以在畫布裡面給我範例嗎
gpt 會開始寫程式，寫好以後你可按下右上角的預覽按鈕，就可以看到gpt為你做的精美的說明。
如何用 GPT 查 CSS 的用法
- 步驟一：提出問題
- 步驟二：文字說明不懂的話，請他使用畫布作為示範範例
AI時代的CSS學習建議
通常學程式的書或課程都會比較建議知道一下大概常用的就好了，其他的遇到在學就好了。也不用特別去記，就遇到了再去查。我自己學習和實作的經驗，我是沒特別去記或研讀過css，通常就遇到了就去查遇久了就會記起來了。
以前要用 google查比較難，也比較難找到剛好你要做的東西，只能google到你類似的東西照抄看看。現在有gpt，可以直接請他生成給你。雖然不一定剛好是你想要的，但你可以以這個為基礎去改改看。
要有能力改，就回到要學習這件事上面了。雖然AI很方便，但還是得要自己會，才有能力修改。
不得不說，通常精通css的同事我都會很佩服，因為他們居然花了不少時間在這個地方上面。
明天我們再來試試看使用 gpt實作一些項目。
參考資料
w3schools-How To Add CSS
