從CSS的基本語句就可以看出，屬性是CSS非常重要的部分(fēn)。熟練掌握了CSS的各種屬性将會是您編輯頁面更加得心應手。下(xià)面我(wǒ)(wǒ)們就借助一(yī)些實例來講解。
1、 字體(tǐ)屬性
這是最基本的屬性，您經常都會用到。它主要包括以下(xià)這些屬性：
光看表格是不是有些難懂，不要緊，我(wǒ)(wǒ)們來看一(yī)個用表格中(zhōng)的屬性定義的字體(tǐ)樣式（如下(xià)圖）：
第一(yī)行隻是采用了“font-family”屬性，代碼是這樣的：
<p style=“font-family：lucida console”>hongen</p>
這行代碼定義了“hongen”将以“lucida console”的字體(tǐ)顯示；
第二行font-family爲默認值，而是定義了“font-style”屬性爲“italic”斜體(tǐ)，代碼如下(xià)：
<p style=“font-style：italic”>hongen</p>
第三行font-family爲默認值，font-style爲“oblique”，另外(wài)還定義了“font-weight”屬性爲“bold”，“font-size”屬性爲24pt（缺省情況下(xià)爲absolute size絕對大(dà)小(xiǎo)）代碼如下(xià)：
<p style=“font-style：oblique；font-weight：bold；font-size：24pt”>hongen</p>
最後一(yī)行隻是在第三行定義的基礎上又(yòu)增添了“font-variant”屬性爲“small-caps”（小(xiǎo)體(tǐ)大(dà)寫），代碼如下(xià)：
<p style=“font-style：oblique；font-weight：bold；font-size：24pt； font-variant：small-caps”>hongen</p>
值得注意的是：“font-variant”屬性值“small-caps”在指定的小(xiǎo)體(tǐ)大(dà)寫字體(tǐ)不存在的時候，CSS将用大(dà)寫字母代替所有的小(xiǎo)寫字母。
可能您會問：定義一(yī)個字體(tǐ)怎麽有那麽長的代碼呢？其實字體(tǐ)屬性中(zhōng)還一(yī)個“font”屬性，可以實現簡便定義。我(wǒ)(wǒ)們來看下(xià)面這段代碼：
<p style=“font：italic small-caps bold 36pt,GlitzyCurl”>Leaf</p> 此代碼産生(shēng)的效果是這樣的（如下(xià)圖）：
這段代碼定義了“leaf”的字體(tǐ)爲GlitzyCurl，并且是斜體(tǐ)、小(xiǎo)體(tǐ)大(dà)寫、粗體(tǐ)、36号字。這段代碼等同于：
<p style=“font-style：italic；font-variant：small-caps；font-weight： bold；font-size：36pt；font-family：GiltzyCurl”>Leaf</p>
怎麽樣，是不是精簡了許多。
但需要注意的是：如果您用<font>屬性直接定義，一(yī)定要注意屬性值的排放(fàng)順序。 它的排放(fàng)規則是按照“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”的順序，其中(zhōng)沒有定義的以默認值顯示。
其實我(wǒ)(wǒ)們習慣上還是不用FONT屬性來統一(yī)定義，因爲分(fēn)開(kāi)來定義的代碼雖然很長，但是看上去(qù)很直觀，讓人一(yī)看就知(zhī)道定義的内容是什麽。
說一(yī)點遺憾之處吧，就是CSS對中(zhōng)文字體(tǐ)的支持可能不是很好。
2、顔色和背景屬性
您總不希望自己的頁面處于黑白(bái)世界吧。如果給用<font>屬性定義的文本添上顔色是不是會更好呢？
下(xià)面我(wǒ)(wǒ)們就講一(yī)下(xià)CSS的顔色和背景屬性。先來看一(yī)下(xià)CSS下(xià)的顔色和背景都有哪些屬性吧（如下(xià)表）：
我(wǒ)(wǒ)們還是舉個例子吧。比如上一(yī)節講到的“LEAF”字體(tǐ)，我(wǒ)(wǒ)們在其中(zhōng)加入顔色屬性，在<style>再加入以下(xià)代碼：
color：rgb（204，82，28）；
background-img：url(ss01038.jpg)；
background-repeat：no-repeat；margin-right：15em
//*設置前景色的rgb值爲(204，82，28)，您也可以用顔色的英文名稱直接定義；
設置背景圖案的地址；設置背景圖案不重複顯示；另外(wài)還設置了頁邊距margin屬性
，這個我(wǒ)(wǒ)們以後再講*//
加入代碼後“Leaf”的字體(tǐ)顯示效果是這樣的（如下(xià)圖）：
怎麽樣，是不是比光是定義<font>屬性顯得更加漂亮了。當然您也可以簡便的定義background屬性（象定義font屬性那樣），下(xià)面我(wǒ)(wǒ)告訴一(yī)下(xià)您background屬性的書(shū)寫格式：
屬性：background 屬性值：<background-color>||<background-image>|| <background-repeat>||<background-attacement>||<background-position>
也就是說，使用background屬性可以一(yī)次定義前面講到的一(yī)切有關背景的屬性，包括背景色、背景圖案等等。因此，上面定義“leaf”顔色屬性中(zhōng)有關背景的代碼可以寫成這樣： “background：url（ss01038.jpg）no-reapeat”
好了，至于顔色和背景屬性的功能，您自己也可以去(qù)試一(yī)試。下(xià)一(yī)節我(wǒ)(wǒ)們将介紹CSS的文本屬性。
3、文本屬性
※定義間距
前面說了如何用CSS定義字體(tǐ)、顔色和背景屬性，那麽定義好的文本我(wǒ)(wǒ)們怎麽對它進行排版呢？
下(xià)面我(wǒ)(wǒ)們講述一(yī)下(xià)CSS的文本屬性，還是先來看一(yī)下(xià)文本屬性的詳細列表：
我(wǒ)(wǒ)們可以從表中(zhōng)看到在這裏可以定義文本的文字間距、字母間距、裝飾、對齊方式、縮進方式和行高等屬性。 舉個例子來看看吧。比如下(xià)面這段文字（如左下(xià)圖）：
我(wǒ)(wǒ)們對這段文字加上文本屬性重新排版，排版後的效果如右上圖所示。
我(wǒ)(wǒ)們看到經過文本屬性處理的文本字與字之間多了間距，行與行之間多了行高，對齊方式變成了兩端對齊，并且段首又(yòu)多縮進了兩格。這是怎樣實現的呢？很簡單，隻是在html中(zhōng)加了如下(xià)的代碼：
<p style=“letter-spacing：1em；text-align：justify；text-indent：
4em；line-height：17pt”>……</p>
//*letter-spacing設置了字間距爲1em，其中(zhōng)1em爲一(yī)個長度單位；text-align設
置了對齊方式爲兩端對齊；indent設置了縮進格爲4em；line-height設置了行高爲
17pt*//
從上面的例子，我(wǒ)(wǒ)們可以看出利用CSS的文本屬性可以方便的對頁面中(zhōng)的文本進行排版。下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹文本的Text-decoration屬性的一(yī)個小(xiǎo)應用。
※裝飾超鏈接
網頁默認的鏈接方式是這樣的：未訪問過的鏈接是藍(lán)色文字并帶藍(lán)色的下(xià)劃線，訪問過的超級鏈接是深紫色的文字并帶深紫色的下(xià)劃線。如果您所有的網頁都是這種樣式，是不是很單調呢？
其實，利用文本屬性中(zhōng)的Text-decoration屬性就可以實現對超鏈接的修飾。我(wǒ)(wǒ)們先看下(xià)面的這段代碼：
<html>
<title>link css</title>
<head>
<style>
<!--
//*定義僞類元素（ａ：），大(dà)括号内定義了前景色屬性和文本裝飾屬性，
hover加上‘font-size’屬性目的是讓鼠标激活鏈接時改變字體(tǐ)*//
a：link{color：green;text-decoration：none}
//*未訪問時的狀态，顔色爲綠色(green)，文本裝飾屬性(text-decoration)值
爲沒有(none)*//
a：visited{color：red;text-decoration：none}
//*訪問過的狀态，顔色爲紅色(red)，文本裝飾屬性值爲沒有*//
a：hover{color：blue;text-decoration：overline;font-size：20pt}
//*鼠标激活的狀态，顔色爲藍(lán)色(blue)， 文本裝飾屬性值爲上劃(overline)，
字體(tǐ)大(dà)小(xiǎo)爲20pt*//
-->
</style>
</head>
<body>
<p style=“font-family:行書(shū)體(tǐ)；font-size：18pt”>
<a href=“http：//www.hongen.com”>未訪問的鏈接</a></p>
//*加鏈接，顯示三種不同狀态，并且定義了鏈接文本的字體(tǐ)和大(dà)小(xiǎo)*//
<p> <a href=“http：//www.hongen.com”>訪問過的鏈接</a></p>
<p> <a href=“http：//www.hongen.com”>鼠标激活的鏈接</a></p>
</body>
</html>
您如果想看上述代碼的效果，請點擊這裏。
我(wǒ)(wǒ)們從例子中(zhōng)看到沒有訪問過的鏈接以綠色顯示，并且去(qù)掉了下(xià)劃線；而訪問過的鏈接以紅色且沒有下(xià)劃線顯示；另外(wài)，當鼠标激活鏈接時，鏈接以藍(lán)色顯示，并且加上了上劃線。這種效果是怎麽實現的呢？它除了運用了文本屬性中(zhōng)的text-decoration屬性，而且采用了僞類元素。
通過上面的代碼注釋，相信您應該對僞類元素有一(yī)個大(dà)概認識。實際上我(wǒ)(wǒ)們用到的這種僞類應當稱之爲“錨僞類”，它規定了鏈接不同狀态下(xià)的效果。
怎麽樣，是不是很簡單的就可以實現動态鏈接的效果，趕緊自己動手試一(yī)試吧！下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹“容器”屬性。
4、“容器”屬性
※邊距屬性
聽(tīng)起來是不是很有趣，什麽叫“容器”屬性呢？CSS的容器屬性包括邊距、填充距、邊框和寬度、高度、浮動、清除等屬性。
您想，網頁中(zhōng)的内容肯定是都需要“裝”進這個“容器”裏。“容器”屬性是CSS中(zhōng)非常重要的一(yī)種屬性，我(wǒ)(wǒ)們将分(fēn)類進行學習。
先來看一(yī)下(xià)邊距屬性的詳細列表：
和font屬性一(yī)樣，表中(zhōng)的四個屬性可以用一(yī)個屬性一(yī)次。邊距順序是上、右、下(xià)、左。我(wǒ)(wǒ)們還是用定義邊距屬性前後的兩個例子來看一(yī)下(xià)吧。請看下(xià)面的這幅圖：
我(wǒ)(wǒ)們看到上圖是沒有加上邊距屬性的效果，而下(xià)圖則在<head>中(zhōng)加入了如下(xià)代碼：
body{margin：1em 2em 3em 4em}
//*定義文本的上、右、下(xià)、左的邊距分(fēn)别爲1、2、3、4em*//
産生(shēng)的效果如下(xià)圖所示：
定義了邊距後的頁面，無論您怎麽改變窗口的大(dà)小(xiǎo)，它都會按照您定義好的邊距樣式顯示。
如果在margin裏有缺失的屬性，則按照順序依次排列。比如：
body{margin：1em 3em} 上面這段代碼的含義是：body的上、右邊距爲1、3em。
下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹填充距屬性。
※填充距屬性
本節我(wǒ)(wǒ)将向您介紹填充距屬性。我(wǒ)(wǒ)們先來看一(yī)下(xià)填充距的屬性列表：
首先我(wǒ)(wǒ)們得先了解什麽叫填充距，它與邊距有什麽差别呢？填充距指的是文本邊框與文本之間的距離(lí)。
這樣講是不是有些難懂，由于填充距屬性與margin一(yī)樣，都有一(yī)個一(yī)次定義的屬性：padding，所以我(wǒ)(wǒ)們舉個例子，看一(yī)下(xià)到底什麽叫填充距，請看下(xià)圖：
我(wǒ)(wǒ)們看到上圖中(zhōng)紅框圈住的地方就是填充距起作用的部分(fēn)。實際上上圖的效果隻是在上一(yī)節例子的<head>中(zhōng)把下(xià)面這段代碼加入到Body定義的margin後面：
padding：1em 2em 3em 4em
從上可以看出，紅框标記外(wài)的部分(fēn)屬于margin屬性在起作用。
下(xià)一(yī)節将向您介紹邊框屬性。
※邊框屬性
本節我(wǒ)(wǒ)們來看一(yī)下(xià)種類繁多的邊框屬性，先來看一(yī)下(xià)屬性列表：
是不是看上去(qù)很多，其實應用起來很方便。
隻要靈活的運用一(yī)次定義的屬性就會方便很多。其實還有一(yī)個一(yī)次設置所有邊框的寬度、樣式和顔色屬性的border屬性，但是border隻能使四條邊框的屬性值是一(yī)樣的。我(wǒ)(wǒ)們現在來給前面的例子設置一(yī)個5像素寬、雙邊框并且是紫色的邊框（如下(xià)圖）：
這就是在<head>中(zhōng)定義<p>的屬性，代碼如下(xià)：
P{border：5px double purple}//*定義了四條邊框爲一(yī)樣的值*//
您還可以找一(yī)段文本自己多嘗試一(yī)下(xià)其他的邊框屬性，看看還有什麽效果。下(xià)一(yī)節将向您介紹一(yī)下(xià)“容器”屬性的其他屬性，您将能欣賞到圖文混排的效果。
※圖文混排
我(wǒ)(wǒ)們在來看看“容器”屬性還有什麽其他的屬性，請看屬性列表：
上表中(zhōng)的float屬性很有意思，我(wǒ)(wǒ)們看看用它作的一(yī)個頁面效果（如下(xià)圖）：
您是不是以爲在圖片那裏插入了一(yī)個表格才實現這種圖文混排的效果的呢？
其實不是的，在這裏隻是在<head>中(zhōng)定義了一(yī)下(xià)<img>的float和margin屬性，代碼如下(xià)：
<html>
<title>margin css</title>
<head>
<style>
<!--
img{margin-right：2em；float：left}
//*定義圖片的右邊距爲2em，圖片浮動在文字的左邊*//
-->
</style>
</head>
<body>
<p class=“p2” style=“line-height：17pt”>
<img src=“logo.gif” alt=“floating” >
我(wǒ)(wǒ)公司是一(yī)家以軟件開(kāi)發及銷售爲主業的高新技術企業。 位于高科技産業
密集的清華大(dà)學東門，擁有近4000平米的獨立辦公樓，全體(tǐ)員(yuán)工(gōng)年輕勤奮而富
有創造力，極具挑戰性和競争性。</p>
</body>
</html>
怎麽樣，不用表格也能實現圖文混排的效果，并且減少了大(dà)量的代碼。您還可以試試float的其他效果。
好了，“容器”屬性就講這麽多，我(wǒ)(wǒ)們可以看出，充分(fēn)利用CSS的“容器”屬性，将會使您的頁面布局更加合理，樣式更加漂亮。下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹分(fēn)級屬性。
5、分(fēn)級屬性
如果您使用過Word，那您一(yī)定知(zhī)道Word中(zhōng)有一(yī)個“項目符号和編号”的功能。
在html中(zhōng)，您無需使用前面提到的一(yī)些字體(tǐ)、顔色、容器屬性來對字體(tǐ)、顔色和邊距、填充距等進行初始化。因爲在CSS中(zhōng)，已經提供了進行分(fēn)級的專用分(fēn)級屬性。
分(fēn)級屬性包括了“list-style”（列表樣式）、“list-item”（列表項）等多種屬性，我(wǒ)(wǒ)們先來看一(yī)下(xià)分(fēn)級屬性的詳細列表：
下(xià)面我(wǒ)(wǒ)們來看一(yī)個分(fēn)級屬性的例子，代碼如下(xià)所示：
<html>
<head>
<title> fenji css </title>
<style type=“text/css”>//*定義CSS*//
<!--
p{display：block；white-space：normal}
//*定義顯示屬性爲“block”，意思是在新的區域裏顯示； white-space的屬性
normal使多重空白(bái)合成爲一(yī)個*//
em{display：inline}
//*定義EM的顯示屬性爲“inline” 目的是爲了其控制下(xià)的文本顯示中(zhōng)不折行*//
li{display：list-item；list-style：square}
//*定義li的顯示屬性爲“list-item”，顯示在列表項中(zhōng)加入一(yī)個符号标記， 而
list-style屬性值定義爲square使列表項前的标記爲方塊*//
img{display：block} //*定義圖片屬性爲block使圖片在新的位置打開(kāi)*//
-->
</style>
</head>
<body>
<p><em>sample</em>text<em>sample</em>text<em>sample</em>
text<em>sample</em> text<em>sample</em></p>//*定義一(yī)段文本*//
<ul>//*定義列表項*// <li>list-item 1</li>
<li>list-item 2</li> <li>list-item 3</li> </ul>
<p><img src=“ss01068.jpg” width=“280”height=“185”
alt=“invisible”></p>//*定義一(yī)幅圖片*//
</body>
</html>
上段代碼的顯示效果如下(xià)圖：
我(wǒ)(wǒ)們看到由于定義了<p>的屬性爲Block，所以文本、列表、圖片都在不同的位置上打開(kāi)，Inline屬性使文本不折行，list-style-type的屬性值爲square使列表項前的符号爲方塊；
如果我(wǒ)(wǒ)們在上面的代碼中(zhōng)做一(yī)些改動，則将以另一(yī)種效果顯示，我(wǒ)(wǒ)們在<head>中(zhōng)把“EM”的display屬性值改爲block，使其都在新的位置打開(kāi)；li的“list-style”屬性值改爲“Upper-roman”（大(dà)寫羅馬符号），img的“display”屬性值改爲“none”（讓圖片不顯示）。 修改後的顯示效果如下(xià)圖：
我(wǒ)(wǒ)們看到分(fēn)級屬性也能達到排版的部分(fēn)功能，幾處代碼的改動就可以使頁面發生(shēng)很大(dà)的變化。自己來試一(yī)試其他的效果吧！
下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹鼠标屬性。
6、鼠标屬性
我(wǒ)(wǒ)們知(zhī)道，當把鼠标移動到不同的地方時，當鼠标需要執行不同的功能時，當系統處于不同的狀态時，都會使鼠标的形狀發生(shēng)改變。
用CSS來改變鼠标的屬性，就是當鼠标移動到不同的元素對象上面時，讓鼠标以不同的形狀、圖案顯示。
在CSS當中(zhōng)，這種樣式是通過“cursor”屬性來實現的。Cursor屬性有很多的屬性值，我(wǒ)(wǒ)們來看一(yī)下(xià)它的詳細列表：
我(wǒ)(wǒ)們來看一(yī)個例子吧，請看下(xià)面這段代碼：
<html>
<head>
<title>changemouse</title>
</head>
<body>
<h1 style=“font-family:文鼎新藝體(tǐ)簡”>鼠标效果</h1>//*設置字體(tǐ)*//
<p style=“font-family:行書(shū)體(tǐ)；font-size:16pt；color:red”>
請把鼠标移到相應的位置觀看效果。</p>//*設置字體(tǐ)的名稱、大(dà)小(xiǎo)、顔色*//
<div style=“font-family:行書(shū)體(tǐ)；font-size:24pt；color:green；”>
//*設置該區域内的字體(tǐ)名稱、大(dà)小(xiǎo)、綠色*//
<p><span style=“cursor:hand”>手的形狀</span><br>
//*設置鼠标屬性爲手的形狀*//
<span style=“cursor:move”>移動</span><br>//*設置鼠标屬性爲移動*//
<span style=“cursor:ne-resize”>反方向</span><br>
//*設置鼠标屬性爲反方向*//
<span style=“cursor:wait”>等待</span><br>//*設置鼠标屬性爲等待*//
<span style=“cursor:help”>求助</span>//*設置鼠标屬性爲求助*//
</p>
</div>
</body>
</html>
上述代碼産生(shēng)的效果請您點擊這裏
CSS的屬性就講到這裏，我(wǒ)(wǒ)們看到它的屬性還是比較多的，但是您隻要搞清楚它們都是什麽意思，應用起來就會很方便。在您應用的時候，還可以參照我(wǒ)(wǒ)爲您提供的屬性詳細列表 。
下(xià)一(yī)章将向您介紹CSS定位。
1、 字體(tǐ)屬性
這是最基本的屬性，您經常都會用到。它主要包括以下(xià)這些屬性：
光看表格是不是有些難懂，不要緊，我(wǒ)(wǒ)們來看一(yī)個用表格中(zhōng)的屬性定義的字體(tǐ)樣式（如下(xià)圖）：
第一(yī)行隻是采用了“font-family”屬性，代碼是這樣的：
<p style=“font-family：lucida console”>hongen</p>
這行代碼定義了“hongen”将以“lucida console”的字體(tǐ)顯示；
第二行font-family爲默認值，而是定義了“font-style”屬性爲“italic”斜體(tǐ)，代碼如下(xià)：
<p style=“font-style：italic”>hongen</p>
第三行font-family爲默認值，font-style爲“oblique”，另外(wài)還定義了“font-weight”屬性爲“bold”，“font-size”屬性爲24pt（缺省情況下(xià)爲absolute size絕對大(dà)小(xiǎo)）代碼如下(xià)：
<p style=“font-style：oblique；font-weight：bold；font-size：24pt”>hongen</p>
最後一(yī)行隻是在第三行定義的基礎上又(yòu)增添了“font-variant”屬性爲“small-caps”（小(xiǎo)體(tǐ)大(dà)寫），代碼如下(xià)：
<p style=“font-style：oblique；font-weight：bold；font-size：24pt； font-variant：small-caps”>hongen</p>
值得注意的是：“font-variant”屬性值“small-caps”在指定的小(xiǎo)體(tǐ)大(dà)寫字體(tǐ)不存在的時候，CSS将用大(dà)寫字母代替所有的小(xiǎo)寫字母。
可能您會問：定義一(yī)個字體(tǐ)怎麽有那麽長的代碼呢？其實字體(tǐ)屬性中(zhōng)還一(yī)個“font”屬性，可以實現簡便定義。我(wǒ)(wǒ)們來看下(xià)面這段代碼：
<p style=“font：italic small-caps bold 36pt,GlitzyCurl”>Leaf</p> 此代碼産生(shēng)的效果是這樣的（如下(xià)圖）：
這段代碼定義了“leaf”的字體(tǐ)爲GlitzyCurl，并且是斜體(tǐ)、小(xiǎo)體(tǐ)大(dà)寫、粗體(tǐ)、36号字。這段代碼等同于：
<p style=“font-style：italic；font-variant：small-caps；font-weight： bold；font-size：36pt；font-family：GiltzyCurl”>Leaf</p>
怎麽樣，是不是精簡了許多。
但需要注意的是：如果您用<font>屬性直接定義，一(yī)定要注意屬性值的排放(fàng)順序。 它的排放(fàng)規則是按照“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”的順序，其中(zhōng)沒有定義的以默認值顯示。
其實我(wǒ)(wǒ)們習慣上還是不用FONT屬性來統一(yī)定義，因爲分(fēn)開(kāi)來定義的代碼雖然很長，但是看上去(qù)很直觀，讓人一(yī)看就知(zhī)道定義的内容是什麽。
說一(yī)點遺憾之處吧，就是CSS對中(zhōng)文字體(tǐ)的支持可能不是很好。
2、顔色和背景屬性
您總不希望自己的頁面處于黑白(bái)世界吧。如果給用<font>屬性定義的文本添上顔色是不是會更好呢？
下(xià)面我(wǒ)(wǒ)們就講一(yī)下(xià)CSS的顔色和背景屬性。先來看一(yī)下(xià)CSS下(xià)的顔色和背景都有哪些屬性吧（如下(xià)表）：
我(wǒ)(wǒ)們還是舉個例子吧。比如上一(yī)節講到的“LEAF”字體(tǐ)，我(wǒ)(wǒ)們在其中(zhōng)加入顔色屬性，在<style>再加入以下(xià)代碼：
color：rgb（204，82，28）；
background-img：url(ss01038.jpg)；
background-repeat：no-repeat；margin-right：15em
//*設置前景色的rgb值爲(204，82，28)，您也可以用顔色的英文名稱直接定義；
設置背景圖案的地址；設置背景圖案不重複顯示；另外(wài)還設置了頁邊距margin屬性
，這個我(wǒ)(wǒ)們以後再講*//
加入代碼後“Leaf”的字體(tǐ)顯示效果是這樣的（如下(xià)圖）：
怎麽樣，是不是比光是定義<font>屬性顯得更加漂亮了。當然您也可以簡便的定義background屬性（象定義font屬性那樣），下(xià)面我(wǒ)(wǒ)告訴一(yī)下(xià)您background屬性的書(shū)寫格式：
屬性：background 屬性值：<background-color>||<background-image>|| <background-repeat>||<background-attacement>||<background-position>
也就是說，使用background屬性可以一(yī)次定義前面講到的一(yī)切有關背景的屬性，包括背景色、背景圖案等等。因此，上面定義“leaf”顔色屬性中(zhōng)有關背景的代碼可以寫成這樣： “background：url（ss01038.jpg）no-reapeat”
好了，至于顔色和背景屬性的功能，您自己也可以去(qù)試一(yī)試。下(xià)一(yī)節我(wǒ)(wǒ)們将介紹CSS的文本屬性。
3、文本屬性
※定義間距
前面說了如何用CSS定義字體(tǐ)、顔色和背景屬性，那麽定義好的文本我(wǒ)(wǒ)們怎麽對它進行排版呢？
下(xià)面我(wǒ)(wǒ)們講述一(yī)下(xià)CSS的文本屬性，還是先來看一(yī)下(xià)文本屬性的詳細列表：
我(wǒ)(wǒ)們可以從表中(zhōng)看到在這裏可以定義文本的文字間距、字母間距、裝飾、對齊方式、縮進方式和行高等屬性。 舉個例子來看看吧。比如下(xià)面這段文字（如左下(xià)圖）：
我(wǒ)(wǒ)們對這段文字加上文本屬性重新排版，排版後的效果如右上圖所示。
我(wǒ)(wǒ)們看到經過文本屬性處理的文本字與字之間多了間距，行與行之間多了行高，對齊方式變成了兩端對齊，并且段首又(yòu)多縮進了兩格。這是怎樣實現的呢？很簡單，隻是在html中(zhōng)加了如下(xià)的代碼：
<p style=“letter-spacing：1em；text-align：justify；text-indent：
4em；line-height：17pt”>……</p>
//*letter-spacing設置了字間距爲1em，其中(zhōng)1em爲一(yī)個長度單位；text-align設
置了對齊方式爲兩端對齊；indent設置了縮進格爲4em；line-height設置了行高爲
17pt*//
從上面的例子，我(wǒ)(wǒ)們可以看出利用CSS的文本屬性可以方便的對頁面中(zhōng)的文本進行排版。下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹文本的Text-decoration屬性的一(yī)個小(xiǎo)應用。
※裝飾超鏈接
網頁默認的鏈接方式是這樣的：未訪問過的鏈接是藍(lán)色文字并帶藍(lán)色的下(xià)劃線，訪問過的超級鏈接是深紫色的文字并帶深紫色的下(xià)劃線。如果您所有的網頁都是這種樣式，是不是很單調呢？
其實，利用文本屬性中(zhōng)的Text-decoration屬性就可以實現對超鏈接的修飾。我(wǒ)(wǒ)們先看下(xià)面的這段代碼：
<html>
<title>link css</title>
<head>
<style>
<!--
//*定義僞類元素（ａ：），大(dà)括号内定義了前景色屬性和文本裝飾屬性，
hover加上‘font-size’屬性目的是讓鼠标激活鏈接時改變字體(tǐ)*//
a：link{color：green;text-decoration：none}
//*未訪問時的狀态，顔色爲綠色(green)，文本裝飾屬性(text-decoration)值
爲沒有(none)*//
a：visited{color：red;text-decoration：none}
//*訪問過的狀态，顔色爲紅色(red)，文本裝飾屬性值爲沒有*//
a：hover{color：blue;text-decoration：overline;font-size：20pt}
//*鼠标激活的狀态，顔色爲藍(lán)色(blue)， 文本裝飾屬性值爲上劃(overline)，
字體(tǐ)大(dà)小(xiǎo)爲20pt*//
-->
</style>
</head>
<body>
<p style=“font-family:行書(shū)體(tǐ)；font-size：18pt”>
<a href=“http：//www.hongen.com”>未訪問的鏈接</a></p>
//*加鏈接，顯示三種不同狀态，并且定義了鏈接文本的字體(tǐ)和大(dà)小(xiǎo)*//
<p> <a href=“http：//www.hongen.com”>訪問過的鏈接</a></p>
<p> <a href=“http：//www.hongen.com”>鼠标激活的鏈接</a></p>
</body>
</html>
您如果想看上述代碼的效果，請點擊這裏。
我(wǒ)(wǒ)們從例子中(zhōng)看到沒有訪問過的鏈接以綠色顯示，并且去(qù)掉了下(xià)劃線；而訪問過的鏈接以紅色且沒有下(xià)劃線顯示；另外(wài)，當鼠标激活鏈接時，鏈接以藍(lán)色顯示，并且加上了上劃線。這種效果是怎麽實現的呢？它除了運用了文本屬性中(zhōng)的text-decoration屬性，而且采用了僞類元素。
通過上面的代碼注釋，相信您應該對僞類元素有一(yī)個大(dà)概認識。實際上我(wǒ)(wǒ)們用到的這種僞類應當稱之爲“錨僞類”，它規定了鏈接不同狀态下(xià)的效果。
怎麽樣，是不是很簡單的就可以實現動态鏈接的效果，趕緊自己動手試一(yī)試吧！下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹“容器”屬性。
4、“容器”屬性
※邊距屬性
聽(tīng)起來是不是很有趣，什麽叫“容器”屬性呢？CSS的容器屬性包括邊距、填充距、邊框和寬度、高度、浮動、清除等屬性。
您想，網頁中(zhōng)的内容肯定是都需要“裝”進這個“容器”裏。“容器”屬性是CSS中(zhōng)非常重要的一(yī)種屬性，我(wǒ)(wǒ)們将分(fēn)類進行學習。
先來看一(yī)下(xià)邊距屬性的詳細列表：
和font屬性一(yī)樣，表中(zhōng)的四個屬性可以用一(yī)個屬性一(yī)次。邊距順序是上、右、下(xià)、左。我(wǒ)(wǒ)們還是用定義邊距屬性前後的兩個例子來看一(yī)下(xià)吧。請看下(xià)面的這幅圖：
我(wǒ)(wǒ)們看到上圖是沒有加上邊距屬性的效果，而下(xià)圖則在<head>中(zhōng)加入了如下(xià)代碼：
body{margin：1em 2em 3em 4em}
//*定義文本的上、右、下(xià)、左的邊距分(fēn)别爲1、2、3、4em*//
産生(shēng)的效果如下(xià)圖所示：
定義了邊距後的頁面，無論您怎麽改變窗口的大(dà)小(xiǎo)，它都會按照您定義好的邊距樣式顯示。
如果在margin裏有缺失的屬性，則按照順序依次排列。比如：
body{margin：1em 3em} 上面這段代碼的含義是：body的上、右邊距爲1、3em。
下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹填充距屬性。
※填充距屬性
本節我(wǒ)(wǒ)将向您介紹填充距屬性。我(wǒ)(wǒ)們先來看一(yī)下(xià)填充距的屬性列表：
首先我(wǒ)(wǒ)們得先了解什麽叫填充距，它與邊距有什麽差别呢？填充距指的是文本邊框與文本之間的距離(lí)。
這樣講是不是有些難懂，由于填充距屬性與margin一(yī)樣，都有一(yī)個一(yī)次定義的屬性：padding，所以我(wǒ)(wǒ)們舉個例子，看一(yī)下(xià)到底什麽叫填充距，請看下(xià)圖：
我(wǒ)(wǒ)們看到上圖中(zhōng)紅框圈住的地方就是填充距起作用的部分(fēn)。實際上上圖的效果隻是在上一(yī)節例子的<head>中(zhōng)把下(xià)面這段代碼加入到Body定義的margin後面：
padding：1em 2em 3em 4em
從上可以看出，紅框标記外(wài)的部分(fēn)屬于margin屬性在起作用。
下(xià)一(yī)節将向您介紹邊框屬性。
※邊框屬性
本節我(wǒ)(wǒ)們來看一(yī)下(xià)種類繁多的邊框屬性，先來看一(yī)下(xià)屬性列表：
是不是看上去(qù)很多，其實應用起來很方便。
隻要靈活的運用一(yī)次定義的屬性就會方便很多。其實還有一(yī)個一(yī)次設置所有邊框的寬度、樣式和顔色屬性的border屬性，但是border隻能使四條邊框的屬性值是一(yī)樣的。我(wǒ)(wǒ)們現在來給前面的例子設置一(yī)個5像素寬、雙邊框并且是紫色的邊框（如下(xià)圖）：
這就是在<head>中(zhōng)定義<p>的屬性，代碼如下(xià)：
P{border：5px double purple}//*定義了四條邊框爲一(yī)樣的值*//
您還可以找一(yī)段文本自己多嘗試一(yī)下(xià)其他的邊框屬性，看看還有什麽效果。下(xià)一(yī)節将向您介紹一(yī)下(xià)“容器”屬性的其他屬性，您将能欣賞到圖文混排的效果。
※圖文混排
我(wǒ)(wǒ)們在來看看“容器”屬性還有什麽其他的屬性，請看屬性列表：
上表中(zhōng)的float屬性很有意思，我(wǒ)(wǒ)們看看用它作的一(yī)個頁面效果（如下(xià)圖）：
您是不是以爲在圖片那裏插入了一(yī)個表格才實現這種圖文混排的效果的呢？
其實不是的，在這裏隻是在<head>中(zhōng)定義了一(yī)下(xià)<img>的float和margin屬性，代碼如下(xià)：
<html>
<title>margin css</title>
<head>
<style>
<!--
img{margin-right：2em；float：left}
//*定義圖片的右邊距爲2em，圖片浮動在文字的左邊*//
-->
</style>
</head>
<body>
<p class=“p2” style=“line-height：17pt”>
<img src=“logo.gif” alt=“floating” >
我(wǒ)(wǒ)公司是一(yī)家以軟件開(kāi)發及銷售爲主業的高新技術企業。 位于高科技産業
密集的清華大(dà)學東門，擁有近4000平米的獨立辦公樓，全體(tǐ)員(yuán)工(gōng)年輕勤奮而富
有創造力，極具挑戰性和競争性。</p>
</body>
</html>
怎麽樣，不用表格也能實現圖文混排的效果，并且減少了大(dà)量的代碼。您還可以試試float的其他效果。
好了，“容器”屬性就講這麽多，我(wǒ)(wǒ)們可以看出，充分(fēn)利用CSS的“容器”屬性，将會使您的頁面布局更加合理，樣式更加漂亮。下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹分(fēn)級屬性。
5、分(fēn)級屬性
如果您使用過Word，那您一(yī)定知(zhī)道Word中(zhōng)有一(yī)個“項目符号和編号”的功能。
在html中(zhōng)，您無需使用前面提到的一(yī)些字體(tǐ)、顔色、容器屬性來對字體(tǐ)、顔色和邊距、填充距等進行初始化。因爲在CSS中(zhōng)，已經提供了進行分(fēn)級的專用分(fēn)級屬性。
分(fēn)級屬性包括了“list-style”（列表樣式）、“list-item”（列表項）等多種屬性，我(wǒ)(wǒ)們先來看一(yī)下(xià)分(fēn)級屬性的詳細列表：
下(xià)面我(wǒ)(wǒ)們來看一(yī)個分(fēn)級屬性的例子，代碼如下(xià)所示：
<html>
<head>
<title> fenji css </title>
<style type=“text/css”>//*定義CSS*//
<!--
p{display：block；white-space：normal}
//*定義顯示屬性爲“block”，意思是在新的區域裏顯示； white-space的屬性
normal使多重空白(bái)合成爲一(yī)個*//
em{display：inline}
//*定義EM的顯示屬性爲“inline” 目的是爲了其控制下(xià)的文本顯示中(zhōng)不折行*//
li{display：list-item；list-style：square}
//*定義li的顯示屬性爲“list-item”，顯示在列表項中(zhōng)加入一(yī)個符号标記， 而
list-style屬性值定義爲square使列表項前的标記爲方塊*//
img{display：block} //*定義圖片屬性爲block使圖片在新的位置打開(kāi)*//
-->
</style>
</head>
<body>
<p><em>sample</em>text<em>sample</em>text<em>sample</em>
text<em>sample</em> text<em>sample</em></p>//*定義一(yī)段文本*//
<ul>//*定義列表項*// <li>list-item 1</li>
<li>list-item 2</li> <li>list-item 3</li> </ul>
<p><img src=“ss01068.jpg” width=“280”height=“185”
alt=“invisible”></p>//*定義一(yī)幅圖片*//
</body>
</html>
上段代碼的顯示效果如下(xià)圖：
我(wǒ)(wǒ)們看到由于定義了<p>的屬性爲Block，所以文本、列表、圖片都在不同的位置上打開(kāi)，Inline屬性使文本不折行，list-style-type的屬性值爲square使列表項前的符号爲方塊；
如果我(wǒ)(wǒ)們在上面的代碼中(zhōng)做一(yī)些改動，則将以另一(yī)種效果顯示，我(wǒ)(wǒ)們在<head>中(zhōng)把“EM”的display屬性值改爲block，使其都在新的位置打開(kāi)；li的“list-style”屬性值改爲“Upper-roman”（大(dà)寫羅馬符号），img的“display”屬性值改爲“none”（讓圖片不顯示）。 修改後的顯示效果如下(xià)圖：
我(wǒ)(wǒ)們看到分(fēn)級屬性也能達到排版的部分(fēn)功能，幾處代碼的改動就可以使頁面發生(shēng)很大(dà)的變化。自己來試一(yī)試其他的效果吧！
下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹鼠标屬性。
6、鼠标屬性
我(wǒ)(wǒ)們知(zhī)道，當把鼠标移動到不同的地方時，當鼠标需要執行不同的功能時，當系統處于不同的狀态時，都會使鼠标的形狀發生(shēng)改變。
用CSS來改變鼠标的屬性，就是當鼠标移動到不同的元素對象上面時，讓鼠标以不同的形狀、圖案顯示。
在CSS當中(zhōng)，這種樣式是通過“cursor”屬性來實現的。Cursor屬性有很多的屬性值，我(wǒ)(wǒ)們來看一(yī)下(xià)它的詳細列表：
我(wǒ)(wǒ)們來看一(yī)個例子吧，請看下(xià)面這段代碼：
<html>
<head>
<title>changemouse</title>
</head>
<body>
<h1 style=“font-family:文鼎新藝體(tǐ)簡”>鼠标效果</h1>//*設置字體(tǐ)*//
<p style=“font-family:行書(shū)體(tǐ)；font-size:16pt；color:red”>
請把鼠标移到相應的位置觀看效果。</p>//*設置字體(tǐ)的名稱、大(dà)小(xiǎo)、顔色*//
<div style=“font-family:行書(shū)體(tǐ)；font-size:24pt；color:green；”>
//*設置該區域内的字體(tǐ)名稱、大(dà)小(xiǎo)、綠色*//
<p><span style=“cursor:hand”>手的形狀</span><br>
//*設置鼠标屬性爲手的形狀*//
<span style=“cursor:move”>移動</span><br>//*設置鼠标屬性爲移動*//
<span style=“cursor:ne-resize”>反方向</span><br>
//*設置鼠标屬性爲反方向*//
<span style=“cursor:wait”>等待</span><br>//*設置鼠标屬性爲等待*//
<span style=“cursor:help”>求助</span>//*設置鼠标屬性爲求助*//
</p>
</div>
</body>
</html>
上述代碼産生(shēng)的效果請您點擊這裏
CSS的屬性就講到這裏，我(wǒ)(wǒ)們看到它的屬性還是比較多的，但是您隻要搞清楚它們都是什麽意思，應用起來就會很方便。在您應用的時候，還可以參照我(wǒ)(wǒ)爲您提供的屬性詳細列表 。
下(xià)一(yī)章将向您介紹CSS定位。
文章來源：http://www.hongen.com/pc/homepage/css/css0301.htm
475003427