App下載
話題 首頁 > CSS3 教程 > CSS3 教程話題列表 > 詳情

CSS控制列表樣式屬性list-style有哪些?怎么用?

精華
Shirley 2016-11-10 03:39:15 瀏覽(14887) 回復(5) 贊(2)
CSS列表樣式屬性list-style有哪些類型?不同類型CSS控制列表樣式使用時該注意什么?
css css3

回答(5)

云南小天使 精華 2016-11-10

一、什么是CSS列表?


CSS列表是HTML里一種很有用的顯示方式,可以把相關的并列內容整齊地垂直排列,使網(wǎng)頁顯得整潔專業(yè),并讓瀏覽者有一目了然的感覺。 樣式表為列表增加了一些功能,控制列表的樣式包括列表樣式、圖形符號、列表位置三個部分。

1.列表符號
列表符號是指顯示于每一個列表項目前的符號標識。


基本格式如下:
list-style-type:參數(shù)


參數(shù)取值范圍:
·disc:圓形
·circle:空心圓
·square:方塊
·decimal:十進制數(shù)字
·lower-roman:小寫羅馬數(shù)字
·upper-roman:大寫羅馬數(shù)字
·lower-alpha:小寫希臘字母
·upper-alpha:大寫希臘字母
·none:無符號顯示
 {background: 顏色 } 安全顯示列表符   
參數(shù)中的disc是默認選項。


2.圖形符號
圖形符號指原來列表的項目符號將可以使用圖形來代替。


基本格式如下:
list-style-image:URL
URL是用來代替項目符號的圖形文件的地址,可以使用相對地址或絕對地址。


3.列表位置列表位置描述列表在何處顯示。
基本格式如下:
list-style-position:參數(shù)


參數(shù)取值范圍:
·inside:在BOX模型內部顯示
·outside:在BOX模型外部顯示

二、CSS列表分類


CSS列表樣式分為有序列表、無序列表和定義列表。

  • 無序列表(可嵌套)<ul></ul>聲明列表是無序的<li></li>包含一列項目。
  • 有序列表(可嵌套)<ol></ol>聲明列表是有序的<li></li>包含一列項目。
  • 定義列表(dt定義概念、dd解釋;有縮進)

<dl></dl>聲明定義列表
<dt></dt>概念
<dd></dd>概念的解釋

有序列表是按照順序排列如12345、ABCDE等;

無序列表包含圓點、方塊、空心圓等。

CSS列表屬性樣式常見語法如下:

1、 控制顯示:display

語法:{display:none|block|inline|list-item}

作用:改變元素的顯示值,可以將元素類型線上,塊和清單項目相互變換。

說明:



·none 不顯示元素 


·block 塊顯示,在元素前后設置分行符 


·inline 刪除元素前后的分行符,使其并入其它元素流中 


·list-item 將元素設置為清單中的一行 注意:可用 display 屬性值生成插入標題和補加清單或讓圖形變成線上顯示。

2、控制空白:white-space

語法:{white-space:normal|pre|nowarp}

作用:控制元素內的空白。

說明:



·normal 不改變,保持缺省值,在瀏覽器頁面長度處換行。 


·pre 要求文檔顯示中采用源代碼中的格式。 


·nowarp 不讓訪問者在元素內換行。

3、符號列表:list-style-type

語法:{list-style-type:none|disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha}

作用:指定清單所用的強調符或編號類型

說明:

 ·none - 無強調符 
 ·disc - 碟形強調符(實心圓) 
 ·circle - 圓形強調符(空心圓) 
 ·square - 方形強調符(實心) 
 ·decimal - 十進制數(shù)強調符 
 ·lower-roman - 小寫羅馬字強調符 
 ·upper-roman - 大寫羅馬字強調符 
 ·lower-alpha - 小寫字母強調符 
 ·upper-alpha - 大寫字母強調符

例子:

LI.square { list-style-type: square }
UL.plain { list-style-type: none }
OL { list-style-type: upper-alpha } /* A B C D E etc. */
OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */

4、圖片列表:list-style-image

語法:{list-style-image:URL}

作用:用于將清單中標準強調符換成所選的圖形

說明: ·url - 圖形URL地址

例子:

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x { list-style-image: url(x.png) }

  1. 位置列表:list-style-position

語法:{list-style-position:inside|outside}

作用:用于設置強調符的縮排或伸排,這個屬性可以讓強調符突出于清單以外或與清單項目對齊。

說明:

·inside - 縮排,將強調符與清單項目內容左邊界對齊
·outside - 伸排,強調符突出到清單項目內容左邊界以外

6、 目錄列表:list-style

語法:{list-style:目錄樣式類型|目錄樣式位置|url}

作用:目錄樣式屬性是目錄樣式類型、目錄樣式位置,和目錄樣式圖象屬性的略寫

說明:

·list-style-type ·list-style-position 


·list-style-image

注意:這些值的細節(jié)見各個屬性部分。

例子:

LI.square { list-style: square inside }
UL.plain { list-style: none }
UL.check { list-style: url(/LI-markers/checkmark.gif) circle }
OL { list-style: upper-alpha }
OL OL { list-style: lower-roman inside }

7、鼠標形狀cursor

語法:{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

作用:CSS提供了多達13種的鼠標形狀,供我們選擇。

說明:

·hand 手形 
·crosshair 十字形 
·text 文本形 
·wait 沙漏形 
·move 十字箭頭形 
·help 問號形 
·e-resize 右箭頭形 
·n-resize 上箭頭形 
·nw-resize 左上箭頭形 
·w-resize 左箭頭形 
·s-resize 下箭頭形 
·se-resize 右下箭頭形 
·sw-resize 左下箭頭形

可參閱W3Cschool官網(wǎng)上的《CSS 列表樣式(ul)》及《CSS list-style 屬性

三、CSS列表樣式屬性list-style的使用方法


list-style

定義:

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

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

list-style-image

說明:

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

取值:

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

list-style-position

說明:

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

取值:

outside : 默認值。列表項目標記放置在文本以外,且環(huán)繞文本不根據(jù)標記對齊


inside : 列表項目標記放置在文本以內,且環(huán)繞文本根據(jù)標記對齊

list-style-type

說明:

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

取值:

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

使用背景圖片改變列表符

list-style-image:url(xxx.jpg);

改變列表符位置

list-style-position:

inside列表項目標記放在文本內,且對標記對齊 


outsid(默認)列表項目放在標記外,不根據(jù)標記對齊
一筆荒蕪 2018-05-31

這個問題我也不清楚,等大佬來解決吧。。

1144100656 2018-05-31

有同樣等問題咋解決,只能慢慢等大神啦.留名留名。。

1152696398 2018-05-31

大神在哪里呀,大神在哪里呀,大神在哪里呀.

要回復,請先登錄 或者注冊