一．CSS基本介紹
級聯樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱爲“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。比如，如果想讓鏈接字未點擊時是藍色的，當鼠標移上去後字變成紅色的且有下劃線，這就是一種風格。通過設立樣式表，可以統一地控制HTML中各標誌的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及創建特殊效果的能力。
CSS是英語CascadingStyle Sheets（層疊樣式表單）的縮寫，它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS目前最新版本爲CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人羣，有較強的易讀性。
二．CSS的使用方法
有三種方法可以在站點網頁上使用樣式表：
外部樣式：將網頁鏈接到外部樣式表。
內頁樣式：在網頁上創建嵌入的樣式表。
行內樣式：應用內嵌樣式到各個網頁元素。
每一種方法均有其優缺點：
當要在站點上所有或部分網頁上一致地應用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，並將它們鏈接到所有網頁，便能確保所有網頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中修改一次，而該更改會反映到所有與該樣式表相鏈接的網頁上。通常外部樣式表以 .css 做爲文件擴展名，例如牛腩新聞發佈系統中的公共樣式Common.css。然後在需要此樣式的頁面中將其鏈接進來，如：
<link href="/css/Common.css"rel="stylesheet" type="text/css"/>
當人們只是要定義當前網頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯樣式表，“嵌”在網頁的 <HEAD>標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。 如：
<style type="text/css"><!-- /* 把聲明的樣式包含在一個html註釋中，這樣可以解決較老的瀏覽器不識別style的問題 */
body {background:grey;}
</style>
使用內嵌樣式以應用級聯樣式表屬性到網頁元素上。如：
<pstyle="@importurl('style3.css');">CSS document</p>
<!-- 不能在style屬性中使用@import -->
如果網頁鏈接到外部樣式表，爲網頁所創建的內嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。
要在網頁上使用外部樣式表的樣式，可將該網頁鏈接到樣式表，方法是使用位於 “格式” 菜單上的 “樣式表連接” 命令。可以鏈接一個或數個樣式表到網頁視圖模式下的當前網頁，或到在文件夾列表中的所選網頁，或到站點上的全部網頁。
該“樣式” 框列出標準 HTML 標記符，例如標題
1，還有嵌入的樣式表或鏈接到網頁的外部樣式表中所含的類或 ID 選擇器。要應用樣式到網頁元素，請選定該樣式然後單擊 “樣式” 框中的樣式或選擇器。
在 Microsoft FrontPage 2000中，某些格式設置特性會作爲內嵌樣式自動應用。例如∶如果使用 “邊框與陰影” 命令（在 “格式” 菜單上）在普通段落周圍應用框，FrontPage 會寫下格式設置信息，作爲段落標記符的內嵌樣式屬性（例如∶ <pstyle="border-style: solid">）。然而某些屬性的應用需要使用 CSS，其他則需要使用 HTML 。如果人們只想使用 CSS 應用內嵌樣式，可使用 “樣式”按鈕（位於網頁元素的 “屬性” 對話框裏）應用類或 ID 選擇器或嵌入式樣式。
三、CSS文字屬性：
color: #999999; /*文字顏色*/
font-family: 宋體,sans-serif; /*文字字體*/
font-size: 9pt; /*文字大小*/
font-style:itelic;/*文字斜體*/
font-variant:small-caps;/*小字體*/
letter-spacing: 1pt; /*字間距離*/
line-height: 200%; /*設置行高*/
font-weight:bold;/*文字粗體*/
vertical-align:sub;/*下標字*/
vertical-align:super;/*上標字*/
text-decoration:line-through;/*加刪除線*/
text-decoration:overline;/*加頂線*/
text-decoration:underline;/*加下劃線*/
text-decoration:none;/*刪除鏈接下劃線*/
text-transform: capitalize; /*首字大寫*/
text-transform: uppercase; /*英文大寫*/
text-transform: lowercase; /*英文小寫*/
text-align:right;/*文字右對齊*/
text-align:left;/*文字左對齊*/
text-align:center;/*文字居中對齊*/
text-align:justify;/*文字分散對齊*/
vertical-align屬性
vertical-align:top;/*垂直向上對齊*/
vertical-align:bottom;/*垂直向下對齊*/
vertical-align:middle;/*垂直居中對齊*/
vertical-align:text-top;/*文字垂直向上對齊*/
vertical-align:text-bottom;/*文字垂直向下對齊*/
四、CSS符號屬性：
list-style-type:none;/*不編號*/
list-style-type:decimal;/*阿拉伯數字*/
list-style-type:lower-roman;/*小寫羅馬數字*/
list-style-type:upper-roman;/*大寫羅馬數字*/
list-style-type:lower-alpha;/*小寫英文字母*/
list-style-type:upper-alpha;/*大寫英文字母*/
list-style-type:disc;/*實心圓形符號*/
list-style-type:circle;/*空心圓形符號*/
list-style-type:square;/*實心方形符號*/
list-style-image:url(/dot.gif);/*圖片式符號*/
list-style-position:outside;/*凸排*/
list-style-position:inside;/*縮進*/
五、CSS背景樣式：
background-color:#F5E2EC;/*背景顏色*/
background:transparent;/*透視背景*/
background-image: url(/image/bg.gif); /*背景圖片*/
background-attachment: fixed; /*浮水印固定背景*/
background-repeat: repeat; /*重複排列-網頁默認*/
background-repeat: no-repeat; /*不重複排列*/
background-repeat: repeat-x; /*在x軸重複排列*/
background-repeat: repeat-y; /*在y軸重複排列*/
指定背景位置
background-position: 90% 90%; /*背景圖片x與y軸的位置*/
background-position: top; /*向上對齊*/
background-position: buttom; /*向下對齊*/
background-position: left; /*向左對齊*/
background-position: right; /*向右對齊*/
background-position: center; /*居中對齊*/
六、CSS連接屬性：
a/*所有超鏈接*/
a:link/*超鏈接文字格式*/
a:visited/*瀏覽過的鏈接文字格式*/
a:active/*按下鏈接的格式*/
a:hover/*鼠標轉到鏈接*/
鼠標光標樣式：
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問號 cursor:help
箭頭朝左 cursor:w-resize
箭頭朝上 cursor:n-resize
箭頭朝右上 cursor:ne-resize
箭頭朝左上 cursor:nw-resize
文字I型 cursor:text
箭頭斜右下 cursor:se-resize
箭頭斜左下 cursor:sw-resize
漏斗 cursor:wait
光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}
七、CSS框線一覽表：
border-top: 1px solid #6699cc; /*上框線*/
border-bottom: 1px solid #6699cc; /*下框線*/
border-left: 1px solid #6699cc; /*左框線*/
border-right: 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用常規的方式 如下:
border-top-color: #369 /*設置上框線top顏色*/
border-top-width:1px /*設置上框線top寬度*/
border-top-style: solid/*設置上框線top樣式*/
其他框線樣式
solid/*實線框*/
dotted/*虛線框*/
double/*雙線框*/
groove/*立體內凸框*/
ridge/*立體浮雕框*/
inset/*凹框*/
outset/*凸框*/
八、CSS表單運用：
文字方塊 <input type="text" name="T1"size="15">
按鈕 <input type="submit" value="submit"name="B1">
複選框 <input type="checkbox" name="C1">
選擇鈕 <input type="radio" value="V1" checkedname="R1">
多行文字方塊 <textarea rows="1" name="S1"cols="15"></textarea>
下拉式菜單 <select size="1" name="D1"><option>選項1</option>
<option>選項2</option></select>
九、CSS邊界樣式：
margin-top:10px;/*上邊界*/
margin-right:10px;/*右邊界值*/
margin-bottom:10px;/*下邊界值*/
margin-left:10px;/*左邊界值*/
十、CSS邊框空白
padding-top:10px;/*上邊框留空白*/
padding-right:10px;/*右邊框留空白*/
padding-bottom:10px;/*下邊框留空白*/
padding-left:10px;/*左邊框留空白*/
十一、滾動條樣式
Scrollbar-face-color:#f3f3f3;/*滾動條凸出部分的顏色*/
Scrollbar-highlight-color:#f1f1f1/*滾動條陰影部分的顏色*/
Scrollbar-shadow-color:#fcfcfc/*立體滾動條陰影顏色*/
Scrollbar-3dlight-color:#fcfcfc/*滾動條亮邊的顏色*/
Scrollbar-arrow-color:#34837/*上下按鈕上三角箭頭的顏色*/
Scrollbar-track-color:#fcfcfc/*滾動條的背景顏色*/
Scrollbar-darkshadow-color:#66c0f4/*立體滾動條強陰影顏色*/
Scrollbar-base-color:#fcfcfc/*滾動條的基本顏色*/