現在我們設計網頁已經離不開CSS，使用CSS可以美化我們的網頁，這已經是大家所共知的了！
CSS是“Cascading Style Sheets”的縮寫，譯為樣式表。HTML允許我們利用CSS來實現風格的顯示，舉個簡單的例子：我們可以使用<b>標籤來使頁面的字型加粗。如：
<b>網頁教學網加粗字型顯示</b>
如果你使我們使字型顯示為紅色、宋體、並且加粗顯示我們可以使用下面的代碼：
<font color="#FF0000" face="宋體"><strong>網頁教學網字型示範</strong></font>
這時我們觀察上面的代碼時我們發現網頁中的元素比較多了，當我們自己編寫時可能顯得很淩亂，這時我們該想有沒有一種方法使用的代碼比較少，而同時達到上面顯示的要求呢？回答是肯定的，這時我們就要用到CSS了。用CSS設定一種風格，設定好我們需要的特性，給它命名一個唯一的名字，然後儲存放在網站的其它地方，然後我們在編寫HTML時引用剛才的風格的名字就可以達到這種要求。如：
<p class="myNewStyle">網頁教學網的 CSS 風格文本</p>
然後在網頁的頭部<head></head>之間加上設定風格的代碼，如：
<style type="text/css">
<!--
.myNewStyle {
font-family: 宋體;
font-weight: bold;
color: #FF0000;
}
-->
</style>
如果你想使上面的CSS控制你的網頁的每個頁面，那麼我們複製粘貼上面的代碼就可以了，如果覺得比較麻煩或者說你覺得網頁的頭部很亂的話，我們也可以把CSS設定的風格單獨儲存為一個檔案(檔案的副檔名為.CSS)，之後我們在HTML直接引用那個儲存的檔案就可以引用樣式了。如你儲存的檔案的名字為：myFirstStyleSheet.css，那麼我們可以使用下面代碼來引用：
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
注意：上述代碼要放到HTML頁面的<head>地區內。
至於CSS的設定就在這裡不提了，我們可以專門開啟一個記事本，或使用專門的設計工具如DW等。
在編輯CSS注意不要再加上如下代碼了：
<style type="text/css">
</style>
我們在CSS檔案中只要設定CSS風格就行了，如：
.myNewStyle {
font-family: 宋體;
font-weight: bold;
font-size: 8pt;
color: #FF0000;
}
.my2ndNewStyle {
font-family: 宋體;
font-weight: bold;
font-size: 9pt;
color: #FF0000;
}
.my3rdNewStyle {
font-family: 宋體;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
然後直接儲存為副檔名為css的檔案就行了(如：myFirstStyleSheet.css)
最後我們在HTML代碼的BODY地區內加入如下代碼就可以引用我們的設定了：
<p class="myNewStyle">網頁教學網CSS字型顯示1</p>
<h2 class="my2ndNewStyle">網頁教學網CSS字型顯示2</h2>
<h3 class="my3rdNewStyle">網頁教學網CSS字型顯示3</h3>
我們在上面的代碼中用到了<h2>標籤，我們在CSS中也可以直接對標籤進行風格的定義：
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
然後我們就可以直接在代碼中加入：
<h1>網頁教學網CSS字型顯示2</h1>
那麼同樣按我們設定的風格來顯示。
我們也可以對其它的標籤設定風格，舉個例子：我們對整個頁面的邊框進行設定：
body { margin-left: 15%; margin-right: 15%; }
我們也可以對DIV標籤進行設定：
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}
在HTML代碼中只要在 <div>和</div>之間的內容將都按上述的風格進行顯示。
最後在舉個例子，關於超級串連的變色：
.a:link { color: rgb(0, 0, 153) } /* 未訪問串連的情況 */
.a:visited { color: rgb(153, 0, 153) } /* 訪問串連之後的串連 */
.a:hover { color: rgb(0, 96, 255) } /* 滑鼠盤旋的狀態 */
.a:active { color: rgb(255, 0, 102) } /* 串連啟用的狀態 */
然後在HTML代碼中加入：
<a href="http://www.webjx.com">網頁教學網</a>
上述代碼可以按我們設定的風格顯示。
最後給大家擴充一下，因為最近總有網友在論壇中問，如何使在同一頁面的串連不同呢？我們接最後這個例子給大家介紹一下。這時我們需要設定CSS的另一種風格：
.a1:link { COLOR: #ff0000; TEXT-DECORATION: underline }/* 紅色、有底線*/
.a1:hover { COLOR: #ff0000; TEXT-DECORATION: underline }
.a1:visited { COLOR: #000000; TEXT-DECORATION: none }/* 黑色、無底線*/
.a1:active { COLOR: #0000ff; TEXT-DECORATION: none }
然後在HTML代碼中加入：
<a href="http://www.webjx.com">網頁教學網</a>
<a href="http://www.webjx.com" class="a1">網頁教學網</a>
就會出現兩種串連效果了。
CSS在我們設定網頁時功能是非常強大的，希望大家在製作網頁時要熟練的運用，以使我們的頁面更加漂亮和統一。在本站有好多關於CSS的教材希望大家好好研究吧！希望這篇文章能起到畫龍點睛的作用。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
