小編給大家分享一下CSS怎么設置列表樣式屬性，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為集寧等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及集寧網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站制作、成都做網(wǎng)站、集寧網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

列表樣式屬性

•  在HTML 中有2 種列表、無序列表和有序列表，在工作中無序列表比較常用，無序列表就是ul 標簽和li 標簽組合成的稱之為無序列表，那什么是有序列表呢？就是ol 標簽和li 標簽組合成的稱之為有序列表，列表的基礎知識就簡單說明下，本章內容主要說明的是如何給列表設置樣式，若有不懂列表是什么的園友筆者建議去 W3school官網(wǎng) 進行學習。

• 列表樣式常用的屬性有4種如：list-style-type 、list-style-position 、list-style-image 、list-style ，在這里就是簡單說明下列表常用的屬性名稱而已，具體使用或每一個屬性值的介紹，在下面會具體的說明，愛學習的園友不用擔心哦。

list-style-type屬性

• list-style-type屬性作用:就是設置列表前面項目符號的類型。

• list-style-type屬性值說明表。

屬性值	描述
none	將列表前面項目符號去除掉。
disc	將列表前面項目符號設置為實心圓。
circle	將列表前面項目符號設置為空心圓。
square	將列表前面項目符號設置為實心小方塊。

屬性值為none使用方式

• 讓我們進入列表的list-style-type 屬性值為none 實踐，實踐內容如：使用class 屬性值為.box 將列表前面項目符號去除掉。

• 我們在實踐列表的list-style-type 屬性值為none 之前看看列表前面項目符號是什么，讓初學者有一個直觀的印象。

代碼塊

    
    
    
    

  

    

        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
    

結果圖

現(xiàn)在愛學習的園友們知道了什么是列表前面的項目符號了，那我們就進入列表的list-style-type 屬性值為none 實踐咯。

代碼塊

    
    
    
    
    

  

    
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
    

結果圖

既然能看到這里說明園友已經(jīng)掌握了，列表的list-style-type 屬性值為none 使用，恭喜恭喜恭喜。

屬性值為disc使用方式

在這里說明下列表的list-style-type 屬性值為disc ，列表的list-style-type 屬性值默認就是disc ，如果是細心的園友已經(jīng)發(fā)現(xiàn)了，上面有現(xiàn)成的列子在這里就不過多的介紹了，這個屬性值為disc 就跳過了哈。

屬性值為circle使用方式

讓我們進入列表的list-style-type 屬性值為circle 實踐，實踐內容如：將列表前面的項目符號設置為空心圓。

代碼塊

    
    
    
    
    

  

    
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
    

結果圖

屬性值為square使用方式

讓我們進入列表的list-style-type 屬性值為square 實踐，實踐內容如：將列表前面項目符號設置為實心方塊。

代碼塊

    
    
    
    
    

  

    
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
    

結果圖

list-style-position屬性

list-style-position 屬性作用：設置列表前面項目符號的位置，list-style-position 屬性有2個屬性值，分別是outside 、inside ，具體說明看下面的屬性值說明表。

list-style-position屬性值說明表

屬性值	描述
outside	將列表前面項目符號設置在外面。
inside	將列表前面項目符號設置在里面。

屬性值為outside使用方式

• 在實踐list-style-position 屬性值為outside 之前，我們先看看列表前面的項目符號的默認位置在哪，筆者為了讓初學者有一個直觀的印象，筆者將HTML 頁面中的ul 標簽li 標簽設置了一些樣式。

•  ul 標簽樣式如：：width 寬度設置為300px 像素、height 高度為150px 像素、border 邊框為（1px 像素、顯示是實線、邊框顏色為藍色）、樣式。

• ul 標簽中的li 標簽設置樣式如：width 寬度設置為280px 像素、height 高度為30px 像素line-height 行高為30px 像素、border 邊框為（1px 像素、顯示是實線、邊框顏色為紅色）、樣式。

• 如果園友沒有掌握border 邊框的知識，愛學習的園友不用擔心以后會寫border 邊框的文章，若有想了解border 邊框知識的園友可以去W3school官網(wǎng) 進行學習。

代碼塊

    
    
    
    
    

  

    

        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
    
   

結果圖

現(xiàn)在大家應該很清楚的看到了列表前面項目的符號默認在ul 標簽和li 標簽之間的位置，現(xiàn)在我們知道了列表前面的項目符號的默認位置，那我們進行list-style-position 屬性值為outside 實踐了，實踐內容：將HTML 頁面中的列表前面的項目符號設置為外面。

代碼塊

    
    
    
    
    

  

    

        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
    
   

結果圖

注意：為什么給列表設置了list-style-position 屬性值為outside ，運行結果沒有發(fā)生任何變化呢，因為列表前面的項目符號默認就在外面的位置，列表前面的項目符號外面的位置就是ul 標簽和li 標簽之間的位置。

屬性值為inside使用方式

1.  通過介紹list-style-position 屬性值為outside ，大家已經(jīng)知道了列表前面項目符號外邊的位置了，接下來我們將列表前面項目符號設置在里面咯。

2. 讓我們進入list-style-position 屬性值為inside 實踐，將列表前面項目符號位置設置在里面。

代碼塊

    
    
    
    
    

  

    

        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
    
   

結果圖

注意：list-style-position 屬性值為inside 作用就是將列表前面項目符號位置設置在li 標簽中，這就是里面的位置。

list-style-image屬性

list-style-image 屬性作用：將列表前面項目符號設置為一張圖片。

 list-style-image屬性說明表

undefinedlist-style-imageundefined

屬性值名稱	描述
url	設置列表前面項目符號的圖片的路徑

代碼塊

    
    
    
    
    

  

    

        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
    
   

結果圖

注意：圖片路徑一定要寫在url(./img/001.png); 括號當中，不然不會被渲染的，圖片路徑可以是相對路徑也可以絕對路徑。

list-style屬性

list-style 屬性是（list-style-type 屬性、list-style-position 屬性、list-style-image 屬性）的一個簡寫屬性，它集成了（list-style-type 屬性、list-style-position 屬性、list-style-image 屬性）的功能。

讓我們進入list-style 屬性實踐，既然看到了這里想必園友都已經(jīng)掌握了本章的內容了。

代碼塊

    
    
    
    
    

  

    

        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
        
成功不是打敗別人，而是改變自己。
    
   

結果圖

注意：list-style 屬性值可以也1 個或2 個3 個，順序沒有要求，若有不明白的園友可以做個實例看看就明白了，學習就要多嘗試不要偷懶呦。

css的三種引入方式

1.行內樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。2.內嵌樣式，就是將CSS代碼寫在之間，并且用

進行聲明。3.外部樣式，其中鏈接樣式是使用頻率高，最實用的樣式，只需要在之間加上

就可以了。其次就是導入樣式，導入樣式和鏈接樣式比較相似，采用@import樣式導入CSS樣式表，不建議使用。

以上是“CSS怎么設置列表樣式屬性”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標題：CSS怎么設置列表樣式屬性-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://weahome.cn/article/pjjei.html