CSS是什麼？跟SEO有相關嗎？和HTML、JavaScript的關聯？不只是前後端需要了解CSS，除了工程師，就連SEO從業人員也一定要稍微了解CSS。所以本篇文章主要想來分享一下CSS的一些簡易基礎知識，歡迎繼續閱讀跟我一起了解CSS是什麼，以及CSS有哪些樣式可以設定吧！
〈延伸閱讀：好的SEO網站架構是什麼？這樣做SEO成功率才會高！〉
CSS是什麼？做網站為什麼一定會碰到CSS？
CSS全名為「Cascading Style Sheets」，中文稱為「層疊樣式表」或「串接樣式表」。是網頁設計中很重要的核心技術之一，另外兩者是HTML、JavaScript。HTML是網站的「骨架」，用來設定標題、段落、圖片位置等；而CSS則是網站的「皮膚」，用來設定版面間距、文字顏色大小等各種樣式；JavaScript就是「肌肉」，是讓畫面可以改變、移動、互動的存在，而不是死死的一張網頁。
所以其實三者缺一不可，只有瀏覽器預設的HTML樣式，網站將會極為簡陋且不適合閱讀，講直白一點，就是不會符合現代人的美感。若是缺乏 CSS樣式的設計，所有網站看起來將會大同小異，無法建立品牌形象。
〈延伸閱讀：什麼是XML? 跟HTML有什麼不一樣？〉
〈延伸閱讀：什麼是 Javascript? 網站設計常用哪些 JavaScript 功能？〉
開始寫CSS前要準備什麼？
想要開始寫CSS，不需要準備太複雜的設備，只要有電腦與正確的軟體工具即可。但同時也要了解CSS的運作邏輯：「後寫的會蓋掉先寫的，越貼近元素本身的設定優先權越高。」
瀏覽器讀取程式碼是從第一行往下讀到最後一行，如果針對同一個標題，前面寫紅色、後面寫藍色，最後顯示的一定是藍色。另外，同一個元素上，寫在標籤裡面的 style=""（行內樣式），會蓋掉寫在 <style> 裡或外部 CSS 檔案的設定，樣式寫在哪、先後順序如何，會直接決定網頁最後的長相。
編輯器（Code Editor）
只要能編輯文字的編輯器都可以用，像是電腦內建的記事本也可以，但為了效率與除錯的方便性，建議使用專業的程式碼編輯器，像是Visual Studio Code (VS Code)，VS Code會有語法顏色標示，打錯字還會變色提醒，也會自動帶出屬性建議，能夠大幅減少寫錯程式碼的機率，是專業工程師的必備工具。
瀏覽器（Browser）
推薦使用Google Chrome，Chrome內建了非常強大的「開發者工具（DevTools）」，按一下F12就能打開。這個工具可以直接看到網頁上的每一個元素是用什麼CSS寫的，甚至可以直接在上面試改樣式、調整大小，是解決版面跑版問題的神器。
一段CSS長什麼樣子？CSS基礎語法入門
一段標準的CSS規則（Rule Set）結構如下：
選擇器 {
屬性: 值;
屬性: 值;
}
-
選擇器：要改的那個東西（例如：標題 h2、p）。
-
屬性：要改什麼特徵（例如：顏色 color、字體大小font-size）。
-
值：改成什麼樣子（例如： red、16px）。
記得使用｛｝包住，並且在每一行寫完都要加上分號「 ; 」，這是最容易忘記的地方，少了一個分號，後面的樣式可能就會全部失效。
最常見的三種選擇器：標籤、class、id
想要精準控制網頁元素，得先學會這三種抓取元素的方式：
-
標籤選擇器：直接抓 HTML 標籤。例如寫 p { color: black; }，網頁裡所有的段落文字都會變黑色。這範圍太大，通常只用來設定全站最基礎的樣式。
-
class 選擇器（類別）：是CSS最常用的選擇器，在 HTML 裡幫元素取個分類名 class="title"，CSS 裡就寫 .title，一個 class 可以重複用在很多不同元素上，方便管理，程式碼也比較乾淨。
-
id 選擇器：在 HTML 裡寫 id="header"，CSS 裡寫 #header，id 就像身分證字號，一個頁面裡只能出現一次，不能重複，id選擇器限制多，通常只會用在獨一無二的區塊，像是最上方的選單列。
寫好的CSS放哪裡？一開始就要決定好！
寫好的CSS 有三個位置可以放，放哪裡很關鍵，不但會影響後續好不好修改，也會直接影響網站開啟的速度，以下是CSS的主要有三種放置方式，搭配範例說明讓你可以更清楚。
CSS寫法1：外部樣式表（External Stylesheet）
這是最標準也最推薦的做法，將所有樣式規則寫在一個副檔名為 .css 的檔案裡（例如 style.css），再透過 HTML 的 <link> 標籤帶入這個檔案。
這樣做的好處是瀏覽器會把這個檔案「存起來」（快取），當使用者點閱網站的其他頁面時，不需要重新下載樣式檔，網站速度會變快，網站載入速度快、效能比較高分，Google 給的SEO分數自然就會比較高。
CSS寫法示範： 在 HTML 的 <head> 裡面加上這一行
<link rel="stylesheet" href="style.css">
在 style.css 檔案裡寫：
H2 {
color: blue;
font-size: 24px;
}
CSS寫法2：內嵌樣式（Internal Stylesheet）
內嵌樣式寫法是將CSS寫在 HTML 檔案的 <head> 區塊內，使用<style> 標籤把樣式碼起來，這種寫法通常用在「只有這一個頁面需要樣式」，不需要跟其他頁面共用的情況，這種寫法具備彈性與靈活，根據不同頁面進行不同的微調。
CSS寫法示範： 直接寫在 HTML 檔案裡
<head>
<style>
body {
background-color: #f0f0f0;
}
.main-content {
width: 80%;
}
</style>
</head>
CSS寫法3：行內樣式（Inline Styles）
直接寫在 HTML 的標籤上面，透過 style 屬性來控制。這種寫法的方式比較繁瑣且複雜，需要針對每一段進行設定，也因為樣式跟結構混在一起，日後如果想要修改會非常麻煩，也會讓 HTML 檔案看起來沒有那麼乾淨。對 SEO 來說，過多的程式碼會讓爬蟲讀起來比較費力，除非是 JavaScript 動態控制或萬不得已的情況，建議可以盡量避免，個人推薦可以使用第二種內嵌方式，統一寫在一起，也比較方便修改。
CSS寫法示範：直接寫在標籤
<p style="color: red; font-weight: bold;">
這是一段紅色文字的CSS示範
</p>
如何寫CSS？先了解CSS的網頁樣式
開始寫CSS程式碼之前，建議先熟悉「網頁樣式架構」的基本元素，其中包含了控制版面結構的「盒模型」，以及決定視覺呈現的「文字與顏色設定」…，下面會介紹常見的樣式元素。
什麼是盒模型？
什麼是盒模型？就是讓區塊不要擠在一起的模組(模型)，網頁上的每一個圖片，每一段文字，在瀏覽器的邏輯裡都是長方形的盒子(模型)，要排版就要先搞懂這個「盒子」的構造，就是「盒模型（Box Model）」，一個標準的CSS從內到外分為四層。
第一層Content（內容）
內容是CSS最重要的部分，用來顯示文字、圖片。
第二層：Padding（內距）
可以設定內容跟邊框之間的留白，希望按鈕大一點，文字不要貼邊框可以調整這裡。
第三層Border（邊框）
邊框可以設定粗細與顏色，是盒子的邊緣線條。
第四層Margin (外距)
定義盒子跟其他元素之間的距離。想讓兩個區塊分開，不要黏在一起，就是使用這個屬性。
Margin與Padding的使用時機
很多時候版面看起來很擠，或是位置不對勁，通常是這兩個屬性混淆了。這裡有一個簡單的判斷原則：「自己內部的空間用 padding，跟別人的距離用 margin」。設定得宜，版面才會清爽，使用者的閱讀體驗才會舒服。
文字與顏色：讓網頁看起來舒服又美觀的關鍵
網站如果字太小、顏色太淡，使用者看得不舒服，看不了太久就會離開，網站的高跳出率對SEO是很大的傷害，如果有好的CSS設定美觀、整體的文字與顏色，網站質感與使用者體驗就會不一樣，對網站的整體印象絕對是加分的。
-
font-size（字體大小）：font-size就是在設定字體的大小，不同標題的文字要有固定的大小字體之分，大小字要設定良好的字距，閱讀起來會比較舒適且明確。
-
line-height（行高）：設定行與行之間的距離。這是讓長篇文章變好讀的關鍵，通常設定在字體大小的 1.5 倍左右最剛好，避免字與字上下黏在一起。
-
letter-spacing（字元間距）：設定字與字左右的距離。在標題或大字設計時，稍微把字拉開一點，視覺質感會立刻提升。
常用單位速解有哪些？px、rem與%的差異
寫CSS的時候，數值單位跟屬性名稱一樣關鍵。先弄清楚px、%還有rem的差別，才能精準還原設計稿，不會寫出跑版的網頁。
px（像素）
px是絕對單位，最直觀也最死板。 寫下16px就是16像素，不會因為螢幕解析度不同而改變。 這特性適合設定邊框粗細，或是固定的裝飾圖案。 但在手機瀏覽時px常常會顯得太小，也無法跟隨瀏覽器設定自動縮放，閱讀體驗比較差。
rem（相對單位）：相對於根元素
rem是目前的主流，數值跟著網頁根元素跑。 根元素html設定多少，rem就以那個數字為基準倍數。這種做法讓網頁能配合使用者的瀏覽器設定自動調整大小，符合無障礙網頁規範，SEO分數也比較高。 文字大小跟間距很適合用rem。
%（百分比）：相對於父元素
%是相對單位，比例依照上一層容器的大小來決定。 要做RWD響應式網頁一定會用到。 設定寬度50%，區塊就會佔容器的一半，不管螢幕變寬變窄都一樣。 流動版面Fluid Layout主要就是靠百分比在控制。
CSS 常用樣式功能總表
上述介紹了幾種常見的CSS撰寫會用到的資訊，那以下是整理出來的關鍵屬性，方便你快速查詢、對照使用的比較表：
CSS樣式大全表格
| CSS屬性/概念 | 中文名稱 | 功能描述 |
|---|---|---|
| padding | 內距 | 內容與邊框之間的空間 |
| margin | 外距 | 區塊與區塊之間的距離 |
| border | 邊框 | 盒子的外框線條 |
| display | 顯示模式 | 決定元素是區塊、行內或彈性盒 |
| font-size | 字體大小 | 決定文字顯示的大小 |
| font-weight | 字體粗細 | 設定文字粗體 |
| width / height | 寬度/高度 | 決定盒子的大小 |
| text-align | 文字對齊 | 靠左、置中或靠右 |
| line-height | 行高 | 文字行與行之間的垂直距離 |
| color | 文字顏色 | 設定文字的顏色 |
| background | 背景 | 設定背景色或圖片 |
| width / height | 寬度 / 高度 | 設定元素的尺寸 |
| max-width | 最大寬度 | 限制元素最寬不能超過多少 |
| float | 浮動 | 讓元素靠左或靠右，文字會繞著它 |
| clear | 清除浮動 | 解除 float 造成的影響 |
| border-radius | 圓角 | 讓方塊變成圓角或圓形 |
| box-shadow | 陰影 | 替元素加上陰影 |
（手機版表格可左右滑動）
RWD響應式設計入門
網站的行動裝置流量比桌機高很多，RWD（Responsive Web Design，響應式網頁設計）可以子適應載體大小，RWD早就是網站設計的標準配置，Google早就宣布沒有RWD的網站，將會嚴重影響SEO排名。
〈延伸閱讀：RWD響應式設計的製作特點〉
〈延伸閱讀：RWD網頁設計是什麼意思？〉
RWD為什麼可以自動調整網站大小？
RWD 網站設計可以做到「一個網站，適應所有裝置」，就是因為透過使用CSS 技術，CSS 讓網頁能偵測使用者的螢幕寬度，自動調整圖片大小、文字級距與版面配置。舉例來說：RWD三個欄位的網站內容在桌機看是左右三格，但換到手機看網站時，RWD就會自動排列成「單欄式由上而下的佈局」，RWD會自動重新排列網頁資料。
RWD實作: 媒體查詢(Media Queries)
語法如下：
@media (max-width: 768px) {
.column {
width: 100%;
}
}
程式碼說明：
「當螢幕寬度小於或等於 768px（平板、大銀幕手機），將 .column 類別寬度設定為 100%」就可以將不同尺寸的裝置調整到「最佳化大小顯示」。
養成寫CSS的好習慣，從一開始就幫自己省麻煩
CSS程式碼寫得有點亂，當下可能會覺得沒差，但如果過了兩個月要修改時就會非常痛苦。建議你養成兩個簡單的寫CSS好習慣，如此一來可以大幅降低維護成本，也能避免網站因為程式碼太髒亂而變慢。
CSS好習慣1：命名要可以看名字就要知道它是做什麼的
命名最忌諱用 .box1、.div2 這種毫無意義的代號，或是直接用顏色來命名（如 .red-button）。
可以思考看看為什麼不建議用顏色？如果哪天設計改版要變成「藍色」，結果程式碼還叫 .red-button，這樣將會造成維護上的大混亂，後續在使用時，也會有疑慮。
因此最好的方式是根據「功能」來命名。例如使用.btn-submit（送出按鈕）。不管外觀顏色怎麼變，它的功能永遠不會變。這不僅方便團隊接手，也讓搜尋引擎爬蟲在理解網頁結構時，可以透過有意義的class名稱稍作輔助判斷。
CSS好習慣２：善用註解分區，把幾千行的程式碼變成「有目錄的書」
隨著網站功能增加，CSS 檔案很容易就會突破上千行。如果沒有整理，要找一個按鈕樣式可能得花上好幾分鐘滑鼠滾輪。
建議多善用 CSS 的註解功能： /* 這裡是頁首 */。
把 Header、Footer、關於我們、產品列表等不同區塊的程式碼分開標示，就像幫書本加上目錄一樣，要找哪一區直接跳過去，在找尋時更快速方便，省下找尋的時間，結構清晰的程式碼，未來比較容易維護，也可以避免寫出重複語法，讓檔案可以輕量化，讓網站載入速度（PageSpeed）更快，拿到更高的分數。
CSS跟SEO的關係！看得懂的版面，才有機會排得前面
別以為操作SEO只是塞塞關鍵字就可以排上搜尋引擎的前幾名，網站的「體質、架構」好不好更是重要，而其中CSS就佔了很大的因素。搜尋引擎的目標是提供使用者「最佳的搜尋體驗」，而CSS正是打造優質體驗的關鍵。
排版清楚、內容易讀，搜尋引擎也比較喜歡
CSS 排版混亂，導致文字重疊、按鈕太小無法點擊、廣告遮擋主要內容，都會被google演算法判定為「使用者體驗不佳」進而影響排名。 透過 CSS 可以建立明確的標題 H1、H2、H3...，易於辨識的標題能幫助搜尋引擎快速理解網頁內容的重點。
RWD、行動版體驗與基本速度觀念
搜尋引擎最重視的就是「手機版」的表現，網站沒有針對手機的CSS 進行響應式優化(RWD)，像是「版面跑版」、「字體過小」、「點擊位移」，對網站都會有結構上的扣分， CSS 寫法也會影響 Google 「網站核心指標（Core Web Vitals）」：
-
LCP（最大內容繪製）：載入順序錯誤，造成網站第一個最大檔案拖慢顯示速度， LCP 分數就會很低。
-
CLS（累計版面位移）：若圖片或區塊未設定好寬高，載入時畫面會跳動，這會嚴重扣分。
〈延伸閱讀：RWD網頁設計並沒有都一樣！〉
〈延伸閱讀：PageSpeed Insights (PSI) 是什麼？ 對SEO有影響？〉
用CSS補強，不要用CSS把重要內容「藏」起來
在 SEO 操作中，絕對要避開一種被視為作弊的「黑帽手法」：利用 CSS 將關鍵字文字設定為 display: none（隱藏）或將文字顏色設定為與背景相同。這種試圖欺騙爬蟲的行為，一旦被演算法偵測到，網站將面臨嚴重的懲罰甚至被從搜尋結果中除名。
正確的SEO策略，是利用CSS讓重要資訊在視覺上更吸引人，引導使用者閱讀與互動，進而提升停留時間與轉換率，這才是運用CSS技術提升排名的正途。而達文西數位科技只做正確的SEO策略、經營，我們絕不操作黑帽SEO來獲取短暫的流量與排名。
〈延伸閱讀：黑帽SEO不可行，被Google抓到很嚴重啊〉
讓專業能力，成為你經營SEO的強力助攻！
一個優秀的網站必須兼具「好看」與「好用」，CSS決定了網站的視覺高度，SEO決定了網站的市場能見度。如果說CSS是網站完美的「皮膚」，那麼專業的SEO策略與經營就是讓這層皮膚在市場聚光燈下被看見的關鍵。
如果你有網站設計的需求，歡迎與達文西數位科技聯繫，我們有豐富的網站設計經驗、極具美感的風格設計、專業的SEO策略規劃，可以幫助你從網站規劃設計到上線經營，讓你排上在競爭激烈的市場，保有一席之地。
〈延伸閱讀：SEO是什麼？SEO怎麼做？教您如何過濾SEO公司，保證有用〉
〈延伸閱讀：網站設計最重要的10件事，網頁設計公司不會告訴你實話〉
(本文為達文西數位科技所有，嚴禁轉載圖文)
