[Bài 4] CSS List – Tìm hiểu CSS cùng BIT

Bạn đang ở bài 5 trong 6 bài của serie Học Css cơ bản.

CSS List có thực sự quan trọng?

CSS list được ứng dụng rất nhiều trong thiết kế web như tạo navigation, danh sách dữ liệu, dạng tab và còn nhiều cách sử dụng khác nữa. Nó được ứng dụng nhiều như vậy đơn giản vì nó có tính thống nhất, đa cấp, dễ quản lý.

CSS List có những dạng nào?

CSS List có 2 dạng chính:

  • <ul> <li> : danh sách không có thứ tự
  • <ol> <li> : danh sách có thứ tự. VD: 1-2-3, a-b-c, I-II-III,…

Danh sách phía trên đang sử dụng dạng <ul> <li> không có thứ tự.
VD1

<ul>
<li>Hello</li>
<li>World</li>
</ul>

Kết quả:

  • Hello
  • World

VD2

<ol>
<li>Java</li>
<li>PHP</li>
<li>C#</li>
</ol>

Kết quả:

  1. Java
  2. PHP
  3. C#

Những thuộc tính liên quan đến CSS List

Thuộc tính của CSS List gồm:

  • list-style-typekiểu hiện thị cho từng dòng trong list, khi dùng ul sẽ hiển thị các kí hiệu, biểu tượng. Nếu là ol thì sẽ hiển thị chữ cái, số hoặc kí tự la mã
  • list-style-position: vị trí hiển thị của kí hiệu đầu dòng và nội dung
  • list-style-image: hình ảnh thay thế cho kí hiệu đầu dòng
  • list-style: cách viết rút gọn cho 3 thuộc tính trên

list-style-type

<ul> list

Value Description
none không hiển thị kí tự đầu dòng
disc (default) chấm đen(mặc định)
circle chấm tròn
square chấm vuông

<ol> list

Value Description Example
decimal số đếm 1,2,3,4,5
decimal-leading-zero số đếm (có 0 nếu nhỏ hơn 10) 01, 02, 03, 04, 05
lower-alpha chữ thường a, b, c, d, e
upper-alpha chữ hoa A, B, C, D, E
lower-roman kí tự la mã in thường i, ii, iii, iv, v
upper-roman kí tự la mã in hoa I, II, III, IV, V
lower-greek kí tự hi lạp in thường alpha, beta, gamma
hebrew số Hebrew
armenian số Armenian
georgian số Georgian
cjk-ideographic số ideographic
hiragana kí tự hiragana(Japan) a, i, u, e, o, ka, ki
katakana kí tự katakana(Japan) A, I, U, E, O, KA, KI
hiragana-iroha kí tự hiragana-iroha(Japan) i, ro, ha, ni, ho, he, to
katakana-iroha kí tự katakana-iroha(Japan) I, RO, HA, NI, HO, HE, TO

list-style-position

Value Description
none NA
inside List sẽ được canh lề ngắn hơn tính từ kí đầu dòng, thẳng hàng với một nội dung trước đó
outside List sẽ được canh lề dài hơn tính từ kí đầu dòng

VD3

See the Pen list-style-position by BlogIT.vn (@blogitvn) on CodePen.

[Bài 4] CSS List – Tìm hiểu CSS cùng BIT
Đánh giá bài viết:

Bình luận

Hãy trở thành người đầu tiên bình luận!

Thông báo
avatar
wpDiscuz