DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS教程:解析CSS列表樣式屬性list-style
CSS教程:解析CSS列表樣式屬性list-style
編輯:CSS進階教程     

平時制作頁面中可對屬性list-style在list-item對象中常用,但用的都不深。一般都設為none重置整個頁面就差不多OK,可能很多人包括本人對屬性list-style-type更細節方面的屬性並不是很了解,更有可能對屬性list-style和屬性list-style-type概念會比較模糊,現有必要把它提出來重新學習一下,故整理如下。

● list-style

定義:用於在一個聲明中設置一個列表的所有屬性的簡寫屬性,該屬性是一個簡寫屬性,涵蓋了所有其他列表樣式屬性,僅作用於具有display值等於list-item的對象(如li對象)。

相關 : list-style-image || list-style-position || list-style-type

● list-style-image
說明: 設置或檢索作為對象的列表項標記的圖像。若此屬性值為 none 或指定 url 地址的圖片不能被顯示時,list-style-type 屬性將發生作用。

取值:

none :  默認值。不指定圖像
url ( url ) :  使用絕對或相對 url 地址指定圖像

● list-style-position
說明: 設置或檢索作為對象的列表項標記如何根據文本排列。假如一個列表項目的左外補丁( margin-left )被設置為 0 ,則列表項目標記不會被顯示。左外補丁( margin-left )最小可以被設置為 30 。僅作用於具有 display 屬性值等於 list-item 的對象。如 li 對象。

取值:

outside :  默認值。列表項目標記放置在文本以外,且環繞文本不根據標記對齊
inside :  列表項目標記放置在文本以內,且環繞文本根據標記對齊

● list-style-type
說明: 設置或檢索對象的列表項所使用的預設標記。若 list-style-image 屬性值為 none 或指定 url 地址的圖片不能被顯示時,此屬性將發生作用。

取值:

disc :  CSS1 實心圓
circle :  CSS1 空心圓
square :  CSS1 實心方塊
decimal :  CSS1 阿拉伯數字
lower-roman :  CSS1 小寫羅馬數字
upper-roman :  CSS1 大寫羅馬數字
lower-alpha :  CSS1 小寫英文字母
upper-alpha :  CSS1 大寫英文字母
none :  CSS1 不使用項目符號
armenian :  CSS2 傳統的亞美尼亞數字
cjk-ideographic :  CSS2 淺白的表意數字
georgian :  CSS2 傳統的喬治數字
lower-greek :  CSS2 基本的希臘小寫字母
hebrew :  CSS2 傳統的希伯萊數字
hiragana :  CSS2 日文平假名字符
hiragana-iroha :  CSS2 日文平假名序號
katakana :  CSS2 日文片假名字符
katakana-iroha :  CSS2 日文片假名序號
lower-latin :  CSS2 小寫拉丁字母
upper-latin :  CSS2 大寫拉丁字母

補充:此CSS2.1提出的.IE6,Firefox1.5+,Opera9+支持此屬性,所以以數字方式顯示列表也可以用ul來指定,並不一定必需要用ol來寫。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved