5、分級屬性
如果您使用過Word，那您一定知道Word中有一個「項目符號和編號」的功能。
在html中，您無需使用前面提到的一些字體、顏色、容器屬性來對字體、顏色和邊距、填充距等進行初始化。因為在CSS中，已經提供了進行分級的專用分級屬性。
分級屬性包括了「list-style」（列表樣式）、「list-item」（列表項）等多種屬性，我們先來看一下分級屬性的詳細列表：
下面我們來看一個分級屬性的例子，代碼如下所示：
<html>
<head>
<title> fenji css </title>
<style type=「text/css」>//*定義CSS*//
<!--
p{display：block；white-space：normal}
//*定義顯示屬性為「block」，意思是在新的區域裡顯示； white-space的屬性
normal使多重空白合成為一個*//
em{display：inline}
//*定義EM的顯示屬性為「inline」 目的是為了其控制下的文本顯示中不折行*//
li{display：list-item；list-style：square}
//*定義li的顯示屬性為「list-item」，顯示在列表項中加入一個符號標記， 而
list-style屬性值定義為square使列表項前的標記為方塊*//
img{display：block} //*定義圖片屬性為block使圖片在新的位置打開*//
-->
</style>
</head>
<body>
<p><em>sample</em>text<em>sample</em>text<em>sample</em>
text<em>sample</em> text<em>sample</em></p>//*定義一段文本*//
<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>//*定義一幅圖片*//
</body>
</html>
上段代碼的顯示效果如下圖：
我們看到由於定義了<p>的屬性為Block，所以文本、列表、圖片都在不同的位置上打開，Inline屬性使文本不折行，list-style-type的屬性值為square使列表項前的符號為方塊；
如果我們在上面的代碼中做一些改動，則將以另一種效果顯示，我們在<head>中把「EM」的display屬性值改為block，使其都在新的位置打開；li的「list-style」屬性值改為「Upper-roman」（大寫羅馬符號），img的「display」屬性值改為「none」（讓圖片不顯示）。 修改後的顯示效果如下圖：
我們看到分級屬性也能達到排版的部分功能，幾處代碼的改動就可以使頁面發生很大的變化。自己來試一試其他的效果吧！
