additive-symbols

Cú pháp

/* Bộ đôi đơn */
additive-symbols: 3 "*";

/* Danh sách bộ đôi phân tách bằng dấu phẩy */
additive-symbols:
  3 "0",
  2 "\2E\20",
  1 url("symbol.png");

/* Counter nhị phân */
additive-symbols:
  2 "1",
  1 "0";

/* Counter Etruscan (một nền văn minh ở Italy cổ đại) */
additive-symbols:
  100 "𐌟",
  50 "𐌣",
  10 "𐌢",
  5 "𐌡",
  1 "𐌠";

Giá trị

Mô tả chấp nhận danh sách các bộ đôi cộng phân tách bằng dấu phẩy, mỗi bộ đôi gồm hai giá trị sau đây cách nhau bằng khoảng trắng:

<integer>

Giá trị số nguyên không âm chỉ định trọng số số nguyên của giá trị ký hiệu liên quan của bộ đôi.

<symbol>

Chỉ định ký hiệu counter được dùng cho giá trị trọng số được định nghĩa bởi giá trị trọng số <integer> liên quan của bộ đôi.

Mô tả

Mô tả additive-symbols định nghĩa danh sách các bộ đôi cộng phân tách bằng dấu phẩy. Mỗi bộ đôi cộng chứa một số nguyên không âm phân tách bằng khoảng trắng và ký hiệu counter. Để hợp lệ, danh sách phải theo thứ tự giảm dần của số nguyên. Số nguyên và ký hiệu được nối lại để tạo thành ký hiệu counter.

Khi giá trị mô tả system là cyclic, numeric, alphabetic, symbolic hoặc fixed, dùng mô tả symbols() thay vì additive-symbols.

Định nghĩa hình thức

Cú pháp hình thức

additive-symbols = 
  [ <integer [0,∞]> && <symbol> ]#  

<integer> = 
  <number-token>  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

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

Chỉ định ký hiệu cộng

HTML

Trong ví dụ này, system: additive cùng với các giá trị mô tả additive-symbols chỉ định cách biểu diễn số như chữ số La Mã. Giá trị của mỗi phần tử <li> trong danh sách được chuyển đổi thành chữ số La Mã theo các quy tắc định nghĩa trong @counter-style.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li value="109">109</li>
  <li>110</li>
</ul>

CSS

@counter-style uppercase-roman {
  system: additive;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ul {
  list-style: uppercase-roman;
  padding-left: 5em;
}

Kết quả

Đối với mục danh sách có giá trị 109, chữ số C biểu thị 100 và IX biểu thị 9. Điều này tạo ra counter CIX cho mục danh sách 109. Mục danh sách tiếp theo tự động nhận giá trị 110. Chữ số La Mã CX được dẫn xuất từ C là 100 và X là 10.

Thông số kỹ thuật

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

Xem thêm

• Các mô tả @counter-style: system, symbols, negative, prefix, suffix, range, pad, speak-as, fallback
• Thuộc tính kiểu danh sách: list-style, list-style-image, list-style-position
• Hàm symbols() để tạo kiểu counter ẩn danh
• Mô-đun kiểu counter CSS