iT邦幫忙

2025 iThome 鐵人賽

DAY 4
0

如果說 HTML 負責骨架,那 CSS (Cascading Style Sheets) 就是網頁的皮膚、衣服和化妝品。它決定了網頁的顏色、字體、排版等視覺呈現。從今天開始,我的網頁將不再只是黑白,而是充滿色彩和設計感。

學習如何將 CSS 應用到 HTML 上,主要有三種方式:

1. 行內樣式 (Inline Style): 直接在 HTML 標籤內使用 style 屬性。

  • 範例:<h1 style="color: blue;">我的標題</h1>
  • 優點:簡單快速。
  • 缺點:不好維護,不推薦大量使用。

2. 內部樣式 (Internal Style):<head>標籤內使用<style>標籤。

  • 範例:
HTML

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
  • 優點:適用於單個頁面,結構清晰。

3. 外部樣式 (External Style): 這是最推薦的方式!將 CSS 程式碼寫在一個獨立的 .css 檔案中,然後在 HTML 檔案中連結它。

  • 範例:
HTML

<head>
  <link rel="stylesheet" href="style.css" />
</head>
  • 優點:程式碼分離,易於維護和重用,是大型專案的標準做法。

建立一個 style.css 檔案,並將它連結到我們昨天的 HTML 頁面。

在 index.html 的 <head> 標籤內加入:
<link rel="stylesheet" href="style.css" />

在 style.css 檔案中加入:

CSS

body {
  background-color: #3e81bc;
}
h1 {
  color: #f5f5f5;
}

打開網頁會發現背景變成了深藍色,標題也變成了灰白色。這就是CSS風格的厲害,讓網頁變得更加美觀、有吸引力。明天會更深入地探索CSS的顏色屬性。

執行成果 :
https://ithelp.ithome.com.tw/upload/images/20250811/20171037QeP6N8Sevu.png


上一篇
資訊的整理:清單與表格
下一篇
顏色的設計師:CSS 顏色、背景
系列文
網頁設計自我挑戰 - 從零開始26
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言