Khóa học IT CSS Cơ bản 029_Danh sách và Bảng - Ghi chú kỹ thuật của zhaoJian

Danh sách

Trong CSS, kiểu danh sách có thể được tối ưu hóa thông qua các thuộc tính như list-style-type, list-style-image và list-style-position.

Loại danh sách

Định nghĩa loại danh sách, bao gồm danh sách không có thứ tự, danh sách có thứ tự và danh sách định nghĩa. none không hiển thị, disc hình tròn đặc, circle hình tròn, square hình vuông, decimal số, lower-alpha chữ thường, upper-alpha chữ hoa, decimal-leading-zero số có số 0 đầu, lower-roman số La Mã thường, upper-roman số La Mã hoa, v.v.

Ví dụ:

1
.ul-none{
2
    list-style-type: none;
3
}
4
.ul-disc{
5
    list-style-type: disc;
6
}
7
.ul-circle{
8
    list-style-type: circle;
9
}
10
.ul-square{
11
    list-style-type: square;
12
}
13
.ul-decimal{
14
    list-style-type: decimal;
15
}
16
.ul-lower-alpha{
17
    list-style-type: lower-alpha;
18
}
19
.ul-upper-alpha{
20
    list-style-type: upper-alpha;
21
}
22
.ul-decimal-leading-zero{
23
    list-style-type: decimal-leading-zero;
24
}
25
.ul-lower-roman{
26
    list-style-type: lower-roman;
27
}
28
.ul-upper-roman{
29
    list-style-type: upper-roman;
30
}

1
    <ul class="ul-none">
2
        <li>Demo loại danh sách</li>
3
        <li>Demo loại danh sách</li>
4
        <li>Demo loại danh sách</li>
5
    </ul>
6
    <ul class="ul-disc">
7
        <li>Demo loại danh sách</li>
8
        <li>Demo loại danh sách</li>
9
        <li>Demo loại danh sách</li>
10
    </ul>
11
    <ul class="ul-circle">
12
        <li>Demo loại danh sách</li>
13
        <li>Demo loại danh sách</li>
14
        <li>Demo loại danh sách</li>
15
    </ul>
16
    <ul class="ul-square">
17
        <li>Demo loại danh sách</li>
18
        <li>Demo loại danh sách</li>
19
        <li>Demo loại danh sách</li>
20
    </ul>
21
    <ul class="ul-decimal">
22
        <li>Demo loại danh sách</li>
23
        <li>Demo loại danh sách</li>
24
        <li>Demo loại danh sách</li>
25
    </ul>
26
    <ul class="ul-lower-alpha">
27
        <li>Demo loại danh sách</li>
28
        <li>Demo loại danh sách</li>
29
        <li>Demo loại danh sách</li>
30
    </ul>
31
    <ul class="ul-upper-roman">
32
        <li>Demo loại danh sách</li>
33
        <li>Demo loại danh sách</li>
34
        <li>Demo loại danh sách</li>
35
    </ul>
36
    <ul class="ul-decimal-leading-zero">
37
        <li>Demo loại danh sách</li>
38
        <li>Demo loại danh sách</li>
39
        <li>Demo loại danh sách</li>
40
    </ul>
41
    <ul class="ul-lower-roman">
42
        <li>Demo loại danh sách</li>
43
        <li>Demo loại danh sách</li>
44
        <li>Demo loại danh sách</li>
45
    </ul>
46
    <ul class="ul-upper-roman">
47
        <li>Demo loại danh sách</li>
48
        <li>Demo loại danh sách</li>
49
        <li>Demo loại danh sách</li>
50
    </ul>

Hiệu ứng: Hiệu ứng ví dụ

Đánh dấu danh sách

Đặt vị trí đánh dấu của các mục danh sách (bên trong hoặc bên ngoài). inside bên trong, outside bên ngoài

Ví dụ:

1
.ul-inside{
2
    list-style-position: inside;
3
}
4
.ul-outside{
5
    list-style-position: outside;
6
}
7
li{
8
    background-color: aquamarine;
9
}

1
    <ul class="ul-inside">
2
        <li>Demo đánh dấu danh sách</li>
3
        <li>Demo đánh dấu danh sách</li>
4
        <li>Demo đánh dấu danh sách</li>
5
    </ul>
6
    <ul class="ul-outside">
7
        <li>Demo đánh dấu danh sách</li>
8
        <li>Demo đánh dấu danh sách</li>
9
        <li>Demo đánh dấu danh sách</li>
10
    </ul>

Hiệu ứng: Hiệu ứng ví dụ

Hình ảnh danh sách

Đặt hình ảnh cho đánh dấu danh sách, có thể đặt thành địa chỉ URL của hình ảnh.

Ví dụ:

1
.ul-image1{
2
    list-style-image: url("li1.png");
3
}
4
.ul-image2{
5
    list-style-image: url("li2.png");
6
}
7
.ul-image3{
8
    list-style-image: url("li3.png");
9
}

1
    <ul class="ul-image1">
2
        <li>Demo đánh dấu danh sách</li>
3
        <li>Demo đánh dấu danh sách</li>
4
        <li>Demo đánh dấu danh sách</li>
5
    </ul>
6
    <ul class="ul-image2">
7
        <li>Demo đánh dấu danh sách</li>
8
        <li>Demo đánh dấu danh sách</li>
9
        <li>Demo đánh dấu danh sách</li>
10
    </ul>
11
    <ul class="ul-image3">
12
        <li>Demo đánh dấu danh sách</li>
13
        <li>Demo đánh dấu danh sách</li>
14
        <li>Demo đánh dấu danh sách</li>
15
    </ul>

Hiệu ứng:

Hiệu ứng ví dụ Kích thước được đặt thông qua ul có thể làm cho hình ảnh bị kéo dãn hoặc nén, vì vậy tốt nhất nên sử dụng công cụ chỉnh sửa để đặt kích thước gốc của hình ảnh. Nếu bạn cần điều chỉnh kích thước hiển thị của hình ảnh trong các mục danh sách mà không thay đổi bản thân hình ảnh, bạn có thể sử dụng thuộc tính background-image của li để kiểm soát linh hoạt hình ảnh danh sách.

Ví dụ:

1
li{
2
    list-style-type: none;
3
    background-image: url("li1.png");
4
    background-size: 10px 10px;
5
    background-repeat: no-repeat;
6
    background-position: 2px center;
7
    padding-left: 20px;
8
}

1
    <ul>
2
        <li>Demo đánh dấu danh sách</li>
3
        <li>Demo đánh dấu danh sách</li>
4
        <li>Demo đánh dấu danh sách</li>
5
    </ul>

Hiệu ứng: Hiệu ứng ví dụ Viết tắt: Thuộc tính list-style được sử dụng để đặt đồng thời ba thuộc tính kiểu cho đánh dấu mục danh sách: list-style-type, list-style-position và list-style-image. Các giá trị có thể được bỏ qua, nhưng thứ tự không thể thay đổi.

Ví dụ:

1
ul{
2
    list-style: square inside url('li1.png');
3
}

Bảng

Trong CSS, giao diện và bố cục của bảng có thể được kiểm soát thông qua nhiều thuộc tính như border.

`border`

Định nghĩa viền của bảng, có thể đặt chiều rộng, màu sắc và kiểu của viền.

Ví dụ:

1
table {
2
    border: 1px solid red;
3
}

1
<table>
2
    <tr>
3
        <td>Demo bảng 1</td>
4
        <td>Demo bảng 2</td>
5
        <td>Demo bảng 3</td>
6
        <td>Demo bảng 4</td>
7
    </tr>
8
    <tr>
9
        <td>Demo bảng 1</td>
10
        <td>Demo bảng 2</td>
11
        <td>Demo bảng 3</td>
12
        <td>Demo bảng 4</td>
13
    </tr>
14
    <tr>
15
        <td>Demo bảng 1</td>
16
        <td>Demo bảng 2</td>
17
        <td>Demo bảng 3</td>
18
        <td>Demo bảng 4</td>
19
    </tr>
20
</table>

Hiệu ứng:

Hiệu ứng ví dụ

`th` `td`

Trong CSS, th và td có thể kiểm soát kiểu của tiêu đề bảng, hàng bảng và ô dữ liệu bảng.

Ví dụ:

1
table {
2
    border: 1px solid red;
3
}
4
th {
5
    background-color: #d6d7d8; /* Đặt màu nền tiêu đề */
6
    color: #333; /* Đặt màu văn bản tiêu đề */
7
    font-weight: bold; /* Đặt văn bản tiêu đề in đậm */
8
    padding: 10px; /* Đặt padding tiêu đề */
9
    text-align: center; /* Đặt căn giữa văn bản */
10
}
11
td {
12
    border: 1px solid green; /* Đặt viền dưới giữa các hàng */
13
    padding: 8px; /* Đặt padding ô */
14
    text-align: center; /* Đặt căn giữa văn bản */
15
}

1
    <table>
2
        <tr>
3
            <th>Demo bảng 1</th>
4
            <th>Demo bảng 2</th>
5
            <th>Demo bảng 3</th>
6
            <th>Demo bảng 4</th>
7
        </tr>
8
        <tr>
9
            <td>Demo bảng 1</td>
10
            <td>Demo bảng 2</td>
11
            <td>Demo bảng 3</td>
12
            <td>Demo bảng 4</td>
13
        </tr>
14
        <tr>
15
            <td>Demo bảng 1</td>
16
            <td>Demo bảng 2</td>
17
            <td>Demo bảng 3</td>
18
            <td>Demo bảng 4</td>
19
        </tr>
20
    </table>

Hiệu ứng:

Hiệu ứng ví dụ

`border-collapse`

Thuộc tính được sử dụng để kiểm soát cách các viền liền kề của bảng được hợp nhất.

separate: Không hợp nhất viền, viền bảng vẫn độc lập.
collapse: Hợp nhất viền, viền bảng được hợp nhất lại với nhau.

Ví dụ:

1
.table1 {
2
    border: 2px solid red;
3
    border-collapse: separate;
4
}
5
.table2 {
6
    border: 2px solid red;
7
    border-collapse: collapse;
8
}

1
    <table class="table1">
2
        <tr>
3
            <td>Demo bảng 1</td>
4
            <td>Demo bảng 2</td>
5
            <td>Demo bảng 3</td>
6
            <td>Demo bảng 4</td>
7
        </tr>
8
        <tr>
9
            <td>Demo bảng 1</td>
10
            <td>Demo bảng 2</td>
11
            <td>Demo bảng 3</td>
12
            <td>Demo bảng 4</td>
13
        </tr>
14
        <tr>
15
            <td>Demo bảng 1</td>
16
            <td>Demo bảng 2</td>
17
            <td>Demo bảng 3</td>
18
            <td>Demo bảng 4</td>
19
        </tr>
20
    </table>
21
    <table class="table2">
22
        <tr>
23
            <td>Demo bảng 1</td>
24
            <td>Demo bảng 2</td>
25
            <td>Demo bảng 3</td>
26
            <td>Demo bảng 4</td>
27
        </tr>
28
        <tr>
29
            <td>Demo bảng 1</td>
30
            <td>Demo bảng 2</td>
31
            <td>Demo bảng 3</td>
32
            <td>Demo bảng 4</td>
33
        </tr>
34
        <tr>
35
            <td>Demo bảng 1</td>
36
            <td>Demo bảng 2</td>
37
            <td>Demo bảng 3</td>
38
            <td>Demo bảng 4</td>
39
        </tr>
40
    </table>

Hiệu ứng:

Hiệu ứng ví dụ

`border-spacing`

Định nghĩa khoảng cách viền của bảng, có thể đặt khoảng cách giữa các viền.

Ví dụ:

1
table {
2
    border: 1px solid red;
3
    border-spacing: 10px;
4
}

1
    <table>
2
        <tr>
3
            <td>Demo bảng 1</td>
4
            <td>Demo bảng 2</td>
5
            <td>Demo bảng 3</td>
6
            <td>Demo bảng 4</td>
7
        </tr>
8
        <tr>
9
            <td>Demo bảng 1</td>
10
            <td>Demo bảng 2</td>
11
            <td>Demo bảng 3</td>
12
            <td>Demo bảng 4</td>
13
        </tr>
14
        <tr>
15
            <td>Demo bảng 1</td>
16
            <td>Demo bảng 2</td>
17
            <td>Demo bảng 3</td>
18
            <td>Demo bảng 4</td>
19
        </tr>
20
    </table>

Hiệu ứng:

Hiệu ứng ví dụ

`table-layout`

Định nghĩa phương pháp bố cục của bảng.

auto: Bố cục tự động, chiều rộng và chiều cao của bảng được xác định bởi nội dung.
fixed: Bố cục cố định, chiều rộng và chiều cao của bảng được xác định bởi các giá trị được chỉ định.

Ví dụ:

1
.table1 {
2
    border: 1px solid red;
3
    table-layout: auto;
4
    width: 100%;
5
}
6
.table2 {
7
    border: 1px solid red;
8
    table-layout: fixed;
9
    width: 100%;
10
}
11
th, td {
12
    border: 1px solid red;
13
}

1
    <table class="table1">
2
        <tr>
3
            <td>Demo bảng 1 Demo bảng 1 Demo bảng 1 Demo bảng 1</td>
4
            <td>Demo bảng 2</td>
5
            <td>Demo bảng 3</td>
6
            <td>Demo bảng 4</td>
7
        </tr>
8
        <tr>
9
            <td>Demo bảng 1</td>
10
            <td>Demo bảng 2</td>
11
            <td>Demo bảng 3</td>
12
            <td>Demo bảng 4</td>
13
        </tr>
14
        <tr>
15
            <td>Demo bảng 1</td>
16
            <td>Demo bảng 2</td>
17
            <td>Demo bảng 3</td>
18
            <td>Demo bảng 4</td>
19
        </tr>
20
    </table>
21
    <br>
22
    <table class="table2">
23
        <tr>
24
            <td>Demo bảng 1 Demo bảng 1 Demo bảng 1 Demo bảng 1</td>
25
            <td>Demo bảng 2</td>
26
            <td>Demo bảng 3</td>
27
            <td>Demo bảng 4</td>
28
        </tr>
29
        <tr>
30
            <td>Demo bảng 1</td>
31
            <td>Demo bảng 2</td>
32
            <td>Demo bảng 3</td>
33
            <td>Demo bảng 4</td>
34
        </tr>
35
        <tr>
36
            <td>Demo bảng 1</td>
37
            <td>Demo bảng 2</td>
38
            <td>Demo bảng 3</td>
39
            <td>Demo bảng 4</td>
40
        </tr>
41
    </table>

Hiệu ứng:

Hiệu ứng ví dụ

`caption-side`

Định nghĩa vị trí của tiêu đề bảng, có thể đặt các giá trị sau:

top: Tiêu đề ở phía trên của bảng.
bottom: Tiêu đề ở phía dưới của bảng.

Ví dụ:

1
.table1 {
2
    border: 1px solid red;
3
    caption-side: top;
4
}
5
.table2 {
6
    border: 1px solid red;
7
    caption-side: bottom;
8
}

1
    <table class="table1">
2
        <caption>Demo tiêu đề ABC123</caption>
3
        <tr>
4
            <td>Demo bảng 1 Demo bảng 1 Demo bảng 1 Demo bảng 1</td>
5
            <td>Demo bảng 2</td>
6
            <td>Demo bảng 3</td>
7
            <td>Demo bảng 4</td>
8
        </tr>
9
        <tr>
10
            <td>Demo bảng 1</td>
11
            <td>Demo bảng 2</td>
12
            <td>Demo bảng 3</td>
13
            <td>Demo bảng 4</td>
14
        </tr>
15
        <tr>
16
            <td>Demo bảng 1</td>
17
            <td>Demo bảng 2</td>
18
            <td>Demo bảng 3</td>
19
            <td>Demo bảng 4</td>
20
        </tr>
21
    </table>
22
    <br>
23
    <table class="table2">
24
        <caption>Demo tiêu đề ABC123</caption>
25
        <tr>
26
            <td>Demo bảng 1 Demo bảng 1 Demo bảng 1 Demo bảng 1</td>
27
            <td>Demo bảng 2</td>
28
            <td>Demo bảng 3</td>
29
            <td>Demo bảng 4</td>
30
        </tr>
31
        <tr>
32
            <td>Demo bảng 1</td>
33
            <td>Demo bảng 2</td>
34
            <td>Demo bảng 3</td>
35
            <td>Demo bảng 4</td>
36
        </tr>
37
        <tr>
38
            <td>Demo bảng 1</td>
39
            <td>Demo bảng 2</td>
40
            <td>Demo bảng 3</td>
41
            <td>Demo bảng 4</td>
42
        </tr>
43
    </table>

Hiệu ứng: Hiệu ứng ví dụ

Danh sách

Loại danh sách

Đánh dấu danh sách

Hình ảnh danh sách

Bảng

border

th td

border-collapse

border-spacing

table-layout

caption-side

Bình luận

`border`

`th` `td`

`border-collapse`

`border-spacing`

`table-layout`

`caption-side`