經過前三篇的實踐，我們的網頁已經有了一些基本的HTML內容。這篇我們接著來看如何用CSS進行版面設計及網頁美化。一、CSS定義與作用
層疊樣式表（Cascading Style Sheets）是描述HTML或XML文檔呈現的樣式表語言。核心功能：
? ?? 視覺設計：控制顏色、字體、間距等視覺屬性
? ?? 布局控制：實現響應式布局、定位排版
? ?? 設備適配：為不同屏幕尺寸提供優化顯示
比如如果你想將<h2>標題改成紅色，可以在<h2>標簽中輸入style屬性,后續接上CSS語法。<h2 style="color:red">健康谷物面包新鮮出爐！</h2>
此種方式易上手，但有一個缺點，即每個標簽樣式都需單獨設置，若你的網頁中有很多標簽，操作起來非常耗時耗力。這時你只要在<style>標簽中清楚指明對應的標簽名稱-->{CSS語法};以<h2>標簽為例，這樣就可以一次修改網頁中所有<h2>標題。<head> <style> h2{ color:red; } </style> </head>
h1 { color: #2c3e50; font-size: 2.5rem; margin-bottom: 1.5rem; }
這種方式依然有一定的局限性：因為一個網站可能是由多個網頁組成的如果每個網頁都需單獨維護CSS樣式，會是個不切實際的做法。外部CSS樣式表是將CSS規則存儲在獨立文件中（擴展名為.css),通過HTML的<link>元素引入。主要優勢：
創建與引用步驟
1. 創建CSS文件，在vscode左側項目目錄，單擊右鍵新建文件（如styles.css）
項目根目錄/├── index.html└── css/ └── styles.css <
2. 編寫CSS規則
在styles.css中寫入樣式內容（無需<style>標簽）,示例：
body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa;}
.container { max-width: 1200px; margin: 0 auto;}
同時，我們還必須把這個樣式表鏈接至原來的HTML網頁中。
3. HTML文件引入
在HTML的<head>內添加鏈接標簽，示例：
<!DOCTYPE html><html><head> <title>示例頁面</title> <link rel="stylesheet" href="css/styles.css"></head><body> <div class="container"> </div></body></html>
其中，rel="stylesheet"代表文件類型，href="css/styles.css"是文檔名稱和路徑。
| | |
| | |
| | index.html→css/styles.css |
| | |
| | |
通過這第三種方式，你就可以用一個CSS樣式表，同時控制多個網頁的外觀，也更方便于網站后期的維護與更新。
閱讀原文：原文鏈接
該文章在 2025/7/18 10:20:14 編輯過
400 186 1886
