溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS怎么設置列表樣式屬性，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
列表樣式屬性
在 HTML 中有 2 種列表、無序列表和有序列表，在工作中無序列表比較常用，無序列表就是 ul 標簽和 li 標簽組合成的稱之為無序列表，那什么是有序列表呢？就是 ol 標簽和 li 標簽組合成的稱之為有序列表，列表的基礎知識就簡單說明下，本章內容主要說明的是如何給列表設置樣式，若有不懂列表是什么的園友筆者建議去 W3school官網 進行學習。
列表樣式常用的屬性有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 之前看看列表前面項目符號是什么，讓初學者有一個直觀的印象。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表的list-style-type屬性值為none實踐</title> </head> <body> <ul> <li>成功不是打敗別人，而是改變自己。</li> <li>成功不是打敗別人，而是改變自己。</li> <li>成功不是打敗別人，而是改變自己。</li> </ul> </body> </html>
結果圖
現在愛學習的園友們知道了什么是列表前面的項目符號了，那我們就進入列表的 list-style-type 屬性值為 none 實踐咯。
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type屬性值為none實踐</title>
<style>
.box{
list-style-type: none;
}
</style>
</head>
<body>
<ul class="box">
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
既然能看到這里說明園友已經掌握了，列表的 list-style-type 屬性值為 none 使用，恭喜恭喜恭喜。
屬性值為disc使用方式
在這里說明下列表的 list-style-type 屬性值為 disc ，列表的 list-style-type 屬性值默認就是 disc ，如果是細心的園友已經發現了，上面有現成的列子在這里就不過多的介紹了，這個屬性值為 disc 就跳過了哈。
屬性值為circle使用方式
讓我們進入列表的 list-style-type 屬性值為 circle 實踐，實踐內容如：將列表前面的項目符號設置為空心圓。
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type屬性值為circle實踐</title>
<style>
.box{
list-style-type: circle;
}
</style>
</head>
<body>
<ul class="box">
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
屬性值為square使用方式
讓我們進入列表的 list-style-type 屬性值為 square 實踐，實踐內容如：將列表前面項目符號設置為實心方塊。
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表的list-style-type屬性值為square實踐</title>
<style>
.box{
list-style-type: square;
}
</style>
</head>
<body>
<ul class="box">
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
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官網 進行學習。
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性值為outside使用方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
現在大家應該很清楚的看到了列表前面項目的符號默認在 ul 標簽和 li 標簽之間的位置，現在我們知道了列表前面的項目符號的默認位置，那我們進行 list-style-position 屬性值為 outside 實踐了，實踐內容：將 HTML 頁面中的列表前面的項目符號設置為外面。
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性值為outside使用方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style-position: outside;
}
</style>
</head>
<body>
<ul>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
注意：為什么給列表設置了 list-style-position 屬性值為 outside ，運行結果沒有發生任何變化呢，因為列表前面的項目符號默認就在外面的位置，列表前面的項目符號外面的位置就是 ul 標簽和 li 標簽之間的位置。
屬性值為inside使用方式
通過介紹 list-style-position 屬性值為 outside ，大家已經知道了列表前面項目符號外邊的位置了，接下來我們將列表前面項目符號設置在里面咯。
讓我們進入 list-style-position 屬性值為 inside 實踐，將列表前面項目符號位置設置在里面。
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性值為inside使用方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
注意： list-style-position 屬性值為 inside 作用就是將列表前面項目符號位置設置在 li 標簽中，這就是里面的位置。
list-style-image屬性
list-style-image 屬性作用：將列表前面項目符號設置為一張圖片。
list-style-image屬性說明表
undefinedlist-style-imageundefined
| 屬性值名稱 | 描述 |
|---|---|
| url | 設置列表前面項目符號的圖片的路徑 |
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用list-style-image屬性方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style-image: url(./img/001.png);
}
</style>
</head>
<body>
<ul>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
注意：圖片路徑一定要寫在 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 屬性實踐，既然看到了這里想必園友都已經掌握了本章的內容了。
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用list-style屬性方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 290px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style: none inside url(./img/001.png) ;
}
</style>
</head>
<body>
<ul>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
<li>成功不是打敗別人，而是改變自己。</li>
</ul>
</body>
</html>結果圖
注意： list-style 屬性值可以也 1 個或 2 個 3 個，順序沒有要求，若有不明白的園友可以做個實例看看就明白了，學習就要多嘗試不要偷懶呦。
1.行內樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。2.內嵌樣式，就是將CSS代碼寫在之間，并且用
進行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上
以上是“CSS怎么設置列表樣式屬性”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
