1. Web
  2. CSS
  3. Reference
  4. Properties
  5. list-style-image

list-style-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính CSS list-style-image đặt hình ảnh được dùng làm dấu đầu dòng của mục danh sách.

Thường tiện hơn khi sử dụng thuộc tính rút gọn list-style.

Try it

list-style-image: url("/shared-assets/images/examples/rocket.svg");

list-style-image: none;

<section class="default-example" id="default-example">
  <div>
    <p>NASA Notable Missions</p>
    <ul class="transition-all unhighlighted" id="example-element">
      <li>Apollo</li>
      <li>Hubble</li>
      <li>Chandra</li>
      <li>Cassini-Huygens</li>
      <li>Spitzer</li>
    </ul>
  </div>
</section>

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

Note: Thuộc tính này được áp dụng cho các mục danh sách, tức là các phần tử có display: list-item; theo mặc định bao gồm các phần tử <li>. Vì thuộc tính này được kế thừa, nó có thể được đặt trên phần tử cha (thường là <ol> hoặc <ul>) để áp dụng cho tất cả các mục danh sách.

Cú pháp

css
/* Giá trị từ khóa */
list-style-image: none;

/* Giá trị <url> */
list-style-image: url("star-solid.gif");

/* Giá trị hình ảnh hợp lệ */
list-style-image: linear-gradient(to left bottom, red, blue);

/* Giá trị toàn cục */
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;

Giá trị

<image>

Một hình ảnh hợp lệ được dùng làm dấu đầu dòng.

none

Chỉ định rằng không có hình ảnh nào được dùng làm dấu đầu dòng. Nếu giá trị này được đặt, dấu đầu dòng được định nghĩa trong list-style-type sẽ được sử dụng thay thế. Đây là giá trị mặc định của list-style.

Định nghĩa chính thức

Initial valuenone
Applies tolist items
Inheritedyes
Computed valueThe keyword none or the computed <image>
Animation typediscrete

Cú pháp chính thức

list-style-image = 
  <image>  |
  none     

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Ví dụ

Sử dụng giá trị url

Ví dụ này có một ngôi sao làm dấu đầu dòng, được thêm vào bằng hàm hình ảnh <url>.

HTML

html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS

css
ul {
  list-style-image: url("star-solid.gif");
}

Kết quả

Sử dụng gradient

Ví dụ này có một CSS gradient làm dấu đầu dòng, được tạo bằng hàm hình ảnh linear-gradient().

HTML

html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS

css
ul {
  font-size: 200%;
  list-style-image: linear-gradient(to left bottom, red, blue);
}

Kết quả

Thông số kỹ thuật

Specification
CSS Lists and Counters Module Level 3
# image-markers

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content