CSS - 簡介

歡迎，初露頭角的網頁開發者們！今天，我們將進入CSS的多彩世界。作為你們親切的鄰居電腦老師，我很興奮能夠帶領你們開展這次旅程。所以，拿起你們的虛擬畫筆，讓我們一起讓網絡變得美麗！

CSS - Introduction

什麼是CSS？

CSS，或稱為層叠樣式表（Cascading Style Sheets），就像是網絡世界的時尚設計師。當HTML提供網頁的結構（可以把它看作是骨骼）時，CSS則負責它的外觀和感受。它是將一個平淡無奇的網頁變成視覺上令人震撼的杰作的神奇成分。

想像一下你正在建造一個房子。HTML會是磚頭和灰泥，而CSS則是油漆、壁紙和室內設計。這就是讓你的網站脫穎而出並看起來驚艷的原因！

下面是一個簡單的例子來說明CSS是如何工作的：

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #0066cc;
text-align: center;
}
</style>
</head>
<body>
<h1>歡迎來到我驚人的網站！</h1>
</body>
</html>

在這個例子中，我們在<style>標籤內使用CSS來：

將整個頁面的背景顏色設置為淺灰色（#f0f0f0）
將所有文字的字體改為Arial（如果Arial不可用，則使用任何無襯線字體）
將h1標題設置為藍色（#0066cc）並在頁面上居中

CSS的優勢

現在，你可能會想，“為什麼要麻煩使用CSS？我們不能只是在HTML中設計一切嗎？” 嗯，我好奇的學生們，讓我與你們分享CSS帶給我們的超能力：

關注點的分離：CSS讓我們能夠將呈現（事物看起來的樣子）與結構（內容及其組織）分開。這使我們的代碼更清潔、更易於維護。
一致性：使用CSS，你可以一次定義樣式並跨多個頁面應用它們。需要更改所有標題的顏色？在CSS文件中進行一次更改，然後就可以了！
靈活性：CSS為你提供了對網頁布局和外觀的細粒度控制。從簡單的顏色更改到複雜的動畫，CSS都能滿足你的需求。
響應性：CSS讓你可以創建有 adapts 的設計，以适应不同的屏幕尺寸，確保你的網站在從手機到大型桌面顯示器的各種設備上都能看起來很棒。
帶寬效率：將樣式信息移至分離的CSS文件，可以減少HTML中的冗余，從而減少文件大小並加快加載時間。

讓我們看一個例子來展示這些優勢：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>歡迎來到我驚人的網站！</h1>
<p>這是一段文字。</p>
<ul>
<li>列表項目1</li>
<li>列表項目2</li>
<li>列表項目3</li>
</ul>
</body>
</html>

並在我們的分離styles.css文件中：

body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
}

h1 {
color: #0066cc;
text-align: center;
}

p {
color: #333;
}

ul {
background-color: #f4f4f4;
padding: 20px;
}

li {
margin-bottom: 10px;
}

@media (max-width: 600px) {
body {
padding: 10px;
}
h1 {
font-size: 24px;
}
}

在這個例子中，我們將樣式分離到了不同的文件中，使HTML更為清潔。我們還添加了一些響應式設計，使用@media規則為小屏幕調整樣式。

誰創建和維護CSS？

CSS不是某個開發者在昏暗的房間裡熬夜創造的產物（雖然我們中的許多人都是這樣寫CSS的！）。它實際上是由一個叫做萬維網聯合會（W3C）的組織維護的。

W3C就像網絡標準的聯合國。它由成員組織、全職員工和公眾組成，共同開發網絡標準。他們負責決定應該向CSS添加哪些新功能以及它們應該如何工作。

但這部分很酷：你可以，是的，你可以對CSS的發展發表意見！W3C歡迎來自網頁開發者和設計師的意見。所以誰知道呢？也許有一天，你會提出下一個重大的CSS功能！

CSS版本

就像任何好的軟件一樣，CSS在過去的幾年裡經歷了幾個版本，每個版本都添加了新的功能和能力。以下是快速的概覽：

版本	年份	鍵功能
CSS1	1996	基本樣式（字體、顏色、間距）
CSS2	1998	定位、z-index、媒體類型
CSS2.1	2011	錯誤修復和微小變更
CSS3	2011-現在	模塊化規範、動畫、flexbox、grid

CSS3與其前輩有所不同。它不是一個單一的整體規範，而是被拆分成了多個模塊。這樣可以讓規範的不同部分以不同的速度進步。

以下是CSS3能做到的一些事情：

.fancy-box {
background: linear-gradient(to right, #ff8a00, #da1b60);
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.fancy-box:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

這段CSS創造了一個帶有漸變背景、圓角和陰影的盒子。當你將鼠標悬停在上面時，它會平滑地變大，陰影也會變得更明顯。很酷吧？

這就是你們了，我親愛的學生們！你們已經踏入了CSS的奇妙世界。記住，像任何藝術形式一樣，精通CSS需要練習。所以如果你的第一次嘗試看起來不像來自設計雜誌，不要氣餒。繼續實驗，繼續學習，在你們知道之前，你們將會像專業人士一樣設計網站！

現在，去讓網絡變得更加美麗吧，一次樣式表一次！

Credits: Image by storyset