Error message

  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Deprecated function: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in _filter_pubdlcnt() (line 50 of /home/mamast08nv/public_html/sites/all/modules/pubdlcnt/pubdlcnt.module).
  • Notice: Undefined offset: 1 in nice_menus_block_view() (line 306 of /home/mamast08nv/public_html/sites/all/modules/nice_menus/nice_menus.module).

Nếu bạn nào mới bắt đầu, vui lòng xem bài HTML List trước khi bắt đầu bài viết này. Mình sẽ không nói về HTML List nữa mã sẽ hướng dẫn cách sử dụng CSS để định dạng các phần tử HTML List.
Trong bài viết này mình sẽ hướng dẫn cách sử dụng CSS để:

Quy định kiểu dánh dấu (ký tự, số, chữ số…) các phần tử trong danh sách

Loại bỏ kiểu đánh dấu (không hiển thị) của các phần tử

Sử dụng ảnh nền thay cho các ký tự, số… mặc định của các phần tử

1. Thuộc tính list-style-type

Như chúng ta đã biết HTML List bao gồm 2 loại:

- UnOrdered List (Không có thứ tụ): Danh sách các phần tử được dánh dấu bằng các ký tự (bullets)

- Ordered List (có thứ tự): Danh sách các phần tử được dánh dấu bằng Số,  alphabet, số La Mã.

Các kiểu đánh dấu này được quy định bằng thuộc tính type của thẻ <ul> và <ol>. Nhưng với CSS chúng ta có thể quy định kiểu đánh dấu của các phần tử mà không cần quan tâm đó là danh sách có thứ tự hay không có thứ tự, cũng như cho phép hiển thị hay không hiển thị kiểu đánh dấu với thuộc tính list-style-type.

Một số giá trị của thuộc tính list-style-type thường gặp nhất

Giá trị Mô tả
none Không hiển thị đánh dấu
disc Chấm vuông
circle Chấm tròn trắng
square Chấm tròn đen
decimal Kiểu số
lower-alpha Kiểu Alphabet ở dạng in thường  (a, b, c, d, e, …)
upper-alpha Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …)
lower-roman Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …)
upper-roman Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …)

Ví dụ sau ta sử dụng CSS để quy định kiểu đánh dấu dạng alphabet ở dạng in thường cho cả danh sách có thứ tự và không có thứ tự:

Code HTML

01 Danh sách không có thứ tự
02 <ul>
03      <li>Phần tử 1</li>
04      <li>Phần tử 2</li>
05      <li>Phần tử 3</li>
06 </ul>
07 Danh sách có thứ tự
08 <ol>
09      <li>Phần tử 1</li>
10      <li>Phần tử 2</li>
11      <li>Phần tử 3</li>
12 </ol>

Code CSS:

1 ul,ol{list-style-typelower-alpha}

Và đây là kết quả:

 

 

           Đào tạo lập trình chúc các bạn học tốt.

Tham khảo thêm thông tin tài liệu html tại mục chia sẻ    

   Tin tức khác:

 + Học thiết kế web

 + Đào tạo wordpress

 + Đào tạo quản trị web tại Hà Nội

 + Khóa học đồ họa in ấn