• Home » 
  • Lập Trình » 
  • CSS » 
  • Các thuộc tính dùng để định dạng cho danh sách

Các thuộc tính dùng để định dạng cho danh sách

By
Table of Contents

Định dạng danh sách trong CSS giúp bạn tạo danh mục hiển thị chuyên nghiệp và thu hút hơn. Các thuộc tính như list-style-type, list-style-image, list-style-position, và list-style cho phép bạn tùy chỉnh kiểu danh mục, sử dụng hình ảnh làm dấu đầu dòng, định vị trí của chỉ mục và áp dụng định dạng tổng quát một cách linh hoạt. Hãy khám phá cách sử dụng những thuộc tính này để tối ưu hóa danh sách trên trang web của bạn!

– Dưới đây là bốn thuộc tính thường được sử dụng trong việc định dạng cho danh sách:

list-style-type – Thuộc tính này được dùng để thiết lập “kiểu chỉ mục” cho các danh mục bên trong danh sách.
list-style-image – Thuộc tính này được dùng để thiết lập “chỉ mục bằng hình ảnh” cho các danh mục bên trong danh sách.
list-style-position – Thuộc tính này dùng để thiết lập vị trí của các chỉ mục.
list-style – Thuộc tính này là cú pháp tổng quát dùng để định dạng cho danh sách (thay vì phải kết hợp các thuộc tính list-style-type, list-style-image, list-style-position thì bây giờ chúng ta chỉ cần sử dụng duy nhất mỗi thuộc tính này là đủ)

Thuộc tính list-style-type trong CSS

– Thuộc tính list-style-type được dùng để thiết lập “kiểu chỉ mục” cho các danh mục trong danh sách.

– Cú pháp:

list-style-type: kiểu chỉ mục;

– Dưới đây là các kiểu chỉ mục được áp dụng cho danh sách có thứ tự:

decimal
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
 Xem ví dụ
decimal-leading-zero
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
lower-alpha
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
upper-alpha
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
lower-roman
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
upper-roman
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
lower-greek
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
armenian
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
cjk-ideographic
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
georgian
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
hebrew
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
hiragana
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
hiragana-iroha
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
katakana
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
katakana-iroha
  1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

– Dưới đây là các kiểu chỉ mục được áp dụng cho danh sách không có thứ tự:

disc
  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
 Xem ví dụ
circle
  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
square
  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  • . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

– Lưu ý: Nếu không muốn thiết lập “chỉ mục” cho các danh mục trong danh sách thì các bạn có thể thực hiện bằng cách gán giá trị none cho thuộc tính list-style-type.

Thuộc tính list-style-image trong CSS

– Thuộc tính list-style-image được sử dụng để thiết lập “chỉ mục bằng hình ảnh” cho các danh mục nằm ở bên trong danh sách.

– Cú pháp:

list-style-image: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

none – Không thiết lập chỉ mục bằng hình ảnh cho các danh mục. Xem ví dụ
url() – Chỉ định một tập tin hình ảnh cụ thể dùng làm chỉ mục cho danh mục.
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính list-style-image có giá trị là none)
inherit – Kế thừa giá trị thuộc tính list-style-image từ phần tử cha của nó.

– Lưu ý: Khi chúng ta sử dụng hình ảnh để làm chỉ mục cho các danh mục thì mặc định các chỉ mục sẽ có kích thước bằng với kích thước của tấm hình được dùng làm chỉ mục. Vì vậy, nếu muốn sử dụng hình ảnh để làm chỉ mục thì trước tiên chúng ta cần phải điều chỉnh kích thước của tấm hình sao cho nó phù hợp với kích thước của cái chỉ mục mà mình cần (để điều chỉnh kích thước của tấm hình thì chúng ta có thể sử dụng các phần mềm chỉnh sửa hình ảnh như: photoshop, paint, . . . .)

Thuộc tính list-style-position trong CSS

– Khi chúng ta tạo một cái danh sách thì mặc định cái danh sách đó sẽ có một vùng đệm nằm ở bên trái, chỉ mục của các danh mục sẽ nằm bên trong vùng đệm này.

Ví dụ:
– Tôi có một cái danh sách như bên dưới:

  • Tài liệu học HTML
  • Tài liệu học CSS
  • Tài liệu học JavaScript

– Tôi tạo một cái đường viền màu xanh cho danh sách, đường viền màu đỏ cho các danh mục, thì các bạn sẽ thấy: “chỉ mục không nằm bên trong danh mục mà chúng sẽ nằm bên ngoài danh mục”

  • Tài liệu học HTML
  • Tài liệu học CSS
  • Tài liệu học JavaScript

– Từ đây, thuộc tính list-style-position được dùng để thiết lập lại vị trí của các chỉ mục.

list-style-position: value;

– Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

outside – Chỉ mục nằm bên ngoài danh mục. Xem ví dụ
inside – Chỉ mục nằm bên trong danh mục.
initial – Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính list-style-position có giá trị là outside)
inherit – Kế thừa giá trị thuộc tính list-style-position từ phần tử cha của nó.

Thuộc tính list-style trong CSS

– Thuộc tính list-style là cú pháp tổng quát dùng để định dạng cho danh sách (thay vì phải sử dụng kết các thuộc tính list-style-type, list-style-image, list-style-position thì bây giờ chúng ta chỉ cần sử dụng duy nhất mỗi thuộc tính này là đủ)

– Cú pháp:

list-style: type position image;

– Trong đó:

  • Giá trị type dùng để thiết lập kiểu chỉ mục (giống thuộc tính list-style-type)
  • Giá trị position dùng để thiết lập vị trí của chỉ mục (giống thuộc tính list-style-position)
  • Giá trị image dùng để thiết lập chỉ mục bằng hình ảnh (giống thuộc tính list-style-image)

– Tuy nhiên, thuộc tính list-style không bắt buộc chúng ta phải gán cho nó đủ ba giá trị, những giá trị nào còn thiếu thì trình duyệt sẽ tự động sử dụng giá trị mặc định của các thuộc tính tương ứng.

Ví dụ:

– Khi chúng ta thiết lập list-style: square inside; thì sẽ tương đương với:

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

Chia sẻ một chút thông tin về bạn. Những thông tin này có thể được công khai. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

Related Posts

Offcanvas