（本文摘自http://www.frontfree.net/view/article_73_page1.html）
第一講
㈠為什麼要用CSS，或者說CSS能幹什嗎？
例1：假設要建立一個頁面，使頁面上所有H3文本的顏色都是綠色、斜體和宋體，怎麼辦？
<html>
<head>
<title>CSS的示範</title>
</head>
<body>
<em><font face="宋體" color="#00ff00">
<h3>這是一段綠色、斜體和宋體的H3文本</h3>
</font></em>
<em><font face="宋體" color="#00ff00">
<h3>這是另一段綠色、斜體和宋體的H3文本</h3>
</font></em>
</body>
</html>
(單擊此處看例子)
上面是一種比較“笨” 的方法，如果當前頁面存在100個<h3>標籤，就要定義100次<h3>的樣式。那麼現在我們使用CSS：
<html>
<head>
<title>CSS的示範</title>
<style><!--
h3 { font-family: 宋體; font-style: italic; color: #00FF00}
--></style>
</head>
<body>
<h3>這是一段綠色、斜體和宋體的H3文本</h3>
<h3>這是另一段綠色、斜體和宋體的H3文本</h3>
</body>
</html>
(單擊此處看例子)
其中：
①font-family: 宋體相當於<font face="宋體">; font-style: italic相當於<em>;
color: #00FF00相當於color="#00ff00"
②h3 {...}說明定義的樣式是作用於h3這個標籤上的；如果寫成td{...}就是應用於儲存格的 由此可見，CSS可以減少許多的重複工作，尤其是在更新的時候，只要你修改了樣式表，
那麼整個頁面就會看起來完全不同。
㈡稍稍深入一點：CSS中的類
上面方法的確可以將頁面裡的h3標籤所包含的文字全部變成你所定義的樣式，但是如果同時需要一段綠色、斜體和宋體的H3文本和另一段紅色 、粗體和隸書的H3文本，單純定義h3標籤的一種樣式就又不行了。
所以這裡要引入類的概念，請看這一句：h3.other{ font-family: 隸書; font-weight: bold; color: #ff0000}
它定義了一個名為other 的類，font-weight: bold表示文字使用的是粗體，
當要調用這個類的時候，只要這樣寫：
<h3 class="other">這是一段紅色 、粗體和隸書的H3文本</h3> 就可以了。而其它沒有添加class="other"語句的h3標籤中的文本仍將是開始時定義的綠色、斜體和宋體樣式。
其實類並不一定要依附於HTML標籤來定義，它完全可以這樣定義：
.another{ font-family: 隸書; font-weight: bold; color: #0000ff}
這個名為another的類可以用於任意的HTML標籤，調用的方法同上。例如：
<p class="another">這是一個測試</p>
就標示了一段藍色、粗體和隸書的文字。
(單擊此處看例子)
㈢常用的CSS屬性Ⅰ
⑴font-family: 這個屬性是一個按照優先順序列出的字型名稱，它的值使用逗號來分隔。
例如：body{ font-family: 宋體, 隸書, 楷體_GB2312} 表示預設是使用宋體的；
當系統找不到宋體時，它會用隸書代替；如果找不到隸書就用楷體代替，
要是連楷體也找不到...恐怕你就只能等著看亂碼了。^_^
⑵font-style: 此屬性決定字型是正常體還是斜體，屬性值：normal|italic|oblique
其中normal是正常體，而另外兩種都表示斜體。預設值是normal。
一般要表示斜體，用italic就夠了。
⑶font-weight: 這個屬性決定文字的粗細程度，它的屬性值比較多：
normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
normal是預設值，相當於400，bold相當於700，bolder相當於900，lighter相當於200。
⑷font-size: 這個屬性有太多的屬性值，但一般用不到那麼多。下面說一種最常用的：
{font-size: 11pt}，這個用不著什麼執行個體，現在這個頁面上的字都是11pt大小的。
一般的頁面上如果不修改這個屬性的值的話，見到的字都預設是11pt大的。
⑸test-decoration: none|underline|overline|line-through|blink
none表示無修飾，underline是底線，overline是上劃線，line-through是刪除線，
blink是閃爍(Netscape only)。通常none屬性被用來去掉超級聯結的底線。
第二講
㈠偽類的定義
首先看一個例子
以下是具體的代碼級實現：
.exp01 { font-size: 9pt; color: #0000CC; text-decoration: none;
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"}
.exp01:hover { font-size: 9pt; color: #FF0000; text-decoration: underline}
(以上部分是加在style標籤中的)
<a href="javascript:alert('這是一個簡單的例子')" class="exp01">
這是一個例子</a>
(以上是加在本文中的)
相信讀完第一講之後對上面大部分的代碼理解起來不會很困難，這裡著重要講的是
.exp01:hover這一句。CSS預定義了了四種偽類，分別是
:link :hover :visited :active，它們表示了一個超級連結的四種狀態。
①:link就是一個連結的普通狀態，它的作用就像像在body中定義link="#FF0000"就可以
使整個頁面中的超級連結變成紅色一樣，但是有所不同的是，由於這裡定義的是樣式表，
它可以利用上一章中所講的test-decoration屬性去掉超級連結的底線，只需這樣定義：
.exp02:link{ test-decoration: none}
②:visited和:active的性質和:link差不多，分別用來定義“連結已被訪問”和
“連結處於活動狀態”時的屬性。
③現在是關鍵的:hover，它定義的是滑鼠指標停在當前連結上時該連結的屬性，
通常被用來實現一些簡單的頁面效果。就像我上面那個例子裡展示的那樣，
它可以使靜止的頁面變得活動起來。
④偽類中所定義的屬性只會被用於超級連結，請看我這個例子
所以某些單純的文本也可以使用包含了偽類定義的CSS類，這樣可以減少一些重複定義。
㈡常用的CSS屬性Ⅱ
⑴color: 其屬性值為HTML裡表示顏色的諸如red, rgb(255,0,0), #ff0000 之類的語句
該屬性描述了一個元素中文本的顏色，也叫做前景色彩。
⑵background-color: 屬性值同color，但比color多一個transparent屬性值，預設值
為transparent(即透明)這個屬性設定了元素的背景顏色。
⑶background-image: 屬性值為 <url>|none 這個屬性設定了一個元素的背景圖案。
需要注意的是在設定背景圖案時，最好連同背景顏色一同設定，這樣在背景圖案因為
某些原因無法顯示的時候，背景顏色可以起到掩飾錯誤的作用。
⑷background-repeat: 屬性值 repeat|repeat-x|repeat-y|no-repeat
初始值為 repeat。
在背景圖片設定了的情況下，此屬性可以決定圖片是否重複顯示或以怎樣的方式重複。
如果屬性值是repeat，那就意味著圖片在水平和垂直方向上都重複排列。repeat-x表示
只水平重複排列，repeat-y表示豎直重複排列，no-repeat就是不重複。
⑸background-attachment: 屬性值 scroll|fixed 初始值為 scroll
在背景圖片已經設定的情況下，通常這些圖片有兩種依附方式，一種是背景圖案永遠靜止， 文字在背景上面滾動(即fixed)；另一種是圖案隨著頁面上的文字一起滾動(即scroll)。
⑹background-position: 屬性值 [百分比|距離][top|center|bottom]
[left|center|right] 初始值：0% 0%
幹說無用，請看下面三句等價的語句：
background-position: 50% 0%
background-position: center top
background-position: top center
這三句的意思都是令圖片的(x=50%,y=0)那一點與該元素的(x=50%,y=0)那一點重合。
這是本節的例子
㈢CSS定位
怎樣在頁面中精確定位呢？這可能是CSS一個很大的作用。如下代碼可實現這個功能：
<div style="position:absolute;top:150px;width:200px;height:200px;
background-color:red">這是一段被定位的文字</div>
上面的代碼可以解釋為：
position:absolute 表示位置是absolute(絕對)，還有一個屬性值是relative(相對)
當使用absolute來定位元素時，該元素就被看作一個矩形的覆蓋物來格式化。
它是獨立的，既與上階項目無關，也與子項目無關。而使用後者時，元素定位的
初始位置就是這個被相對定位的元素的上階項目的初始位置。
(聽上去好像很晦澀，請看這個例子)
top:150px表示內容顯示在離頂部150px的地方，還有是left:150px
表示內容顯示在離左邊150px的地方
width:200px;height:200px; 表示內容能顯示的地區大小
上面的top、width等屬性的值可以被設定成負數，被定位的元素將絕對遵從
你所設定的值放置。
第三講
精彩的濾鏡效果(靜態為主)
經過了前面兩個Chap，功能強大的濾鏡終於浮出水面了 ^_^ 藉助濾鏡和指令碼的力量，我們可以很輕易的實現許多的動態效果。在開始之前，請先看一幅圖片。
這是我在所有例子中使用的圖的原圖
⑴Alpha
功能：改變元素的透明度
文法：{filter: Alpha(Opacity=*, FinishOpacity=*, Style=*, StartX=*,
StartY=*, FinishX=*, FinishY=*)}
說明：Opacity代表透明度水準。範圍是0-100，100是完全不透明(預設狀態下所有
元素都是完全不透明)，0是完全透明。
FinishOpacity是一個選擇性參數，如果想要設定漸層的透明效果，就可以用它
來指定結束時的透明度。範圍也是0-100。
Style參數決定的是透明地區的形狀，其中0代表統一形狀，1代表線形，2代表
放射狀，3代表長方形。
StartX是透明效果開始時的X座標，FinishX是結束時的X座標。
StartY與FinishY同理。
例子：透明度
⑵Blur
功能：模糊畫面
文法：{filter: blur(add=*, direction=*, strength=*)}
說明：add=true或false，決定是否使用印象派的模糊效果。
模糊效果是順時針進行的，direction這個參數用來設定模糊的方向，範圍
是0-360，其中0是垂直向上。
strength的值是一個整數，代表模糊的寬度，預設值是5，範圍是1-255。
例子：模糊(動態)
⑶FlipH 和 FlipV
功能：FilpH是水平翻轉對象，FilpV是豎直翻轉
文法：{filter: FlipH} 或 {filter: FlipV}
例子：翻轉
⑷Grow
功能：令對象邊緣產生“發光”的效果
文法：{filter: Grow(Color=*, Strength=*)}
說明：Color是指定發光的顏色，Strength表示發光的強度，範圍是1-255。
例子：邊緣發光
⑸Shadow
功能：在指定方向建立物體的投影
文法：{filter: Shadow(Color=*, Direction=*)}
說明：Color是投影的顏色，Direction是影子投向的方向，範圍是0-360，其中0代表
垂直向上。
⑹DropShadow
功能：近似於Shadow
文法：{Filter: DropShadow(Color=*, OffX=*, OffY=*, Positive=*)}
說明：Color是陰影的顏色。OffX和OffY就是陰影在X方向和Y方向的位移量。
Positive的值是一個布爾值，如果值為"true"，那麼就為任何的非透明像素
建立可見的投影；如果是"false"，那麼就為透明的像素部分建立可見的投影
要注意的是，雖然Dropshadow和Shadow功能很像，但是Shadow是真正的
投影，而DropShadow只不過是建立一個位移量，並加上顏色而已。
例子： DropShadow和Shadow功能對比
⑺Wave
功能：將對象按照垂直的波形樣式打亂
文法：{Filter: Wave(Add=*, Freq=*, LightStrength*, Phase=*, Strength=*)}
說明：Add屬性值預設為true，表示添加該濾鏡，也可以設為false，表示不添加。
freq是波紋的頻率，也就是指定這個對象上面一共有多少個完整的波紋。
LightStrength表示波紋中波峰的亮度，範圍是0-100。
Phase用來設定正弦波開始時的位移量，預設是0，範圍是0-100，這個數值代
表開始時的波長取自波長的百分比值，例如如果值為25那麼正弦波就從90度
的方向開始。
Strength表示波的振幅大小。
例子：波動
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
