CSS全名為Cascading Style Sheet。層疊式樣式表。
一、CSS的四種實作方式：
1.內嵌式：
2.外鍊式：
3.導入式
4.屬性式：
二.CSS的定義：
選擇物件{屬性1:值1;屬性2:值2;屬性3:值3;屬性n:值n…}
如：
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
三.四種選擇對象
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊物件(a:hover a:link a:visited a:active)
1.HTML selector
HTML selector就是HTML的置標符，如：DIV、TD、H1。 HTML selector的作用範圍是套用了該樣式的所有頁面中的所有該置標符。
例：
td
{
color: #FF0000;
}
-->
注意：程式碼的作用是使表格儲存格內文字自動變紅色。
2.class selector
定義class selector需要往其名稱其加上一個點「.」。如“.classname”。 class selector的作用範圍是所有包含「class="classname"」的置標符。
例：
.fontRed
{
color: #FF0000;
}
-->
注意：在第二個中沒有“class="fontRed"”，所以文字沒有變紅色。
3.ID selector
定義ID selector需要往其名稱加一個點「#」。如“#IDname”。 ID selector的作用範圍是所有包含「ID="classname"」的置標符。
例：
#fontRed
{
color: #FF0000;
}
-->
注意：在第二個中沒有“ID="fontRed"”，所以文字沒有變紅色。
4.特殊物件特殊物件包括四種，是針對連結物件設定的:
a:hover 滑鼠移上時的超鏈接
a:link 常規，非訪問超鏈接
a:visited 訪問過的超鏈接
a:active 滑鼠點擊時的超連結特殊物件的作用範圍是所有置標符（這句話有待商榷，因為下面很快就有一種方法可以把「所有」兩個字推翻）。
例：
a:hover
{
color: #0000FF;
text-decoration: underline;
}
-->
注意下面，很有用！ ！ ！
a.classname:hover
a#IDname:hover
這兩種寫法，是分別配合.classname與#IDname使用的。它的作用範圍變成了所有包含“class="classname"”或“ID="IDname"”的置標符。這種寫法，可以幫助你在同一頁中實現多種a:hover效果，可以看一下藝網的主頁上導航列文字與普通文章標題在滑鼠時的區別。
四.應用：
1.置標符自動應用
2.特製類別class="NAME"
3.ID ID="IDname"
4.特殊物件自動套用五.CSS屬性
CSS的屬性很多，像是上文用到最多的color，表示文字的顏色。 background-color表示背景色。這個是最主要的，但是因為沒有什麼難度，參考一下相關手冊就可以了。
CSS 標籤屬性/屬性參考這裡列出了目前支援的樣式表(CSS)標籤屬性。
CSS 標籤屬性/屬性
行為屬性behavior
字體和文字屬性direction
direction [di?rek??n] 指南
font
font-family
font-size
font-style
font-variant [?v??ri?nt] 變形
font-weight [weit] 重量
ime-mode [m?ud] 方式
layout-grid [?leiaut] 佈局排版[ɡrid] 格子
layout-grid-char [t?ɑ:](把..)燒焦
layout-grid-line
layout-grid-mode
layout-grid-type
letter-spacing [?let?]字母[?speisi?]間距
line-break [breik]打破
line-height [hait]高度
min-height
ruby-align [?ru:bi]紅寶石
ruby-overhang [??uv??hæ?]伸出
ruby-position [p??zi??n]定位
text-align
text-autospace [speis]自動間距
text-decoration [?dek??rei??n]裝飾
text-indent [in?dent]縮排版
text-justify [?d??stifai]對齊
text-kashida-space
text-overflow [??uv??fl?u]溢出
text-transform [træns?f?:m]改變
text-underline-position
unicode-bidi [?bi:di]
vertical-align
white-space
word-break
word-wrap
writing-mode
顏色和背景屬性background-attachment
background-color
background-image
background-position
background-position-x
background-position-y
background-repeat
color
版面屬性border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse*
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
clear
float
layout-flow
margin
margin-bottom
margin-left
margin-right
margin-top
padding
padding-bottom
padding-left
padding-right
padding-top
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
table-layout
zoom
分類屬性display
list-style
list-style-image
list-style-position
list-style-type
定位屬性bottom
clip
height
left
overflow
overflow-x
overflow-y
position
right
top
visibility
width
z-index
列印屬性page
pageBreakAfter
pageBreakBefore
濾鏡屬性filter
偽類和其它屬性:active
@charset
cursor
:first-letter
:first-line
@font-face
:hover
@import
!important
:link
@media
@page
:visited
實現CSS圖片邊框效果的方法
圖片邊框效果主要有兩種，較簡單的方法是直接在CSS檔案中對img定義邊界（border），例如我在CSS中定義了：
img.framed {
padding: 6px;
border: 1px solid #CCCCCC;
background-color: #FFFFFF; }
那麼在HTML檔案中，或是在網頁更新的時候，針對嵌入的圖片定義使用class="framed"就會有對應的邊框效果。
上面的方法的優點是比較簡單，但實現的效果比較單調，並不一定能達到令人滿意的效果和一些特殊效果，例如陰影，色彩變化等等。運用圖象替代與定位平移就可以很好地做到這一點，在這裡就不多講了，相信等你學會了基本的CSS，再向更高級的CSS效果挑戰就不是什麼難事了。
有關表格邊框的css語法整理
我們知道Dreamweaver在表格製作方面做得非常出色，但是在某些時候還是必須結合css才能達到一些特定效果，下面我們先把有關表格邊框的css語法整理出來，然後另外介紹怎樣用css美化表格的邊框。
有關表格邊框的css語法
具體內容包括：上邊框寬度、右邊框寬度、下邊框寬度、左邊框寬度、邊框寬度、邊框顏色、邊框樣式、上邊框、下邊框、左邊框、右邊框、邊框、寬度、高度、有關標籤等。
1.上邊框寬度
語法: border-top-width: <值>
允許值: thin | medium | thick | <長度>
初始值: medium
適用於: 所有物件
向下相容: 否
上邊框寬度屬性用於指定一個元素上邊框的寬度。值可以是三個關鍵字其中的一個，都不受字體大小或長度的影響，可以用來實現成比例的寬度。不允許使用負值。也可以用在上邊框、邊框的寬度或邊框的屬性略寫。
2.右邊框寬度
語法: border-right-width: <值>
允許值: thin | medium | thick | <長度>
初始值: medium
適用於: 所有物件
向下相容: 否
右邊框寬度屬性用於指定元素的右邊框的寬度。值可以是三個關鍵字其中的一個，都不受字體大小或長度的影響，可以用來實現成比例的寬度。不允許使用負值。也可以用在右邊框、邊框的寬度或邊框的屬性略寫。
3.下邊框寬度
語法: border-bottom-width: <值>
允許值: thin | medium | thick | <長度>
初始值: medium
適用於: 所有物件
向下相容: 否
下邊框寬度屬性用於指定元素的下邊框的寬度。值可以是三個關鍵字其中的一個，都不受字體大小或長度的影響，可以用來實現成比例的寬度。不允許使用負值。也可以用在下方邊框、邊框的寬度或邊框的屬性略寫。
4.左邊框寬度
語法: border-left-width: <值>
允許值: thin | medium | thick | <長度>
初始值: medium
適用於: 所有物件
向下相容: 否
左邊框寬度屬性用於指定元素的左邊框的寬度。值可以是三個關鍵字其中的一個，都不受字體大小或長度的影響，可以用來實現成比例的寬度。不允許使用負值。也可以用在左邊框、邊框的寬度或邊框的屬性略寫。
5.邊框寬度
語法: border-width: <值>
允許值: [ thin | medium | thick | <長度> ]{1,4}
初始值: 未定義
適用於: 所有物件
向下相容: 否
邊框寬度屬性用一到四個值來設定元素的邊界，值是一個關鍵字或長度。不允許使用負值長度。如果四個值都給了，它們分別應用於上、右、下和左邊框框的式樣。如果給予一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。 這個屬性是上邊框寬度、右邊框寬度、下邊框寬度和左邊框寬度屬性的略寫。也可以使用略寫的邊框屬性。
6.邊框顏色
語法: border-color: <值>
允許值: <顏色>{1,4}
初始值: 顏色屬性的值
適用於: 所有物件
向下相容: 否
邊框顏色屬性設定一個元素的邊框顏色。可以使用一到四個關鍵字。如果四個值都給了，它們分別應用於上、右、下和左邊框框的式樣。如果給予一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。也可以使用略寫的邊框屬性。
7.邊框樣式
語法: border-style: <值>
允許值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
初始值: none
適用於: 所有物件
向下方相容: 否
邊框樣式屬性用於設定一個元素邊框的樣式。這個屬性必須用來指定可見的邊框。可以使用一到四個關鍵字。如果四個值都給了，它們分別應用於上、右、下和左邊框框的式樣。如果給予一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。也可以使用略寫的邊框屬性。
none：無樣式；
dotted：點線；
dashed：虛線；
solid：實線；
double：雙線；
groove：槽線；
ridge：脊線；
inset：內凹；
outset：外凸。
8.上邊框
語法: border-top: <值>
允許值: <上邊框寬度> || <邊框式樣> || <顏色>
初始值: 未定義
適用於: 所有物件
向下相容: 否
上邊框屬性是用來設定一個元素上邊框的寬度、式樣和顏色的略寫。注意只能給一個邊框式樣。也可以使用略寫的邊框屬性。
9.右邊框
語法: border-right: <值>
允許值: <右邊框寬度> || <邊框式樣> || <顏色>
初始值: 未定義
適用於: 所有物件
向下相容: 否
右邊框屬性是用來設定一個元素右邊框的寬度、式樣、和顏色的略寫。注意只能給一個邊框式樣。也可以使用略寫的邊框屬性。
10.下邊框
語法: border-bottom: <值>
允許值: <下邊框寬度> || <邊框式樣> || <顏色>
初始值: 未定義
適用於: 所有物件
向下相容: 否
下邊框屬性是一個用來設定一個元素的下邊框的寬度、式樣和顏色的略寫。注意只能給一個邊框式樣。也可以使用略寫的邊框屬性。
11.左框
語法: border-left: <值>
允許值: <左邊框寬度> || <邊框式樣> || <顏色>
初始值: 未定義
適用於: 所有物件
向下相容: 否
左邊框屬性是用來設定一個元素左邊框的寬度、式樣和顏色的略寫。注意只能給一個邊框式樣。也可以使用略寫的邊框屬性。
12.邊框
語法: border: <值>
允許值: <邊框寬度> || <邊框式樣> || <顏色>
初始值: 未定義
適用於: 所有物件
向下相容: 否
邊框屬性是一個用於設定一個元素邊框的寬度、式樣和顏色的略寫。
邊框宣告的範例包括：
H2 { border: groove 3em }
A:link { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active { border: thick double red }
邊框屬性只能設定四種邊框；只能給出一組邊框的寬度和式樣。為了給出一個元素的四種邊框的不同的值，網頁製作者必須用一個或更多的屬性，如：上邊框、右邊框、下邊框、左邊框、邊框顏色、邊框寬度、邊框式樣、上邊框寬度、右邊框寬度、下邊框寬度或左邊框寬度。
13.寬度
語法: width: <值>
允許值: <長度> | <百分比> | auto
初始值: auto
適用於: 區塊級和替換元素
向下相容: 否
寬度屬性的初始值為“auto”，即為該元素的原有寬度(有是元素自己的寬度)。百分比參考上級元素的寬度。不允許使用負的長度值。
14.高度
語法: height: <值>
允許值: <長度> | auto
初始值: auto
適用於: 區塊級和替換元素
向下相容: 否
高度屬性的初始值為“auto”，即為該元素的原有高度(有就是元素自己的高度，)。百分比參考上級元素的寬度。不允許使用負的長度值。
15.有關標籤
table 表格標籤，整個表格樣式的定義要放在table中；
td 儲存格標籤，對儲存格樣式的定義要放在td中。
BODY 網頁文檔的主體元素，所有的可見範圍都在<BODY>元素內
BUTTON 表單域的按鈕，可以有「傳送(submit)」、「重設(reset)」等形式
DIV 定義了網頁上的一個區域，這個區域的高度、寬度或絕對位置都是以知的
IMG 圖片元素，透過指定「src"屬性來指定圖片的來源
INPUT 輸入表單域
MARQUEE 移動字幕效果
SPAN 定義了網頁上的一個區域，這個區域的高度、寬度或絕對位置都是以知的
TEXTAREA 文字區域
TFOOT 多行輸入文字框
TH 表格標題單元格
THEAD 表格標題
TR 表格行