HTML - 風格表：初學者指南

歡迎，未來的網頁開發者們！今天，我們將深入探討HTML風格表的豐富世界，也稱為CSS（層叠風格表）。將HTML視為你網頁的骨骼，CSS則是讓它看起來驚艷時尚的衣裳。讓我們一起踏上這個令人興奮的旅程！

HTML - Style Sheet

什麼是風格表？

在我們跳進深水區之前，讓我們先了解風格表是什麼。風格表是一組樣式規則，告訴網絡瀏覽器如何呈現用HTML編寫的文件。這就像是一本為你網頁設計的時尚設計師指南！

CSS在HTML文件中的範例

讓我們從一個簡單的範例開始，看看CSS是如何起作用的：

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>
<body>
<h1>歡迎來到我時尚的頁面！</h1>
<p>這是一段使用默認樣式的文字。</p>
</body>
</html>

在這個範例中，我們在HTML文件的<head>部分中加入了一個<style>標籤。在這個標籤內，我們定義了一些CSS規則：

我們將body的背景顏色設為淺灰色（#f0f0f0）並改變了字體為Arial。
我們為h1標籤設定了深藍色並將其居中於頁面上。

CSS的類型

現在我們已經看到了CSS的實際應用，讓我們探討三種CSS類型。將這些視為為你的HTML衣櫥添加風格的不同方式：

1. 行內CSS

行內CSS就像直接在你的衣服上添加一頂時髦的帽子。它直接應用於HTML元素，使用style屬性。

<h1 style="color: red; font-size: 24px;">這是一個紅色標題</h1>

在這個範例中，我們將標題設為紅色並將其大小增加到24像素。

2. 內部CSS

內部CSS就像為單一網頁請一位個人造型師。它定義在HTML文件的<head>部分的<style>標籤中，正如我們在第一個範例中看到的。

3. 外部CSS

外部CSS就像為所有你的網頁請一本通用時尚指南。它存儲在一個單獨的.css文件中，並與你的HTML文件鏈接。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>歡迎來到我時尚的頁面！</h1>
<p>這個頁面使用外部CSS文件進行樣式設置。</p>
</body>
</html>

在這個範例中，我們將一個名為styles.css的外部CSS文件鏈接到我們的HTML文件。

使用風格表的範例

讓我們探討一些更多範例，看看CSS的力量：

文本樣式

p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}

這個CSS規則為所有段落設定了Georgia字體，16像素大小，1.6行高，和深灰色顏色。

創建按鈕

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

這個CSS創建了一個時尚的綠色按鈕。你可以將這個應用於任何元素，只需給它添加類別"button"。

响應式設計

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
}

這個CSS使用媒體查詢在螢幕寬度為600像素或更小的時候調整字體大小，使你的網站響應式。

CSS方法表

這裡有一個方便的表格，總結了我們討論過的CSS方法：

方法	描述	優點	缺點
行內CSS	直接應用於HTML元素	對小變化快速	不可重用，會使HTML混亂
內部CSS	定義在HTML文件的`<style>`標籤中	適用於單一頁面	在頁面之間不可重用
外部CSS	存儲在單獨的.css文件中	可重用，保持HTML清潔	需要額外的HTTP請求

記住，年輕的學徒們，掌握CSS就像學習繪畫一樣 - 需要練習、耐心和一點創造力。不要害怕嘗試不同的樣式，看看哪種對你的網頁最有效。

當我們結束這堂課時，我想到一位學生曾經告訴我："CSS將我枯燥的網頁變成了數字作品！" 這就是CSS的美妙之處 - 它賦予你將網絡轉化為你的畫布的力量。

所以，勇於樣式化，讓你的網頁永遠充滿驚喜！

Credits: Image by storyset