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」(讓圖片不顯示)。 修改後的顯示效果如下圖:
我們看到分級屬性也能達到排版的部分功能,幾處代碼的改動就可以使頁面發生很大的變化。自己來試一試其他的效果吧!