我們知道構成網頁的要素有三：「HTML、CSS、JavaScript」。其中，HTML可以說是一個網頁的核心骨幹。這個核心骨幹是透過一個個標籤（tag）來組成完整網頁需要的架構，包含內容與語意。
例如我們想要在網頁上標示一個標題的話，可以使用<h1>這個標籤來標示，標籤的結尾需要加上「/」斜線 </h1>，如果要標示次標題的話，則可以使用<h2>～<h6>各個標籤來標示不同的層級。雖然HTML本身呈現出來的樣子不怎麼吸引人，但它對於網頁本身來說卻是不可或缺的核心骨幹。
HTML的過去
早期學術界的科學家們為了與其他身處異地的同伴們分享技術性文件，而發明了網際網路（World Wide Web）。在當時並沒有人會想到，網際網路後來竟然會跟設計牽扯上關係。
科學家的需求很簡單，就是將技術文件條理分明、邏輯完整的顯示出來。他們使用<h1>～<h6>各個標籤表示不同重點等級的標題、透過<ol>表示有序列的清單、<ul>表示無序列的清單，並藉由<p>將文件段落分別清楚以及用<table>來畫資料表格。以讓文章呈現結構性並且易讀這一點來說，發明這些HTML標籤已經很夠了。
但是當網際網路開始被科學家以外的民眾使用之後，人們開始希望網頁看起來好看一些。於是，瀏覽器廠商則順勢推出<font>等標籤來滿足使用者個需要。<font>標籤的用途是替文字擦脂抹粉，可對文字添加顏色、大小和字體，但無法讓網頁更容易被理解。
設計師開始使用<font>標籤來裝飾文字，企圖讓網站更好看一些。並且搭配<table>標籤的使用來建立排版的欄位，並且把圖片與文字精準的放到不同的欄位中。原本設計用來顯示資料的表格（<table>）標籤已經偏離原來被設計出來的用途，變成設計師們進行網頁排版的工具。不久，設計師們甚至於將<table>標籤放入另一個<table>標籤裡面，組成像俄羅斯娃娃一般無止盡的巢狀結構。
透過設計師們這樣的「努力」，網頁果然看起來比原本科學家使用的純HTML好看多了。但在這同時，也犧牲了網頁原本要呈現易讀化的結構型文章的目的。
如果您曾經歷過那個年代，檢視當時的網頁原始碼，用圖片表示的標題、一下段落、一下文字、一下圖片的設計，應該很難看出一個頁面的完整資料。如果以現代的爬蟲軟體去爬取該網站，應該需要很多的努力，就算是取回來，資料應該也無法馬上看懂。
CSS的出現
CSS是一種樣式語言。它針對HTML提供不同的style樣式風格，可以用來修飾美化HTML頁面。
在CSS尚未出現它之前，修改網頁的樣式必須來回周遊在HTML標籤裡面修改樣式。網站的原始碼就像義大利肉醬麵一樣的麵與醬「你泥中有我、我泥中有你」無法分開。
CSS出現後，HTML可以將設計美化的責任轉交給CSS，自己則專心在最擅長的地方：處理結構化文章，使文章易於閱讀。讓HTML不只對於一般人，對於網路搜尋引擎等爬蟲機器也一樣易於讀取。
像這樣，就可以讓網站的內容與網站的外觀二者分離出來，這是一種觀念上的突破。一旦HTML只負責將文件內容結構話，而CSS負責修飾頁面外觀，產生了一個好處。那就是讓搜尋引擎可以找到該頁面真正的內容，正確的呈現在搜尋引擎的搜尋結果上。讓搜尋引擎的使用者可以找到真正想要的頁面。為什麼為這樣？那是因為前面提過網站在撰寫時，會使用很多的特殊標籤來裝飾頁面（例如：<font>標籤），這樣子導致頁面的原始碼變得非常的肥大，而搜尋引擎的爬蟲機器往往不會對整個網頁進行爬取的行為，一般只會爬取一定的長度的頁面，而該長度的計算方式不是以我們捲動瀏覽器的畫面上的高度作為標準，而是依照該網頁原始檔案裡面程式碼的行數來決定，這導致它無法找到該頁面真正的內容，搜尋引擎還沒爬到本文的位置就停了，搜集回來的卻是一堆裝飾性標籤。
建立CSS樣式
樣式，是用來描述網頁特定區域的規則。瀏覽器會將這些樣式套用在網頁中的標題、文字、圖片或其他網頁元素中。我們可以建立任何樣式來搭配HTML標籤。
透過撰寫CSS語法，可以對網頁進行排版，讓它分出各種區塊如「主視覺」、「內容」、「選單」等等，並且可以裝飾網頁，讓網頁產生繽紛的畫面，不再限於單調的文字與圖片的組合。
CSS語法基本上可以細分為下：
- 選擇器（Selector）
- 宣告區塊
- 屬性
- 值
CSS選擇器
每一個CSS樣式都需要由選擇器和宣告區塊兩個部分組成。其中宣告區塊包含了樣式的屬性與值，而選擇器則是用來告訴CSS，某個目標該賦予某個樣式。「選擇器」是用來決定套用的目標是哪一個，可以說是選擇目標的一個工具。
以下面的CSS來說，p 是選擇器；{ color: red} 則是宣告區塊。color是屬性、red是值。
p { color: red}以上是CSS的基本起手式。CSS選擇器的用法有很多，下面逐一說明：
類型元素選擇器 Type Selector
這種選擇器是用來賦予HTML標籤樣式的選擇器，是一種單純的選擇器（Simple Selector）。
如上面的例子，就是一個標準的類型元素選擇器。它可以套用在HTML頁面中所有段落的位置，讓每一個段落的文字呈現出紅色。
p { color: red}您也可以依樣畫葫蘆，透過這樣的套用方式我們可以將樣式套用在頁面中的標題，內文以及強調的地方。例如下面的例子，我們利用類型元素選擇器把樣式分別套用在h1、h3、p、strong等位置。這種選擇器很容易被找到，因為選擇器的名稱就是目標HTML標籤的名稱。例如h1選擇器，會將樣式套用在<h1>標籤上、h3選擇器，會將樣式套用在<h3>標籤上、p選擇器，會將樣式套用在<p>標籤上等等。
只要HTML頁面引入這支CSS腳本，就可以立即完成頁面的樣式套用。如果沒有CSS的協助，我們就需要透過<font>標籤，一個一個的包覆在需要的地方，這樣的過程會花費很多時間以及很多的程式碼，實在是事倍功半。
h1 {
color: blue;
font-size:26px;
}
h3 {
color: brown;
font-size:20px;
}
p {
color: black;
font-size:16px;
}
strong {
color: red;
font-weight:bold;
}下面的位置提供您自行測試玩玩。
類型元素選擇器雖然方便又直覺，但是它有一個缺點，那就是沒有辦法在同樣的標籤中區分出不同的樣式。比如說，我有兩個h1標籤，其中一個想要賦予它藍色的文字，而另外一個卻想要賦予它咖啡色的文字。這時候若只用到類型元素選擇器的話，是無法實現這樣的結果。這時候就需要搭配「類別選擇器」了。
類別選擇器
類別選擇器，又稱為Class選擇器。以class的名稱作為過濾標籤並套用樣式的方式。
<h1>這標題我想要套用藍色的文字</h1><h1>這標題我想要套用咖啡色的文字</h1>
以上面的問題來說，我們可以建立兩個樣式，分別為title-blue 與title-brown：
.title-blue {
color: blue;
font-size:26px;
}.title-brown {
color: brown;
font-size:26px;
}
並透過class屬性，將它們分別套用在兩個h1上面：
<h1 class="title-blue">這標題我想要套用藍色的文字</h1><h1 class="title-brown">這標題我想要套用咖啡色的文字</h1>
上面提供sandbox，大家可以試試。
類別選擇器不被限制於只能使用現存的HTML標籤，您可以隨心所欲的命名建立類別顯示器，並且套用在各處。
類別選擇器注意事項
在建立類別選擇器時要注意下面事項：
- 類別名稱必須以句點開頭。例如：
.title-blue、.copyright，但不需要將句點寫在套用的HTML上。 - 類別名稱的命名必須使用字元、數字、連字號和底線。例如：
.copyright、.title01、.title-brown、.title_01。 - 類別名稱的命名的開頭必須是字元。例如：類別名稱不可以是
.01title，只能命名為.title01。 - 類別名稱的可以分大小寫。例如：類別
.title-blue與.TITLE-BLUE是不同的。
類別選擇器的套用方式
你可以將建立好的類別選擇器套用在HTML上面的多個位置上。例如，您可以將 .title-blue 套用在<h1>標籤上，也可以套用在 <p> 或者是其他的標籤上面。
<h1 class="title-blue">這標題我想要套用藍色的文字</h1><p class="title-blue">這一個段落我想要套用藍色的文字，這一個段落我想要套用藍色的文字。</p>
此外，一個HTML上面也可以套用多個類別選擇器。例如在 <p> 標籤上面，我們套用了兩個類別選擇器的名稱，並且以空白分開兩者。
<p class="title-blue copyright">版權所有，翻印必究</p>基於這個特性，我們就可以充分的利用它來規劃我們的樣式表。目前前端框架非常的流行，如果看過Bootstrap這種前端框架的話，就會發現這框架在設計上充分利用了這個特性。舉例說明，下面是一個按鈕的例子。類別選擇器 .btn 是按鈕的基本樣式，如果我們需要藍色的按鈕，就套上 .btn-primary，若需要灰色的按鈕，就可以套上 .btn-secondary。若這個藍色按鈕想要讓他比一般小一點點，就再加上.btn-sm 的樣式；若這個灰色按鈕想要讓他比一般大一點點，就再加上.btn-lg的樣式。
<button type="button" class="btn btn-primary btn-sm">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>可以看出來，在樣式的設計上，先套用一個基本款的樣式，接這在依照個別需要分別套用其他的樣式，用以產生不同的效果。
ID選擇器
雖然與類別選擇器的使用方式很像，但是ID選擇器特別的地方在於可以用來辨識頁面中「獨特」的部分，用來提供JavaScript作為操作DOM的工具。
<h1 id="about">關於我們</h1>套用樣式的時候要在名稱前面加上井「 # 」字號。
#about {
color: blue;
font-size:26px;
background-color:#ccc;
}使用ID選擇器時必須注意，同一個名稱的ID選擇器在一個頁面上能出現一次，不可以同時出現兩個以上同樣名稱的ID選擇器。
後代選擇器
後代選擇器結合了類型選擇器的「精簡」以及類別選擇器與ID選擇器的「精準」，可以讓「特定標籤內的標籤」套用特定的樣式。例如在標題h1裡面我們可以針對某幾個字特別的提供其他的樣式。
h1 {
color:green
}h1 strong{
color:blue
}
HTML如下：將上面的樣式套用到下面的HTML標籤中，就可以得到一個綠色的標題，而其中「藍色」兩個字則呈現藍色。但是p標籤裡面的「強調」兩個字卻不會受到這個CSS規則的影響。
<h1>這標題我想要套用<strong>藍色</strong>的文字</h1><p>這一個段落我想要<strong>強調</strong>的文字。</p>
在寫後代選擇器時，可以結合不同種類的選擇器，產生各種不一樣的效果。例如：
ul li {
color: red;
}
.items li {
color: blue;
}
ul .task {
color: pink;
}
#section1 .task2 a {
color: green;
}可以交錯的使用類型元素選擇器、類別選擇器、ID選擇器等等，以及後面將提到的其他選擇器。
擬類別擬元素
雖然本身不是標籤，卻需要被定位時，可以使用「擬類別」和「擬元素」。
與超連結有關之擬類別
超連結<a>的樣式上面我們常常會使用擬類別來顯示不同的狀態。
// 尚未造訪的連結
a:link// 已經造訪過的連結
a:visited// 游標正移動在連結上
a:hover// 使用者正點擊連結時
a:active
我們可以分別為這四種狀態撰寫樣式表，套用不同的樣式。
// 尚未造訪的連結
a:link{
color:#000;
text-decoration: none;
}
// 已經造訪過的連結
a:visited {
color:#ddd;
}
// 游標正移動在連結上
a:hover{
text-decoration: underline;
}
// 使用者正點擊連結時
a:active{
text-decoration: underline;
}另外有一個很像:hover擬類別，當使用者做了一些行為（通常是使用tab鍵或者是透過滑鼠點擊）暗示他的注意力在頁面上的某一元素上時，會使用 :focus 擬類別。這個類別除了用在超連結<a>標籤外，實務上更常使用在input等輸入表匡的地方。例如下面的例子，當使用者的焦點移轉到input輸入表匡的時候，就會顯示出背景色以及匡線：
input:focus{
background-color: #ccc;
border:2px solid #555;
}上面的Sandbox裡面，我們使用Bootstrap的範例作為示範，修改了form-control的focus CSS樣式，大家可以試試看：
.form-control:focus {
color: blue;
background-color: #ccc;
border-color: red;
}與段落有關之擬類別
除了超連結外，也可以用在文字段落。例如 :first-letter 可以建立第一段的第一個字不同的樣式。而 :first-line 可以讓段落的第一行呈現不同的效果。
// 建立第一個字母
:first-letter// 讓段落的第一行呈現不同的效果
:first-line
在下面的Sandbox中，可以測試看看 first-letter與first-line的不同。
其他擬類別
以下的擬類別很特別，可以在選定的元素前方或後方加上一些內容。使用:before 可以將內容加在元素前方；使用:after則可以將內容加在元素後方。例如可以在套用hot類別的元素前方加上Hot Sales等字樣。
.hot:before{ content:"Hot Sales"}或者是套用在元素的後方。
.end:after{content:"＃"}屬性選擇器
屬性選擇器提供使用者根據HTML標籤的屬性來套用樣式。藉由屬性選擇器，可以過濾出具備特定屬性的標籤。例如：
img[title]{
border:1px solid #ccc
}可以過濾出帶有title屬性的img標籤。像下面的img元素，就會被上面的CSS選擇器過濾出來。
<img src="image.png" title="圖片" />例如下面的屬性選擇器可以選出網址帶有https開頭的<a>標籤：
a[href^="https://"] {
color:red
}或者是選出以.pdf 結尾的<a>標籤：
a[href$=".pdf"] {
color:red
}實務上比較常用的例子是在當我們替表單進行裝飾的時候，可以透過屬性選擇器來針對不同的輸入型態（type）給定不一樣的CSS。
input[type='text'] {
background-color:#ccc;
}子選擇器
子選擇器使用一個角括號（ > ）表示兩個元素間的關聯。例如下面的子選擇器：
nav > h1表示表示任何<nav>標籤內的<h1>子標籤。
子選擇器與後代選擇器不同。後代選擇器會將樣式套用在所有的後裔，包括特定標籤第一層的子標籤以及第二、第三層的孫標籤上面。而這裡的子選擇器則只會套用在特定標籤的第一層的子標籤上面。
萬用選擇器
又稱為「全局選擇器」，這個選擇器可以將樣式套用在頁面中的所有HTML標籤上。以星號（ * ）表示全局選擇器。例如：
* {
font-family: Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}一般來說，我們會使用萬用選擇器來設定頁面全局的基礎樣式，然後再透過其他的選擇器，來針對個別的部分進行細部的設定。
結語
以上列出了比較常用的CSS選擇器。選擇器可以鎖定網頁上面的HTML元素並吿知瀏覽器哪些頁面上的元素要套用哪種樣式。如果善加利用各種CSS選擇器的使用方式，便可以完全掌控頁面樣式，產出各式各樣不同變化的風格。