如果說 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的顏色屬性。
執行成果 :