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