Khóa học CSS - Bài 14 - Định dạng các danh sách

Quay về MỤC LỤC TỰ HỌC CSS

1. Thiết lập kiểu bullet

Ta dùng thuộc tính list-style-type

Ví dụ:

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

và các giá trị HTML trong phần body

2. Thiết lập hình cho bullet

Ta dùng thuộc tính list-style-image

Ví dụ:

ul {
    list-style-image: url('sqpurple.gif');
}

3. Vị trí của các bullet

Thuộc tính list-style-position có 02 giá trị sau:

· Outside: dòng thứ 2 trở đi của danh sách sẽ nằm thẳng hàng với dòng đầu.

· Inside: dòng thứ 3 trở đi của danh sách sẽ nằm thẳng hàng với bullet.

Để hiểu rõ hơn ta xem ví dụ sau:

ul.a {

    list-style-position: outside;
}

ul.b {
    list-style-position: inside;
}

4. Xóa các thiết lập mặc định trong thẻ ul hoặc ol như ví dụ sau:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

5. Viết tắt

Ta có thể viết tắt các thuộc tính list-type theo thứ tự sau:

· list-style-type

· list-style-position

· list-style-image

Ví dụ:

ul {
    list-style: square inside url("sqpurple.gif");
}

6. Định dạng màu cho danh sách

Ví dụ:

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}

Bảng phụ lục các loại danh sách trong CSS:

disc	Default value. The marker is a filled circle
armenian	The marker is traditional Armenian numbering
circle	The marker is a circle
cjk-ideographic	The marker is plain ideographic numbers
decimal	The marker is a number
decimal-leading-zero	The marker is a number with leading zeros (01, 02, 03, etc.)
georgian	The marker is traditional Georgian numbering
hebrew	The marker is traditional Hebrew numbering
hiragana	The marker is traditional Hiragana numbering
hiragana-iroha	The marker is traditional Hiragana iroha numbering
katakana	The marker is traditional Katakana numbering
katakana-iroha	The marker is traditional Katakana iroha numbering
lower-alpha	The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek	The marker is lower-greek
lower-latin	The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman	The marker is lower-roman (i, ii, iii, iv, v, etc.)
none	No marker is shown
square	The marker is a square
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)
upper-greek	The marker is upper-greek
upper-latin	The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman	The marker is upper-roman (I, II, III, IV, V, etc.)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm