溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS怎么設(shè)置列表樣式屬性

發(fā)布時間：2021-05-20 10:26:59 來源：億速云 閱讀：132 作者：小新 欄目：web開發(fā)

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

列表樣式屬性

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

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

list-style-type屬性

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

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

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

屬性值為none使用方式

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

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

代碼塊

<!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>

結(jié)果圖

CSS怎么設(shè)置列表樣式屬性

現(xiàn)在愛學(xué)習(xí)的園友們知道了什么是列表前面的項目符號了，那我們就進入列表的 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>

結(jié)果圖

CSS怎么設(shè)置列表樣式屬性

既然能看到這里說明園友已經(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 實踐，實踐內(nèi)容如：將列表前面的項目符號設(shè)置為空心圓。

代碼塊

<!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>

結(jié)果圖

CSS怎么設(shè)置列表樣式屬性

屬性值為square使用方式

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

代碼塊

<!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>

結(jié)果圖

CSS怎么設(shè)置列表樣式屬性

list-style-position屬性

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

list-style-position屬性值說明表 

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

屬性值為outside使用方式

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

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

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

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

代碼塊

<!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>

結(jié)果圖

CSS怎么設(shè)置列表樣式屬性

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

代碼塊

<!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>

結(jié)果圖

CSS怎么設(shè)置列表樣式屬性

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

屬性值為inside使用方式

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

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

代碼塊

<!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>

結(jié)果圖

CSS怎么設(shè)置列表樣式屬性

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

list-style-image屬性

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

 list-style-image屬性說明表 


undefinedlist-style-imageundefined

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


代碼塊

<!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>

結(jié)果圖

CSS怎么設(shè)置列表樣式屬性

注意：圖片路徑一定要寫在 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)掌握了本章的內(nèi)容了。

代碼塊

<!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>

結(jié)果圖

CSS怎么設(shè)置列表樣式屬性

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

css的三種引入方式

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

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

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

以上是“CSS怎么設(shè)置列表樣式屬性”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手