CSS（Cascading Style Sheets，層疊樣式表）是一種用來控制網頁外觀與呈現方式的語言，像是字體、顏色、間距、版面配置，幾乎都要靠它來完成。
一開始學做網站通常會先遇到 HTML，但讓網頁好看，通常就是靠 CSS。它會直接影響內容好不好讀、畫面有沒有層次，甚至手機版瀏覽時舒不舒服。
如果你常覺得網站畫面很亂或不好看，那多半不是內容的問題，而是 CSS 還沒掌握好。這篇文章會從最基本的語法結構開始，帶你搞懂 CSS 怎麼寫，讓版面更乾淨，也更好維護：）
- CSS 是什麼？為什麼做網站一定會碰到？
- 開始寫 CSS 前，先認識最基本的語法規則
- CSS 要寫在哪裡？3 種常見寫法一次看懂
- CSS 的核心觀念：「 權重 」與「 盒模型 」
- 常用屬性清單：新手必備的 CSS 技能包
- CSS 怎麼寫響應式設計？手機版也要顧！
- 如何寫 CSS？3 個實用建議
- 常見問題
- 聯絡犬哥網站
CSS 是什麼？為什麼做網站一定會碰到？
CSS 是會直接決定畫面最後長什麼樣子，所以只要你在做網站，不管是自己刻版、改模板，還是和設計師、工程師合作，至少都要稍微了解 CSS。
CSS 的角色是什麼？
剛開始學做網站，會先接觸到 HTML，但 HTML 只是讓頁面有內容，不包含網頁設計。真正讓網站有視覺層次、有品牌感，也更好閱讀的，通常就是 CSS。
CSS 掌管了網頁上 所有的顏色、字體大小、排版佈局，甚至是 動態效果。它主要任務是 將「 內容 」與「 呈現方式 」分離，這讓網頁設計變得更加靈活且易於管理。
而 HTML、CSS、JavaScript 三者的分工你可這樣理解：HTML 負責結構，CSS 負責樣式，JavaScript 則負責互動與行為。
- HTML：定義網頁的「 結構 」（例如：這是一段文字、這是一張圖片）。
- CSS：定義網頁的「 樣式 」（例如：文字要變紅色、圖片要靠右對齊）。
- JavaScript：定義網頁的「 行為 」（例如：點擊按鈕後會跳出視窗）。
為什麼做網站要了解 CSS？
就算不是前端工程師，還是建議至少懂一點 CSS，因為在實際做網站時，你一定會遇到畫面相關的問題，例如文字太小、排版太擠、手機版跑掉、按鈕看起來不協調等。
如果沒有 CSS 基礎，很容易變成一直嘗試卻找不到原因；但只要有基本概念，你會更知道該從哪裡調整：
- 看懂網站樣式怎麼被控制：打開瀏覽器的開發者工具時，能清楚知道某個區塊的顏色或間距是由哪一行程式碼決定的。
- 修改版型、字體、間距時更有方向：要調整標題的大小，或是圖片與文字之間的距離會更有方向。
- 後續維護與溝通輕鬆很多：在與設計師或工程師溝通時，使用精準的專業術語（如 Margin、Padding 或 Line-height）大幅減少溝通成本，確保成品符合預期。
不想自己寫 CSS？你也可以找客製化網頁設計解決
當然，懂 CSS 不代表寫得出整個網站。CSS 真正困難的地方，不只是會寫幾個屬性，而是如何把版面、間距、層次與不同裝置的呈現都處理好。
如果你比較在意成果與效率，目標是做出一個有設計感、排版乾淨，甚至兼顧轉換與 SEO 的網站，直接找專業團隊做客製化網頁設計，通常會更有效率。
客製化設計兼顧實用性，成功強化網站曝光＆轉換率
對於像 Bosmos 這樣面向全球市場的品牌來說，網站不只是提供資訊，更是品牌體驗的一部分。
在這個專案中，犬哥在設計階段就把「 錯誤情境 」一起納入考量，就算使用者走到 404 頁面，體驗也不應該中斷，讓使用者可能迷路的地方，也有清楚的引導與一致的風格。
如果你也遇到類似的問題，與其自己慢慢試錯，不如交給犬哥的 SEO 與 客製化網頁設計 服務，把結構、技術與設計一起做好，讓 404 不再只是技術錯誤，而是能被留下的流量：）
開始寫 CSS 前，先認識最基本的語法規則
覺得 CSS 難，其實不是因為語法複雜，而是沒有先搞懂它的基本結構。
CSS 的核心邏輯很簡單，先指定「 要改什麼 」，再決定「 要怎麼改 」，最後確認「 改成什麼樣子 」。把這個概念理解清楚，後面看到大多數 CSS 程式碼時，就不會覺得陌生。
一段 CSS 是怎麼組成的？
先看一段最基本的 CSS：
這段程式碼包含了 CSS 最核心的幾個元素：選擇器、屬性、屬性值，以及基本語法結構。
選擇器（Selector）：h1
選擇器的作用，是 指定樣式要套用在哪些元素上（例如：h1, .btn, #header）。如果沒有選擇器，瀏覽器不知道要修改誰。常見的三種選擇器如下：
- 元素選擇器（Type Selector）：
直接指定 HTML 標籤名。這種方式會一次套用到所有相同標籤的元素，適合設定全站基礎樣式。例如：p 會影響頁面上所有的段落，h1 會影響主標題。
- 類別選擇器（Class Selector）：
以「 . 」點號開頭（例如 .btn、.title），可以幫 HTML 標籤取一個類別名稱（如 .btn-red），然後只針對這個類別設定樣式。這是最常用的選擇器，可重複使用。
- ID 選擇器（ID Selector）：
以半型的「 # 」字號開頭，它具備「 唯一性 」，通常用於網頁大區塊（例如 #header）。通常一個頁面只會出現一次，適合用在主要區塊。
屬性（Property）：color / font-size
代表想改變的是「 什麼 」。例如：color（顏色）、font-size（字體大小）、background-color（背景顏色）等。
屬性值（Value）：blue / 32px
代表想將屬性設定成「 什麼樣子 」。例如：color: blue; 中的 blue，或 font-size: 32px; 中的 32px。
宣告與分號、大括號的基本規則
宣告（Declaration）包含「 屬性 」與「 設定值 」，中間用冒號隔開，最後以分號結束。例如：「 color: red; 」、「 font-size: 18px; 」。
- 【 {} 】大括號：所有的宣告必須被包在一組大括號 { } 中，緊跟在選擇器後面。
- 【 : 】冒號：分隔屬性與值。
- 【 ; 】分號：每一條設定的結尾。
一段 CSS 要怎麼呈現？
我們直接從幾個簡單的例子開始。
- 文字顏色設定：
假設你想讓網頁中所有 h1 標題變成紅色，寫法如下：
h1 {
color: red;
}
- 一次選取多個元素的寫法：
用逗號分隔選擇器，就可以同時套用到多個元素，這樣可以減少重複程式碼，讓 CSS 更精簡。
h1, h2, p {
color: #333;
}
- 新手最常犯的語法錯誤：
- 漏掉分號：每一組宣告結尾如果沒加「 ; 」，後面的樣式通常會全部失效。
- 冒號與分號混淆：屬性與值之間是「 : 」，結尾才是「 ; 」，這是最容易寫反的地方。
- 括號未成對：忘了寫右大括號「 } 」是導致 CSS 檔案整個崩潰的常見原因。
當你發現寫了卻沒顯示效果，那可以先檢查這幾個地方，通常問題就會出在這裡。
CSS 要寫在哪裡？3 種常見寫法一次看懂
CSS 代碼到底要寫在哪裡？其實 CSS 不只有一種放法，常見的有 外部樣式表、內部樣式表 與 行內樣式 3 種。差別不只在寫法，也會直接影響到後續維護、擴充與協作效率。
一、外部樣式表（External CSS）：業界推薦作法
如果是正式網站、企業網站，或任何需要長期維護的專案，最推薦的通常都是外部樣式表，也是對 SEO 與網站讀取速度最友善的作法。
將所有 CSS 程式碼寫在一個獨立的 .css 檔案中（例如 style.css），接著在 HTML 的 <head> 區塊內使用 <link> 標籤將其引入。
優點：
- 程式碼最整潔： HTML 檔案專注於內容結構，樣式則交由外部檔案處理。
- 高效率維護：修改一個 CSS 檔案，就能同時改變全站數十個頁面的樣式。
- 瀏覽器快取：外部檔案會被瀏覽器暫存，當使用者切換頁面時，不需要重複下載，能有效縮短網頁開啟時間。
二、內部樣式表（Internal CSS）
這種方式適合用於「 單一頁面 」有特殊需求，且這些樣式不會在其他頁面重複出現時，對於測試、教學範例或單頁面調整來說很方便。
直接 將 CSS 代碼寫在 HTML 檔案中的 <style> 標籤內，通常放在 <head> 區塊。
僅針對單一特殊到達頁（Landing Page）或活動頁面進行樣式調整時，不需要額外建立 CSS 檔案。
三、行內樣式（Inline CSS）
這是把 CSS 直接寫進 HTML 標籤 本身的作法，這是最直覺的寫法，但通常也是最不建議大量使用的寫法。
直接在 HTML 標籤內加入「 style=”…” 」屬性，例如：<p style=”color: red;”> 這是一段紅色文字 </p>。
但這個方式 極度不建議大量使用，因為它的維護極其困難，且權重過高（會強行蓋過外部樣式表的設定）。
除非是為了快速測試或是透過 JavaScript 動態調整樣式，否則正式專案裡通常不會建議把它當主要寫法。
CSS 的核心觀念：「 權重 」與「 盒模型 」
在撰寫 CSS 的過程中，很容易遇到兩種情況：第一種是「 為什麼我改了沒反應？」，第二種是「 為什麼改起來版面還是那麼亂？」。
前者通常和 CSS 權重 有關，後者則大多和 盒模型 有關。只要把這兩個核心觀念搞懂，後面在調整樣式就會更上手。
CSS 權重是什麼？
CSS 權重（Specificity）指的是當多個樣式同時套用到同一個元素時，瀏覽器要怎麼判斷最後應該顯示哪一個，也就是優先順序。
權重排行通常是：
!important（最優先） > 行內樣式 > ID 選擇器 > 類別（Class）選擇器 > 元素標籤
也因為這樣，如果前面用的是很高權重的寫法，後面想用一般選擇器去覆蓋，常常就會改不動。
就近原則：權重相同時，後寫的樣式會覆蓋先寫的
如果兩條規則的權重一樣，瀏覽器就會採用後面出現的那一條。這也是為什麼有時候你明明寫了一樣的選擇器，但最後顯示的效果卻不是第一段，而是後面那段 CSS。
版面不亂的關鍵：盒模型（Box Model）
如果說權重是在解決「 樣式為什麼沒套上去 」，那 盒模型就是在解決「 元素到底佔多少空間 」。
在瀏覽器的眼中，網頁上的每一個元素（不管是標題、圖片還是按鈕），基本上都會被當成一個方框來處理，而這個方框就是「 盒模型 」的核心概念。
這個 盒模型 不是只有內容本身，還包含內距、邊框和外距，所以你看到的版面大小，通常不只是文字或圖片本身那麼簡單，由內而外可以分為以下：
- 內容（Content）：文字或圖片本身
Content 就是元素核心的內容區域，例如：段落裡的文字、圖片本身，或按鈕上的字。當你設定寬度、高度時，很多時候都是先從這個內容區開始計算。
- 內距（Padding）：內容與邊框之間的距離
Padding 可以把它想成元素自己的內部留白，讓按鈕裡的字不要貼邊，或讓區塊裡的內容看起來更舒服，通常就會用到 padding。
- 邊框（Border）：包在內容與內距外的一條線
Border 可以用來做區塊分隔、按鈕輪廓，或幫元素增加視覺層次，可以自由設定它的粗細、顏色與樣式（如實線或虛線）。雖然看起來只是一條線，但它也會算進元素整體佔用的空間。
- 外距（Margin）：盒子與盒子之間的距離
Margin 是元素和其他元素之間的外部距離。當你覺得兩個區塊貼太近、畫面很擠，多半就是要去調整外距，而不是就一直放大內距。
這也是很多新手最容易搞混的地方，內距（Padding）是自己裡面的空間，外距（Margin）是和別人之間的距離。
常用屬性清單：新手必備的 CSS 技能包
一開始學 CSS 不用急著背很多屬性，可以先把最常用、最容易直接看出效果的幾個學起來就好，像是文字、背景、區塊大小和排版方式等，很多基礎版面其實就已經做得出來。
最常用的文字與字體樣式
文字樣式通常是新手最早接觸的部分，因為它最直觀，也最容易立刻看到變化。像是改顏色、改字體大小、調整對齊方式，都是最常見的基本操作。
- color：設定文字顏色
當你想調整標題、內文、按鈕文字的顏色時，可以使用 顏色的名稱（如 red）、十六進位碼（如 #333333）或 RGB 值。
通常網站不會只用純黑，適度使用深灰或品牌色，也比較容易做出層次感。
- font-size：調整字體大小
像是主標題、段落內文、按鈕文字、註解小字，通常都會透過 font-size 去區分層級，建議使用 px 或 rem 作為單位，確保標題與內文有明顯的層級區分。
這個屬性看起來很基本，但其實會直接影響閱讀體驗，尤其在手機版上更明顯。
- text-align：控制文字對齊方式（靠左、置中和靠右）
常見的設定有 left（左對齊）、center（居中對齊）與 right（右對齊）。一般文章內文大多以靠左為主，標題、按鈕或某些 Banner 文案則可能會用置中。
背景與邊框如何美化？
當文字樣式設定完後，下一步通常就是讓區塊看起來更完整。這時候最常用到的，就是背景色和圓角效果。
- background-color：設定區塊背景顏色
像是卡片區塊、按鈕、提醒框、Banner 背景等，幾乎都會用到。這個屬性很適合拿來區分區塊層次，讓內容不會整頁看起來都黏在一起。
- border-radius：製作圓角效果（按鈕必備）
不管是按鈕、圖片還是卡片式佈局，加上一點圓角（如 border-radius: 8px;）會讓視覺感更加柔和，也更接近現代網站常見的視覺風格。
排版與空間調整，讓網站有設計感
如果說前面的屬性是在處理「 樣式 」，那現在就要來處理「 排版 」。如果覺得網站看起來很亂，可能就是區塊大小、排列方式或位置設定沒處理好。
- width / height：定義元素寬度與高度
圖片要多大、卡片區塊寬度要多寬、按鈕高度要多高，通常都會用到這兩個屬性。不過也要注意，很多時候高度不一定適合寫死，否則內容一變多，版面反而容易出問題。
- display：控制元素的顯示模式
影響元素怎麼被當成區塊或行內元素來處理，也會影響子元素的排版方式。例如：元素是否被視為 block 或 inline box，以及子元素採用哪種版面配置方式，例如 flow、grid 或 flex。
- block：元素通常會獨佔一整行（如 div, p）。
- inline：行內元素，只佔用必要的寬度，不會換行（如 span, a）。
- inline-block：不會獨佔一整行，但又可以設定寬高，算是介於兩者之間。
- flex：當父層設定「 display: flex; 」後，直接子元素就會變成 flex items，能輕鬆置中、平均分配空間等，是現代常用的排版方式。
- Position：設定元素的定位方式
元素的定位方式可以先這樣理解：
- static：預設狀態，照正常排列走。
- relative：元素還在原本的位置邏輯裡，但可以微調偏移。
- absolute：脫離正常文流，會依照定位參考點來擺放。
- fixed：同樣脫離正常文流，但會固定在視窗某個位置，捲動頁面時也不會跟著跑。
| 類別 | CSS 屬性 | 核心功能 | 實戰建議 |
|---|---|---|---|
| 文字與字體樣式 | color | 設定文字顏色 | 避開純黑，深灰色更有質感 |
| font-size | 調整字體大小 | 建立視覺層級，引導閱讀順序 | |
| text-align | 控制水平對齊 | center 常用於標題與 Banner | |
| 背景與邊框美化 | background-color | 設置區塊底色 | 區分內容層次，增加辨識度 |
| border-radius | 製作圓角效果 | 8px 是現代設計的「舒適圈」 | |
| 排版與空間調整 | width / height | 定義元素寬高 | 高度別寫死，內容才不會破版 |
| display | 轉換顯示模式 | flex 是處理排版與置中的神器 | |
| position | 設定定位方式 | fixed 用於固定在頂部的選單 |
CSS 怎麼寫響應式設計？手機版也要顧！
同一個頁面，現在的使用者可能會用手機、平板、筆電，甚至不同尺寸的螢幕來瀏覽，如果你的版面只在桌機上正常，到了手機卻文字太小、按鈕太難點、內容還要左右滑動，整體體驗就會很差。
Media Queries 是讓 CSS 能依照不同媒體特性或裝置條件切換樣式，而這就是 RWD（Responsive Web Design）響應式網頁設計 的基礎。
為什麼 RWD 這麼重要？
響應式設計（RWD）的核心，是要讓內容在不同裝置上都保持可讀、好操作、好理解。這不只影響使用體驗，也會影響搜尋表現。
- 行動裝置優先索引（Mobile-First Indexing）：Google 目前的預設機制，主要根據「 手機版網站 」的內容與體驗來決定你的關鍵字排名。
也就是說，手機版不只是附屬版本，而是 Google 評估網站的重要依據之一。如果手機版體驗不佳，桌機版的排名也會受拖累。
- 降低跳出率：在行動裝置上流暢的體驗能有效留住讀者，讓停留時間變長，這對 SEO 是非常有力的正向訊號。
沒人喜歡在手機上不斷「 兩指縮放 」或「 左右滑動 」找按鈕，當手機版閱讀困難、區塊超版、按鈕難按時，使用者通常很快就會離開頁面。
反過來說，版面清楚、文字大小適中、操作順手，通常更有機會把使用者留在頁面上。這不只是 UX 問題，也和內容能不能被好好消化有關。
用媒體查詢（Media Queries）寫出 RWD
媒體查詢 讓 CSS 具備了「 偵測螢幕環境 」的能力，它能根據不同的裝置寬度，自動切換合適的樣式規則，讓同一份 HTML 在不同裝置上呈現不同版面。
最常見的寫法，就是用 max-width 來設定條件，例如：透過「 @media screen and (max-width: 768px) 」告訴瀏覽器，當螢幕寬度小於 768px 時，請執行以下樣式。
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
這樣當裝置的寬度小於或等於 768px 時，.container 就改成撐滿寬度。這種寫法很常用在手機版調整，例如：讓多欄改單欄、縮小字體、增加按鈕可點擊範圍等。
主流斷點（Breakpoints）配置建議：
斷點沒有絕對標準，但實務上很多網站會先從常見裝置寬度去規劃。你可以先用這種基礎分法理解：
- 手機版（Mobile）：通常設定在 767px 以下
- 平板版（Tablet）：介於 768px 到 1023px 之間
- 桌機版（Desktop）：1024px 以上
這個分法比較像常見例子，不是 CSS 硬性的規定；重點是你的版面在切換時要合理、好讀、好操作。
固定寬度與彈性單位
要讓網頁真正具備彈性，就不要只用 px（像素），要使用「 相對單位 」，才能讓元件在不同尺寸的螢幕上「 等比例縮放 」。
想把 RWD 寫得更自然，除了 media queries，rem 是根元素字體大小，vh 和 vw 則分別是 viewport 的高與寬，這些相對單位比較容易跟著裝置環境調整，而不是全部寫死。
- 百分比（%）：相對於父元素的寬度
常用於側欄（Sidebar）或文章列表的欄位配置。例如設定寬度為 50%，無論螢幕多大，它永遠只佔一半。
- 視窗單位（vw / vh）：根據手機螢幕的寬高來決定大小
「 vw 」是 viewport 寬度的 1%，「 vh 」則是 viewport 高度的 1%。所以 100vw 就代表撐滿整個螢幕寬度，100vh 則代表撐滿整個螢幕高度。
這類單位很適合做滿版區塊、首屏 Banner 或 需要跟著視窗尺寸變動的元素。
- REM 單位：相對於根元素（html）的字體大小
確保你的文字與間距在不同裝置上保持完美的視覺比例，是現代前端開發的主流作法。
它非常適合拿來控制字級、間距與元件尺寸，因為整體比例比較容易統一，也比全部寫死 px 更有彈性。如果你想讓整份樣式更好維護，rem 通常會是很值得優先熟悉的單位。
如何寫 CSS？3 個實用建議
隨著網站規模變大，代碼的「 可維護性 」才是最重要的。與其追求寫得多快，不如先建立幾個正確習慣。只要養成這些基本功，後面不管是自己維護網站，還是和其他人協作，都會輕鬆很多。
以下整理 3 個實用建議，讓你能更有效率的寫 CSS：
一、維持程式碼的簡潔與可讀性
寫 CSS，雖然「 能跑出效果 」很重要，但 CSS 的簡潔和可讀性也不能忽略。若將來需要與他人協作，一個清楚的 CSS 才能讓你方便說明，其他人也好理解。
- 統一的縮排與格式：無論習慣用兩個空白還是四個空白，盡量保持全篇一致。
整齊的格式能讓你一眼看出選擇器與宣告之間的層級關係，後面要找問題、補樣式、調整區塊時，才不會越來越亂。
- 善用註解標記區塊：使用「 /* 導覽列樣式 */ 」或「 /* 手機版專用樣式 */ 」將程式碼分區，讓你透過關鍵字搜尋（Ctrl+F）快速定位到需要修改的位置。
當 CSS 變多之後，沒有分區真的很容易找不到位置，用註解把不同區塊先標清楚，例如：導覽列、頁尾、按鈕、手機版等，像下面這樣就很實用：
/* 導覽列樣式 */
.navbar {
background-color: #fff;
}
/* 手機版專用樣式 */
@media screen and (max-width: 768px) {
.navbar {
padding: 12px;
}
}
這樣你之後要搜尋某個區塊時，會快很多，也比較不容易改到不該改的地方。
- 邏輯化的排列順序：建議依照網頁結構，由上到下（Header 到 Footer）、由外到內（容器到元件）來撰寫 CSS 規則。
CSS 比較好的撰寫方式是 依照網頁結構去寫，例如：先寫 header、再寫 main、再寫 footer；或先外層容器，再寫裡面的標題、文字、按鈕。
這樣在看程式碼時，腦中比較容易對應到實際畫面，不會每次要找一個樣式，都像在翻雜物堆。
善用開發者輔助工具
現在很多工具本來就是拿來幫你加快開發、降低出錯率的，會用工具能幫你省下大量時間。
- VS Code：目前最好用的程式碼編輯器，具備語法自動補完功能。
VS Code 之所以很多人用，不只是因為它免費，而是它本身就有很完整的 編輯輔助。
像 IntelliSense 會提供 自動補全、參數提示、快速資訊和建議清單，當你輸入 col 時就會自動跳出 color 供你選擇，對寫 CSS 這種屬性很多、容易拼錯的情況特別有幫助。
- Chrome 開發者工具：直接在瀏覽器調整樣式並即時預覽效果，是除錯的好幫手。
Chrome DevTools 可以直接檢查頁面元素、查看套用了哪些 CSS 規則，並在瀏覽器裡即時修改樣式。
這代表你不用每改一次就回編輯器、存檔、重整，可以先在畫面上快速測試，再決定要不要正式寫進檔案。
尤其在排版跑掉、手機版怪怪的、某個樣式被蓋掉的時候，DevTools 是最快的排查工具。
重複樣式代碼集中管理
只要網站頁面一多，重複樣式沒有整理，越寫越難維護，後面通常就會很痛苦。
- 建立通用類別：設定一個如 .btn-main 的類別，統一管理按鈕的顏色與圓角。未來想換色時，你只需要修改一個地方，全站按鈕就會同步更新。
例如：按鈕如果都有相同的底色、圓角、字級，就可以整理成一個像 .btn-main 的通用類別。
- 合併相同屬性：減少多餘代碼，不僅讓 CSS 檔案體積更小、網頁載入更快。
重複代碼越多，CSS 檔案通常也會越肥。把相同的樣式集中、合併，不只可讀性會比較好，也能減少不必要的檔案體積，整體網站體驗也會更好，這對 SEO 當然是加分方向。
CSS 本身就是拿來描述文件呈現方式的語言，寫得越有結構，後續管理通常越有效率。
- 降低維護成本：養成「 模組化 」的思維，就不用一個一個修改元件，專注在更高層次的排版設計。
把會重複出現的東西，先當成可重用元件來整理，例如：按鈕是一個模組、卡片是一個模組、表單區塊也是一個模組。
當你開始用這種方式寫 CSS，後面調整只要改一個地方，就整體一起更新。這不只省時間，也會讓你的版面設計更一致。
常見問題
為什麼我寫了 CSS，網頁卻完全沒有變化？
通常有三個原因：
1. 選擇器名稱寫錯：例如 HTML 是 Class，CSS 卻用了 ID 符號。
2. 忘記在 HTML 中正確引入 CSS 檔案
3. 權重問題：你的樣式被其他更強的規則覆蓋掉了。
建議按 F12 檢查該元素，看看樣式是否被劃上了橫線。
新手應該先學 Flexbox 還是 Grid？
建議先從 Flexbox 開始。
它是目前最主流、支援度最高且最直覺的排版方式，能應付 90% 的網頁佈局需求。當你對一維空間的對齊有了掌握後，再進階學習處理二維佈局的 CSS Grid。
CSS 寫得太長會影響網站速度嗎？
會，但影響有限。
相比於大圖片，CSS 檔案通常很小。不過，過於複雜或冗餘的代碼，會增加瀏覽器的渲染負擔。建議「 重複樣式集中管理 」，就是最簡單的優化方法。
聯絡犬哥網站
在網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。
資源一：犬哥網站（專業 WordPress 網頁設計＆數位行銷公司）
如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站（WordPress 網頁設計＆數位行銷公司），請專家協助你會更容易！
我們有多年網頁設計、SEO 關鍵字行銷、Google 廣告投放經驗，加上上百個實戰案例，絕對能滿足您的需求！
資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）
如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？
可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！
- WordPress 高手架站課：
從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等豐富內容，一次教會你。
課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！ - SEO 排名飆升課：
教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等，大幅提升行銷能力。
帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！
