繁體中文

CSS 教學

CSS3教學

CSS 高級

CSS 參考手冊

CSS 响應式

CSS教學：網頁設計初學者的風格指南

什麼是CSS？

你好，有志於網頁設計的各位！讓我們一起踏上令人興奮的層叠樣式表（Cascading Style Sheets，簡稱CSS）的旅程。想像你正在建造一個房子。HTML會是結構 - 墙壁、屋頂和基礎。CSS呢？嗯，那就是讓你的房子看起來美麗和獨特的油漆、壁紙和裝飾！

CSS - Home

CSS是一種樣式語言，告訴網頁浏览器如何呈現HTML元素。它就像一支神奇的畫筆，將平淡無奇的网络页面轉變成生動、引人注目的設計。使用CSS，你可以控制顏色、字體、佈局，甚至為你的網頁添加酷炫的動畫。

誰應該學習CSS？

如果你正在閱讀這篇文章，那麼CSS對你來說可能是完美的！但我們來具體分析一下：

  1. 網頁設計師和開發者（這是不言而喻的！）
  2. 想要自定義他們網站的博客作者
  3. 創建登錄頁面的營銷專業人士
  4. 任何對在互联网上讓事物看起來美觀有興趣的人！

相信我，我見過來自各行各業的學生在發現CSS的力量時都會眼睛發亮。這就像看著一個孩子發現他們可以線外作畫 - 純粹的喜悅！

CSS的類型

有三種主要的方式將CSS添加到你的HTML中。讓我們一一看看：

  1. 行內CSS
  2. 內部CSS
  3. 外部CSS

這裡有一個方便的表格來比較它們：

類型 如何添加 最適合
行內 直接在HTML標籤中 快速、特定的更改
內部 在HTML的<head>中 單個页面的樣式
外部 分離的.css文件 整個网站的樣式

CSS代碼示例

讓我們深入一個簡單的例子來看看CSS是如何工作的：

<!DOCTYPE html>
<html>
<head>
<style>
/* 這是內部CSS */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
</style>
</head>
<body>
<h1>歡迎來到CSS！</h1>
<p style="color: blue;">這是一個帶有行內CSS的段落。</p>
</body>
</html>

在這個例子中，我們同時使用了內部和行內CSS。內部CSS在<style>標籤中設置了整個页面的背景顏色和字體，並樣式化了<h1>元素。<p>標籤上的行內CSS使那個特定的段落變為藍色。

使用CSS的原因

為什麼要麻煩使用CSS？哦，讓我數數方法：

  1. 關注點分離：保持你的內容（HTML）和展示（CSS）分開。
  2. 一致性：輕鬆地在多個页面間應用相同的樣式。
  3. 靈活性：通過修改一個文件，改變整個网站的樣貌。
  4. 效率：減少代碼重複和文件大小。
  5. 響應性：創建能夠適應不同屏幕尺寸的佈局。

學習CSS的先決條件

在深入CSS之前，有幾件事會對你有幫助：

  1. HTML的基本理解
  2. 一個文本编辑器（我推薦Visual Studio Code）
  3. 一個現代的網頁浏览器（Chrome、Firefox或Edge）
  4. 好奇心和嘗試的願望！

不要擔心你現在還不是HTML專家。我們會在進行的過程中涵蓋基礎。

CSS教學起步

準備好了嗎？太好了！讓我們設置你的工作空間：

  1. 為你的項目創建一個新文件夹。
  2. 在那個文件夹內，創建一個HTML文件（例如，index.html）和一個CSS文件（例如，styles.css）。
  3. 打開你的HTML文件並添加以下基本結構：
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的CSS冒險</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>歡迎來到我的CSS冒險！</h1>
</body>
</html>

注意<head>中的<link>標籤？這是我們如何將HTML和外部CSS文件連接起來的方法。

CSS基礎

現在，讓我們添加一些樣式！打開你的styles.css文件，讓我們寫下我們的第一個CSS規則：

body {
background-color: #e6f3ff;
font-family: Arial, sans-serif;
}

h1 {
color: #333333;
text-align: center;
text-shadow: 2px 2px 4px #cccccc;
}

這裡發生了什麼：

  • 我們為<body>元素設置了一個浅藍色的背景和字體。
  • <h1>居中對齊，顏色為深灰色，並有微妙文字陰影。

保存兩個文件，並在浏览器中打開你的HTML。瞧！你剛剛樣式化了你第一個網頁！

CSS屬性

CSS有大量的屬性可以玩。這裡有一些常見的：

屬性 它是幹什麼的 示例
color 設置文本顏色 color: #ff0000;
font-size 改變文本大小 font-size: 16px;
margin 設置元素外面的空間 margin: 10px;
padding 設置元素內部的空間 padding: 5px 10px;
border 添加邊框 border: 1px solid black;

讓我們添加一個段落並樣式化它：

<p class="intro">CSS太神奇了！它讓我們以無數的方式樣式化我们的网页。</p>

在你的CSS文件中：

.intro {
font-size: 18px;
color: #4a4a4a;
line-height: 1.6;
margin: 20px;
padding: 15px;
border: 2px dashed #7caed6;
border-radius: 10px;
}

這創建了一個帶有虚線邊框和圓角樣式的段落。酷炫吧？

CSS進階

隨著你的進步，你會發現更多進階的CSS概念，例如：

  1. Flexbox和Grid：用於創建复杂的佈局
  2. 媒体查询：讓你的站点響應式
  3. 過渡和動畫：添加移動和交互性
  4. 伪类：用于樣式化特定狀態（如悬停效果）

這裡有一個悬停效果的例子：

.intro:hover {
background-color: #f0f8ff;
transform: scale(1.05);
transition: all 0.3s ease;
}

這會使我们的段落在你悬停時稍微變大並改變背景顏色。很棒吧！

記住，CSS就是關於嘗試。不要害怕嘗試新事物，弄壞東西，並從錯誤中學習。這就是所有偉大的網頁設計師是如何開始的！

在我多年的教學中，我見過無數學生從CSS新手變成設計大師。只要你有練習和耐心，你也會達到那個地步。所以，繼續前進，開始樣式化，並看著你的網頁變得栩栩如生吧！

Credits: Image by storyset

 
下一教程:
CSS - 簡介