在現代網頁設計中，CSS（Cascading Style Sheets）扮演著至關重要的角色。它不僅是用來美化網頁的工具，還能使網頁變得更加靈活和適應不同設備。本文將從基本到進階，提供詳細的 CSS 實例教學，讓大家有初步了解。
CSS 有什麼用?
CSS 是用來設計和控制網頁外觀的樣式表語言。它通過設置元素的顏色、字體、邊距等，讓網頁變得更具吸引力。CSS 的副檔名是 .css，通常與 HTML 文件一起使用。
基本範例： 假設你有一篇文章，並希望修改主標題的顏色。以下是如何使用 CSS 來達成這個目的：
HTML：
<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>這是一個主標題</h1>
</body>
styles.css：
/* styles.css */
h1 {
color: blue; /* 將主標題顏色設為藍色 */
}
在這個例子中，我們將 h1 標籤的顏色設置為藍色。這樣，所有使用 h1 標籤的文本都會以藍色顯示。
CSS 與 HTML 的搭配方式
有兩種主要方式將 CSS 應用到 HTML 文件中：
內聯樣式（Inline Styles） 直接在 HTML 標籤中使用 style 屬性設置樣式。這種方法適合簡單的樣式修改，但不適合大規模應用。範例： html複製程式碼<h1 style="color: blue;">這是藍色的主標題</h1>外部樣式表（External Stylesheets） 將 CSS 代碼寫入單獨的 .css 檔案中，然後在 HTML 文件中使用 <link> 標籤引入。這種方法更為整潔且易於維護，適合大規模的樣式管理。HTML： html複製程式碼<link rel="stylesheet" href="styles.css"> styles.css： css複製程式碼h1 { color: blue; /* 將主標題顏色設為藍色 */ }
CSS 的實際應用
1. 基本文字樣式
目標： 修改段落文字的顏色、字體和大小。
HTML：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字樣式範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="intro">這是一個介紹 CSS 的段落。</p>
</body>
styles.css：
/* styles.css */
.intro {
color: #333; /* 深灰色 */
font-family: 'Arial', sans-serif; /* 字體 */
font-size: 16px; /* 字體大小 */
line-height: 1.5; /* 行高 */
}
我們定義了一個 .intro 類別來設置段落文字的顏色、字體、字體大小和行高。這樣，<p> 元素的文字會以深灰色顯示，字體為 Arial，字體大小為 16 像素，行高為 1.5。
2. 背景和邊框
目標： 設置一個區塊元素的背景顏色、邊框和內邊距。
HTML：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景和邊框範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">
<h2>標題</h2>
<p>這是一個有背景顏色和邊框的區塊。</p>
</div>
</body>
styles.css：
/* styles.css */
.box {
background-color: #f4f4f4; /* 背景顏色 */
border: 2px solid #ccc; /* 邊框 */
padding: 20px; /* 內邊距 */
margin: 20px; /* 外邊距 */
}
.box 類別用來設置 div 元素的背景顏色、邊框、內邊距和外邊距。background-color 設置了背景顏色，border 設置了邊框的樣式，padding 和 margin 分別設置了內邊距和外邊距。
3. 布局和對齊
目標： 使用 Flexbox 來水平和垂直居中對齊內容。
HTML：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item">居中對齊</div>
</div>
</body>
styles.css：
/* styles.css */
.container {
display: flex;
justify-content: center; /* 水平居中對齊 */
align-items: center; /* 垂直居中對齊 */
height: 100vh; /* 使容器佔滿整個視口高度 */
}
.item {
background-color: #007BFF; /* 背景顏色 */
color: #fff; /* 文字顏色 */
padding: 20px; /* 內邊距 */
border-radius: 8px; /* 邊角圓角 */
}
我們使用 Flexbox 來對 div 元素進行水平和垂直居中對齊。display: flex 啟用 Flexbox 佈局，justify-content: center 和 align-items: center 分別使容器內的項目在水平方向和垂直方向上居中對齊。
4. 響應式設計
目標： 創建一個響應式的網頁佈局，使其在不同設備上自適應顯示。
HTML：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>響應式設計範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>響應式網站</h1>
</header>
<main>
<div class="grid">
<div class="card">卡片 1</div>
<div class="card">卡片 2</div>
<div class="card">卡片 3</div>
</div>
</main>
</body>
styles.css：
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #007BFF;
color: #fff;
padding: 20px;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 響應式網格布局 */
gap: 10px; /* 卡片之間的間距 */
padding: 20px;
}
.card {
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
text-align: center;
}
在這個例子中，我們使用 CSS Grid 來創建一個響應式的網格佈局。grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 使得網格內的卡片元素在不同螢幕寬度下自動調整列數，確保內容能夠適應不同的設備屏幕。
使用 Web Tools Console 進行渲染檢測
使用 Web 開發工具（通常稱為 Web Tools Console）來進行 CSS 和 HTML 渲染檢測是現代前端開發的一個關鍵技能。這些工具可以幫助你即時查看和調整 HTML 和 CSS，並在開發過程中進行即時的樣式和佈局調整。以下是如何使用 Web Tools Console 來進行 CSS 和 HTML 渲染檢測的詳細指南：
1. 開啟 Web Tools Console
Web Tools Console 通常是瀏覽器內建的開發工具，支持的瀏覽器包括 Google Chrome、Mozilla Firefox、Microsoft Edge 和 Safari。你可以通過以下方式打開這些工具：
Google Chrome ：按 F12 鍵或 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）。Mozilla Firefox ：按 F12 鍵或 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）。Microsoft Edge ：按 F12 鍵或 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）。Safari ：先啟用開發者模式（前往 Safari > 偏好設置 > 高級 > 顯示開發者菜單），然後按 Cmd+Option+I。
2. 使用 Elements 面板進行 HTML 和 CSS 檢測
2.1 查看和編輯 HTML
選擇 Elements 面板 ： 打開 Web Tools Console，選擇 "Elements"（或 "檢查"）面板。在這個面板中，你可以看到頁面的 HTML 結構和其對應的 CSS 樣式。查看 HTML 結構 ： 在 Elements 面板中，你可以展開和收起 HTML 標籤，查看頁面的 DOM 結構。這樣可以檢查和分析頁面元素的結構和層級。編輯 HTML ： 右鍵單擊要編輯的 HTML 元素，選擇 "Edit as HTML"（或 "編輯 HTML"），你可以直接在這裡修改 HTML 代碼。這些更改是即時的，並會反映在頁面上。
2.2 查看和編輯 CSS
選擇 CSS 規則 ： 當你選中某個 HTML 元素時，右側的 "Styles"（或 "樣式"）面板會顯示該元素的 CSS 規則。在這裡，你可以看到所有應用於該元素的 CSS 樣式，包括來自外部樣式表的樣式。編輯 CSS ： 在 "Styles" 面板中，你可以點擊並編輯現有的 CSS 規則。修改後，頁面上的變化會即時顯示。你還可以添加新的 CSS 規則來試驗樣式變化。檢查樣式來源 ： 在 "Styles" 面板中，你可以查看 CSS 規則的來源文件及行號。這有助於追蹤樣式的來源，方便進一步調整。
3. 使用 Console 面板進行即時調試
3.1 查看和修改變數
選擇 Console 面板 ： 選擇 "Console" 面板，你可以在這裡執行 JavaScript 代碼來查看和修改頁面元素的樣式和屬性。使用 JavaScript 操作樣式 ： 例如，你可以使用以下代碼即時修改某個元素的樣式：javascript複製程式碼document.querySelector('h1').style.color = 'red'; 這段代碼會將頁面上第一個 <h1> 標籤的文字顏色改為紅色。
4. 使用 Network 面板檢查樣式文件
4.1 查看樣式文件的加載情況
選擇 Network 面板 ： 在 Web Tools Console 中選擇 "Network" 面板。加載和檢查樣式文件 ： 刷新頁面後，你可以看到所有加載的資源，包括 CSS 文件。點擊 CSS 文件，你可以查看其內容，確保正確加載並應用樣式。
5. 使用 Device Mode 進行響應式測試
5.1 切換到響應式模式
啟用 Device Mode ： 在 Elements 面板的頂部，點擊 "Toggle Device Toolbar"（或類似的設備圖示），可以切換到響應式模式。測試不同設備和屏幕尺寸 ： 使用設備工具條上的選擇框來模擬不同的設備和屏幕尺寸。這有助於檢查頁面在各種設備上的顯示效果，確保響應式設計的效果良好。
使用 Web Tools Console 進行 CSS 和 HTML 渲染檢測可以顯著提升前端開發的效率。你可以即時查看和編輯 HTML 和 CSS，調試樣式問題，檢查網絡資源，以及進行響應式測試。掌握這些工具的使用方法，不僅可以幫助你快速發現和修正問題，還能讓你更好地理解網頁的渲染過程和樣式應用。
總結
CSS 是網頁設計中的核心技術，能夠將靜態的 HTML 內容轉變為美觀且功能強大的網頁。從基礎的文字樣式到複雜的布局和響應式設計，掌握 CSS 能夠顯著提升你的網頁設計技能。希望這篇文章通過詳細的實例和解釋，能夠幫助你更好地理解和應用 CSS，讓你的網頁設計更加出色和專業。
Ref: samkung-webdesign.com
