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