繁體中文

CSS 教學

CSS3教學

CSS 高級

CSS 參考手冊

CSS 响應式

CSS3 教學：初學者指南，學習網頁樣式設計

什麼是 CSS？

CSS，全名為層叠樣式表（Cascading Style Sheets），是一種強大的樣式語言，用於描述以 HTML 或 XML 寫成的文件的呈現方式。它就像是網絡世界的時尚設計師，決定元素應該在螢幕、紙張或其他媒介上如何顯示。

CSS3 - Tutorial

想像你正在蓋一個房子。HTML 則是結構——牆壁、屋頂和基礎。CSS 則是讓房子看起來漂亮的東西——油漆、壁紙、窗簾和家具。正是它將一個骨瘦如柴的網頁變成了一個視覺上吸引人的傑作！

誰應該學習 CSS？

任何想要創建有美麗、響應式網站的人應該學習 CSS。這包括：

  1. 網頁開發者
  2. 網頁設計師
  3. UI/UX 設計師
  4. 數位行銷人員
  5. 博主
  6. 任何對網絡技術感興趣的人

即使你是一個完全的初學者，沒有之前的編程經驗，也不用擔心！CSS 設計得非常直觀且容易學習。稍加練習，你很快就會像專家一樣設計網站的樣式。

CSS 的類型

CSS 有三種主要類型：

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

讓我們用一些例子來詳細說明：

1. 行內 CSS

行內 CSS 直接應用於 HTML 元素，使用 style 屬性。

<p style="color: blue; font-size: 16px;">這是一個藍色段落，字體大小為 16px。</p>

這種方法快速但對於大型項目來說不推薦，因為它將內容與呈現混合在一起。

2. 內部 CSS

內部 CSS 放置在 HTML <head> 部分的 <style> 標籤中。

<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>這個段落將會是綠色，字體大小為 18px。</p>
</body>

這種方法對於設計單個頁面很有用，但對於多頁面網站來說效率低下。

3. 外部 CSS

外部 CSS 存儲在一個單獨的 .css 文件中，並鏈接到 HTML 文件。

<!-- 在你的 HTML 文件中 -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* 在你的 styles.css 文件中 */
p {
color: red;
font-size: 20px;
}

這是對於大型項目來說最有效的方法，因為它將內容與呈現分開，並且容易維護。

CSS 代碼範例

讓我們深入一個更全面的例子來看 CSS 的實際應用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的超棒網站</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.highlight {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>歡迎來到我的超棒網站</h1>
<p>你好！我正在學習 CSS，這真的很棒！</p>
</div>
</body>
</html>

在這個例子中，我們使用內部 CSS 來設計我們的網頁。讓我們分解一下每部分的作用：

  • 我們設置了 body 的字體為 Arial，並給它一個淺灰色背景。
  • .container 類創建了一個居中的白色框，帶有一些填充和微妙的陰影。
  • h1 居中並設置為深灰色。
  • .highlight 類創建了黃色高亮文字。

使用 CSS 的理由

  1. 分離內容和呈現
  2. 多個頁面的一致性
  3. 更快的頁面加載時間
  4. 容易維護和更新
  5. 响應式設計能力
  6. 增強用戶體驗

學習 CSS 的先決條件

要開始學習 CSS，你需要：

  1. 對 HTML 的基本了解
  2. 一個文本編輯器（如 Visual Studio Code、Sublime Text，甚至是 Notepad）
  3. 一個網絡瀏覽器（Chrome、Firefox 或 Safari）
  4. 熱情和願意嘗試！

CSS 教學入門

現在我們已經介紹了基礎知識，讓我們開始設計吧！我們將創建一個簡單的網頁並逐步設計它。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一個設計過的頁面</title>
<style>
/* 我們將在這裡添加我們的 CSS */
</style>
</head>
<body>
<header>
<h1>歡迎來到我的網站</h1>
</header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於</a></li>
<li><a href="#">聯繫</a></li>
</ul>
</nav>
<main>
<h2>關於我</h2>
<p>嗨！我正在學習 CSS，這真的很棒！</p>
</main>
<footer>
<p>&copy; 2023 我的網站</p>
</footer>
</body>
</html>

現在，讓我們添加一些 CSS 來讓它看起來很棒！

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

header {
background-color: #35424a;
color: white;
text-align: center;
padding: 1rem;
}

nav ul {
background-color: #2c3e50;
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline-block;
margin-right: 10px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 10px;
}

nav ul li a:hover {
background-color: #34495e;
}

main {
padding: 20px;
}

footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}

這段 CSS 會做以下事情：

  • 為整個頁面設置了一致的字體和行高。
  • 創建了一個深色的 header，並將文字居中顯示。
  • 為導航菜單設置了深色背景和行內列表項。
  • 為導航鏈接添加了滑鼠悬停效果。
  • 為主要內容區域添加了填充。
  • 創建了一個固定在頁面底部的 footer。

CSS 屬性

CSS 使用了廣泛的屬性來設計元素。以下是一些常見屬性的表格：

屬性 描述 示例
color 設置文字顏色 color: blue;
background-color 設置背景顏色 background-color: #f0f0f0;
font-size 設置字體大小 font-size: 16px;
font-family 設置字體類型 font-family: Arial, sans-serif;
margin 設置外邊距 margin: 10px;
padding 設置內邊距 padding: 5px;
border 設置邊框樣式 border: 1px solid black;
text-align 設置文字對齊方式 text-align: center;
display 設置顯示類型 display: flex;

CSS 高級概念

當你對 CSS 更為熟悉時，你可以探索以下進階概念：

  1. Flexbox 和 Grid 布局
  2. 使用媒体查询進行響應式設計
  3. CSS 動畫和過渡
  4. CSS 預處理器，如 Sass 或 Less
  5. CSS 框架，如 Bootstrap 或 Tailwind

記住，精通 CSS 的關鍵是練習。不要害怕嘗試並犯錯誤——這是我們學習的方式！快樂地設計吧！

Credits: Image by storyset

上一教程:
CSS - 資料類型
下一教程:
CSS - 圓角