NTM Solutions

Facebook Youtube Google+

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;
}

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