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