NTM Solutions

Thứ Ba, 10 tháng 4, 2018

Tự 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:


Nguồn: Lớp học vi tính .COM

Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS