405 css樣式的研究 list-style-type 屬性研究

CSS 列表的樣式 list-style-type、list-style-position和list-style-image 屬性

 

在CSS中，列表元素是一個塊框，列表中的每一個表項也是一個塊框，只是在表項前面多了一個項目符號。列表的格式化，主要由瀏覽器完成 而不是由設計人員完成 設計人員只能經過 list-style屬性來定義列表的樣式

list-style屬性只對 display 屬性值爲 list-item 的對象有效，對其它類型對象無效。list-style屬性的語法格式爲：

list-style：[ list-style-type ] || [ list-style-position ] || [ list-style-image ]
也就是說，list-style屬性能夠分解爲 list-style-type、list-style-position和list-style-image 這3個獨立的屬性，下面分別進行介紹。

list-style-type

list-style-type屬性用來定義列表所使用的項目符號的類型，可選值有 none | disc | circle | square | decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-roman | upper-roman，默認值爲 disc。

經常使用屬性值及效果說明見表 6‑1：

表 6-1 list-style-type屬性的經常使用屬性值及效果說明
屬性值 效果說明
none 不使用任何項目符號
disc 默認值，實心圓
circle 空心圓
square 實心矩形
decimal 數字一、二、三、四、5
decimal-leading-zero 以0打頭的數字，0一、0二、0三、0四、05
lower-alpha 小寫英文字母，a、b、c、d、e
upper-alpha 大寫英文字母，A、B、C、D、E
lower-roman 小寫羅馬數字，ⅰ、ⅱ、ⅲ、ⅳ、ⅴ
upper-roman 大寫羅馬數字，Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ (全是手寫 作個圖會更清楚 但太麻煩 浪費時間)

if一個元素的 list-style-image屬性:none ,or list-style-image指定圖像沒法正常時，由 list-style-type屬性決定 list-item 元素的外觀

CSS沒法區別一個列表是有序，仍是無序列表，不論是有序仍是無序列表，都是用 list-style-type屬性來定義列表項符號。

只要我願意，徹底可讓一個有序列表使用實心圓，而非數字做爲項目符號。若是項目符號設置爲數字或字母，這些數字或字母由瀏覽器自動計算

若是爲 ul  ol 定義 list-style-type屬性，則全部 li 都使用相同的項目符號。固然也能夠爲 li 元素單獨設置type屬性，讓只對該 li 元素有效。

.disc {
   list-style-type: disc;
}
.circle {
   list-style-type: circle;
}
.decimal-leading-zero {
   list-style-type: decimal-leading-zero;
}
.lower-alpha {
   list-style-type: lower-alpha;
}
.upper-roman {
   list-style-type: upper-roman;
}          除了第一個好像其餘都沒學嗎 一點印象也沒有
上述代碼定義 5 個類，每一個類定義了不一樣的列表項目符號類型，這 5 個類分別用於同一個 ul 元素下的不一樣 li 元素。

<ul>
    <li class="disc">disc：默認值，實心圓</li>
    <li class="circle">circle：空心圓</li>
    <li class="decimal-leading-zero">decimal-leading-zero：以0打頭的數字 0一、02</li>
    <li class="lower-alpha">lower-alpha：小寫英文字母a、b、c、d、e</li>
    <li class="upper-roman">upper-roman：大寫羅馬數字Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ</li>
</ul>

 list-style-type屬性效果
5 個類分別用同一個 ul 不一樣 li 元素後，不一樣的 li 具備不一樣的項目符號。

若是禁止顯示項目符號，把 list-style-type屬性值： none，none 會致使瀏覽器在本來放置項目符號的位置不顯示任何內容，蛋撻不會中斷有序列表

如，有序列表元素：

<ol>
    <li>List Item 1</li>
    <li style = "list-style-type: none;">List Item 2</li>
    <li>List Item 3</li>
</ol>

 list-style-type屬性具備繼承性，因此，若是但願嵌套列表中使用不一樣的項目符號，可能須要在內層列表中單獨定義。

list-style-position

list-style-position屬性設置列表項目符號的位置及列表項的對齊方式， outside | inside，默認 outside。

outside 表示列表項目符號放在內容外，列表項之內容爲準對齊 inside 表示項目符號放在內容之內，列表項以項目符號爲準對齊。如：

ul  {
   padding: 0;
   border: 1px solid #444;
   list-style-type: square;
}
.outside  {
    list-style-position: outside;
}
.inside  {
    list-style-position: inside;
}
<ul class = "outside">
    <li>outside的列表，列表項之內容爲準對齊</li>
    <li>outside的列表，列表項之內容爲準對齊</li>
</ul>
<ul class = "inside">
    <li>inside的列表，列表項以標記爲準對齊</li>
    <li>inside的列表，列表項以標記爲準對齊</li>
</ul>
上述代碼中，第一個列表採用 outside 列表項標記，第二個列表採用 inside 列表項標記

 list-style-position屬性效果
若是列表項內容爲多行，在內容發生換行後，outside 的列表項是之內容爲準對齊，而 inside 的列表項則以項目符號爲準對齊。

outside 列表的項目符號不但出如今列表項的內容以外，也出如今列表元素的內容以外，這是由於項目符號實際上並非列表內容區的一部分，它不佔據容器的空間

因此，在列表元素 margin 或 padding 是 0 時，項目符號就有可能覆蓋其它或被其它覆蓋 若是發現列表的項目符號顯示不出來，這多是緣由之一 （純屬本身想，不爲準）

list-style-image

提供的列表項目符號，不能知足人的須要，而且選擇的範圍有限  list-style-image屬性定義一幅圖像，取代項目符號

語法格式爲：list-style-image: none | url()

默認爲none，表示 list-style-type屬性指定的列表項目符號；url()表示url 指定的圖像取代列表項目符號，若是圖像無效， list-style-type屬性會生效

ul  {
    list-style-image: url(img/square.png);
}
<ul>
<li>list-style-type屬性</li>
<li>list-style-position屬性</li>
<li>list-style-image屬性</li>
ul
代碼中，使用圖像 square.png 做爲列表項標記

list-style-image屬性效果
就這麼簡單，只需一個 url() ，可以使用圖像做爲項目符號不過，在選擇圖像時要小心，選擇合適尺寸的圖片，不然項目符號不清晰

一般，爲了防止一些意外狀況，如圖像未能加載、或被破壞、或瀏覽器沒法識別圖像的格式等等，列表定義一個備用的 list-style-type 是一個很好的實踐。

ul  {
    list-style-image: url(img/square.png);
    list-style-type: square;
}
因爲list-style-image屬性具備繼承性，因此，內層的全部列表都會使用該圖像做爲項目符號。若是不但願這種狀況發生，假如但願內層列表使用實心矩形

就須要把內層列表的 list-style-type設置 square 另外，因爲 list-style-image比 list-style-type屬性的優先級高。所以，還須要把內層列表的 list-style-image屬性爲 none。

ul ul {
    list-style-image: none;
    list-style-type: square;
}