CSS是Cascading Style Sheets（層疊樣式表單）的簡稱。更多的人把它稱作樣式表。顧名思義，它是一種設計網頁樣式的工具。借助CSS的強大功能，網頁將在您豐富的想像力下千變萬化。
圖1 圖2
看到上面的兩幅圖片，您可能會認為這是用photoshop或者是其他圖形處理軟件製作的吧。可是上面的例子卻完全是用CSS編寫的。我們來看一下它的源代碼（不要以為講代碼您會搞不懂，很簡單的^_^）：
<html>
<head>
<title>css word</title>
<style>//*CSS樣式定義開始*//
<!--
div
{width：200; filter blur(add=true,direction=135,strengh=20);
} //*定義DIV範圍內的樣式，包括寬度(width)、模糊濾鏡屬性(blur)*// -->
</style>//*樣式定義結束*//
</head>
<body>
<div>//*以下的區域內採用<head>中<style>裡面定義的格式*//
<p style="font-size：48;font-style：bold;
color:red;">hongen </p>
//*定義字體樣式(font-style)，包括字體大小(size)、粗細(bold)、顏色 (color)*//
</div>
</body>
</html>
上面的代碼中以紅色顯示的是註釋部分，用於幫助您更好的理解代碼的含義。上面的這一段代碼產生的是如圖2的效果。而其中字體的模糊效果就是運用了CSS的濾鏡功能。濾鏡功能是CSS非常有趣也非常吸引人的一個功能，我們將在後面的章節中介紹。
實際上CSS的代碼都是由一些最基本的語句構成的。它的基本語句的結構是這樣的：
選擇符{屬性：屬性值}
看，是不是很簡單，只有三部分。
我們結合上面的代碼來講解，比如上面代碼的<head>…</head>中，使用<style>來指定樣式。
一般說來，<style>下面的CSS語句是以註釋語句的形式書寫的，也就是上面代碼中的<!-- … -->符號包含的部分。所以，上面的例子中定義頁面樣式的語句是：
div{width：200;filter：blur(add=true,direction=35,strengh=20);}
在上面的語句中，DIV是選擇符，選擇符可以是HTML中任何的標識符，比如P、DIV、IMG甚至BODY都可以作為選擇符。
這裡用DIV做選擇符，就是說在HTML中，編輯在<DIV>中的頁面格式將以上面語句中大括號內定義的格式顯示。
括號內的WIDTH和FILTER就是屬性。
WIDTH定義了DIV區域內的頁面的寬度，200是屬性值。
FILTER定義了濾鏡屬性，BLUR是它的屬性值，該屬性值產生的是一種模糊效果，其小括號內定義的是BLUR屬性值的一些參數。
ADD參數有兩個值：True和False。分別指定圖片是否被設置成模糊效果。
Direction參數是用來設置模糊的方向。0度代表垂直向上，然後每45度一個單位，例子中的135代表底部向右135度，每一個度數單位都代表一個模糊方向，如果您感興趣的話，可以參照後面的講解中詳細的參數設定。
Strengh代表有多少像素的寬度將受到模糊影響，參數值是用整數來設置的。
我們看到除了在<HEAD>中有CSS 的定義，在<BODY>中也有一段CSS定義：
<p style=「font-size：48;font-style：bold;color：red;」>hongen</p>
這裡Style是內嵌到<P>中來定義該段落內的格式的。我們發現在<BODY>中的CSS語句與定義在<HEAD>中還有些不同，它是用< STYLE = >直接定義的。這種定義方法非常適用於編寫的代碼比較多的情況。
而上面的代碼的CSS定義格式則非常適用於代碼較少、結構較簡單的情況。
按照CSS語句的基本格式，我們可以看出上面定義P段落內的CSS代碼中font-size、font-style和color是屬性，分別定義<P>中「hongen」字體的大小(size)、樣式(style)和顏色(color)；
而48、bold、red是屬性值。意思是「hongen」將以48pt、粗體、紅色的樣式顯示。由於整個段落是定義在<DIV>中的，所以hongen又將顯示出<head>中定義的濾鏡屬性來。最終的結果就如同圖2一樣。
圖1中的效果也是用很簡單的CSS語句實現的，只是運用了CSS中的濾鏡屬性而已。
通過上面的講解，我們可以看到用很簡單的CSS語句就可以實現許多需要專業軟件才可以達到的效果。利用屬性可以設置字體、顏色、背景等頁面格式；利用定位可以使頁面佈局更加規範、好看；利用濾鏡可以使頁面產生多媒體效果。 怎麼樣，CSS的功能是不是很強大，在下面的教程中我們將對它進行詳細的講解。
