html+css的內嵌式如何使用？

剛開始學前端的小伙伴，是不是經常對著CSS的幾種寫法發愁？“內嵌式”“行內式”“外部式”，光聽名字就暈了，更別說搞清楚什么時候用、怎么用才對。其實內嵌式CSS是新手最容易上手的寫法之一，尤其適合單頁面開發或臨時樣式調試——今天這篇文章，我就用大白話+實操案例，帶你把“內嵌式CSS”徹底搞明白，看完就能上手寫，再也不用對著教程干瞪眼。

一、先搞懂：到底什么是“內嵌式CSS”？

說白了，內嵌式CSS就是把CSS代碼直接寫在HTML文件里，不用單獨建.css文件。你可以理解成：給房子裝修時，不找外面的裝修公司（外部式），也不是每個家具單獨貼裝修說明（行內式），而是在房子的“總控室”（HTML的head標簽里）寫一份裝修方案，統一管理整個房子的裝修風格。

舉個例子：如果你的HTML是一篇作文，那內嵌式CSS就像作文里的“格式要求”——字體、行距、標題大小都寫在作文開頭的“注意事項”里，整篇作文都得按這個來。

和另外兩種寫法的區別：

行內式：直接寫在標簽里（比如

），只管單個標簽，太零散；

外部式：單獨建.css文件，所有頁面都能共用，但新手剛開始可能搞不清文件路徑；

內嵌式：寫在HTML的head里，管整個頁面的樣式，既集中又不用操心文件路徑，對新手友好度拉滿。

二、手把手教你：內嵌式CSS的3步用法（附代碼示例）

內嵌式用法其實超簡單，記住“一個位置、兩個標簽、三個要素”就行，我一步一步帶你寫。

第1步：找到“正確的位置”——head標簽里

內嵌式CSS必須寫在HTML的標簽里，而且要用

第2步：寫“選擇器”——告訴CSS“給誰穿衣服”

CSS的核心邏輯是“選擇器+樣式”：先告訴CSS“你要美化哪個標簽”（選擇器），再告訴它“怎么美化”（樣式）。

比如你想美化頁面里所有的

標題，選擇器就寫h1；想美化class為“box”的標簽，選擇器就寫.box（注意前面有個點）；想美化id為“logo”的標簽，選擇器就寫logo（注意前面有個井號）。

常見選擇器示例：

/ 標簽選擇器：選中所有p標簽 /

p { ... }

/ class選擇器：選中所有class="title"的標簽 /

.title { ... }

/ id選擇器：選中id="header"的標簽（id在頁面里只能有一個） /

header { ... }

第3步：寫“樣式屬性”——告訴CSS“穿什么衣服”

選好要美化的標簽后，就可以寫具體的樣式了。樣式要寫在{ }里，格式是“屬性名: 屬性值;”，比如“顏色: 紅色;”就是color: red;。

完整代碼示例：

下面我們寫一個簡單的頁面，用內嵌式CSS美化標題、段落和一個盒子：

這是標題

這是一段介紹文字，用class="intro"選中。

效果說明：保存成.html文件用瀏覽器打開，你會看到標題是紅色居中的，介紹文字是灰色的，盒子有藍色邊框——這就是內嵌式CSS的作用，所有樣式都寫在head里，管理起來很方便。

三、內嵌式CSS的“優缺點”：什么時候用才合適？

雖然內嵌式簡單，但不是所有場景都適用。搞清楚它的優缺點，才能避免“用錯工具”。

優點：簡單、集中、加載快

上手簡單：不用管文件路徑（新手最頭疼的就是“為什么外部CSS鏈接不上”），直接在HTML里寫，寫完就能看效果；

集中管理：所有樣式都在head里，改樣式時不用切換文件，直接在一個頁面里找；

加載更快：瀏覽器加載HTML時會一起加載內嵌的CSS，不用額外發請求加載.css文件，對單頁面來說加載速度更快。

缺點：復用性差、代碼冗余

只能管一個頁面：如果你的網站有10個頁面，每個頁面都要寫一遍相同的樣式，改起來得改10次，累到哭；

HTML文件變胖：CSS代碼多了之后，HTML文件會變得很長，不方便維護（比如一個頁面有500行CSS，看著就頭大）；

優先級問題：內嵌式CSS的優先級比外部式高（除非外部式加了!important），如果后面想改用外部式，可能會出現樣式沖突。

總結：這些場景用內嵌式最合適！

根據優缺點，內嵌式最適合這3種情況：

單頁面網站：比如一個活動頁、個人簡介頁，只有一個HTML文件，用內嵌式足夠；

臨時調試樣式：寫代碼時想快速試一下樣式效果，直接內嵌寫，調好再整理到外部文件；

郵件模板：郵件客戶端很多不支持外部CSS，內嵌式是最穩妥的選擇（這個是工作里的小技巧，記下來?。?。

四、新手必踩的3個坑：我當年掉進去過，你別再犯！

就算步驟都對，新手還是容易踩坑。分享3個我初學時候的“血淚教訓”，幫你避坑：

坑1：style標簽放錯位置，樣式不生效

錯誤情況：把