網站列表list屬性介紹

作者：佚名   時間：2014-03-20   分享到：

網站列表list屬性介紹

css標準允許控制列表元素的外觀-尤其是有序和無序列表。

瀏覽器會你格式化任何其他塊項目一樣格式化列表項，除了這個塊的內容前面有一些排序記號外。對無序列表來說，這個記號是某種分類記號；對編號來說，這個記號是數字或阿拉伯字母或符號。css列表屬性允許控制列表項記號的外觀和位置。

list-style-image屬性定義了瀏覽器用來標記一個列表項的圖像。這個屬性值是一個圖像文件的url或者關鍵字none。默認值是none。

圖像是較受歡迎的列表記號。如果它可以使用，瀏覽器將顯示這個圖像來替代任何其他定義的記號。如果圖像不可使用或者如果用戶禁止調用圖像，將使用list-style-type屬性定義的記號。

HTMl/XHTML作者可以使用list-style-image屬性來給無序列表定義定制的項目符號。當任何圖像可以用作項目符號時，我們建議使記號GIF或JPEG圖像尺寸很小以確保有效地顯示列表。例如，通過在服務器上的文件mybullet.gif中放置需要的項目符號圖像，就可以使用那個圖像：

li{list-style-image:url(pics/mybullet.gif); list-style-type:square}

在這個示例中，如果瀏覽器能夠成或下載mybullet.gif，那么將使用這個圖像。否則，瀏覽器將使用一個常規的方塊形項目符號。

有兩種方法可用來定位與一個列表項有關的記號：在與項目有關的塊外面或里面。因此，list-style-position屬性接受以下兩個值之一：inside(內部)或outside（外部）。

默認值是outside,表示這個項目記號將懸掛于這一項的左側，這個項目列表使用的是“outside”標記。inside值使得列表項圍繞著這個記號，很像一個懸浮圖像：這個項目列表使用的是“inside”標記，注意文本第二行不會縮進，反而與記號的左邊緣對齊。

list-style-type屬性有雙重任務，決定了有序和無序列表項如何顯示在能識別樣式的瀏覽器上。這個屬性對列表項的效果與type屬性一樣。

用于無序列表項時，list-style-type屬性接受以下4個值之一：disc、circle、square或none。瀏覽器用相應的方法來給元序列表項做標記。默認值是disc;瀏覽器根據列表的嵌套層來改變默認值。

用于有序列表項時，list-style-type屬性接受以下6個值之一：decimal、lower-roman、upper-roman、lower-alpha、upper-alphan或none。這些值分別把項目編后格式化為十進制值、小寫羅馬數字、大寫羅馬數字、小寫字母或大寫字母。大部分瀏覽器都默認使用十進制編號策略。

list-style屬性是所有其他列表類型屬性的縮略形式，可以按照任何順序接受用于list-style-type、list-style-position和list-style-image屬性的值。以下是有效的list-stle屬性:

li{list-style: disc}

li{list-style: lower-roman imside}

li{list-style: url(路徑)square}

第一個示例創建了用圓盤做項目符號的列表項。第二個示例使得編號列表項使用小寫羅馬數字，顯示在列表項塊的里面。在最后一個示例中，如果被引用的圖像不可用，將用一個方塊作為項目符號。