2026年1月14日 星期三

CSS (Cascading Style Sheets，層疊樣式表)

 要幫 HTML 網頁加上顏色、調整字體大小或版面配置，我們需要用到 CSS (Cascading Style Sheets，層疊樣式表)。

如果說 HTML 是人的「骨架」，CSS 就是「衣服與妝容」。

一、 CSS 的語法規則

CSS 的寫法非常直覺，由選擇器 (Selector)、屬性 (Property) 與 值 (Value) 組成：

CSS
h1 {
  color: blue;       /* 將標題文字設為藍色 */
  font-size: 24px;   /* 將字體大小設為 24 像素 */
}

二、 如何將 CSS 加入 HTML？ (三種方法)

1. 行內樣式 (Inline Style) - 快速但不建議常用

直接寫在 HTML 標籤裡面。

  • 優點：最快。

  • 缺點：如果標籤很多，修改起來會很痛苦。

HTML
<p style="color: red;">這段文字是紅色的。</p>

2. 內部樣式 (Internal CSS) - 適合單一頁面

寫在 HTML 檔案的 <head> 區塊內的 <style> 標籤中。

HTML
<head>
    <style>
        body { background-color: #f0f0f0; } /* 背景淺灰色 */
        h1 { color: darkgreen; }           /* 標題深綠色 */
    </style>
</head>

3. 外部樣式 (External CSS) - 最推薦的做法

將 CSS 單獨存成一個檔案（例如 style.css），然後在 HTML 中引用。這樣多個網頁可以共用同一個樣式檔。

  • HTML 加入這一行：

    HTML
    <link rel="stylesheet" href="style.css">

三、 常用的顏色與視覺指令

屬性說明範例值
color文字顏色red, #FF0000, rgb(255,0,0)
background-color背景顏色yellow, skyblue
font-size字體大小16px, 2rem
text-align對齊方式center, left, right
border邊框1px solid black (寬度 樣式 顏色)

四、 入門範例：加上顏色後的網頁

請將以下代碼存成新的 .html 檔案試試看：

HTML
<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS 寫在這裡 */
        body {
            background-color: lightblue; /* 網頁背景變淺藍色 */
            font-family: Arial, sans-serif;
        }
        .my-box {
            background-color: white;
            color: #333;
            padding: 20px;
            border-radius: 10px; /* 圓角效果 */
            border: 2px solid navy;
            text-align: center;
        }
        h1 {
            color: darkblue;
        }
    </style>
</head>
<body>

    <div class="my-box">
        <h1>我的彩色網頁</h1>
        <p>這是一個使用了 CSS 樣式的區塊。</p>
    </div>

</body>
</html>

五、 小撇步：如何挑選好看的顏色？

初學者最怕「配色」，你可以使用以下工具：

  • 顏色名稱：直接輸入 red, blue, gold 等（共有 140 種標準名稱）。

  • 十六進位碼 (Hex)：如 #ff5733，這最常用。

  • 配色網站：搜尋 "Color Palette"，找一組喜歡的顏色來複製色碼。


沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)