CSS - Danh sách: Chuyển đổi từ dấu chấm đơn giản thành thiết kế đẹp mắt

Xin chào các ngôi sao thiết kế web tương lai! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của CSS danh sách. Hãy chuẩn bị, vì chúng ta sắp biến những danh sách nhàm chán thành những yếu tố bắt mắt làm cho trang web của bạn nổi bật!

HTML Lists: Những khối xây dựng

Trước khi bắt đầu định dạng, hãy xem xét các loại danh sách HTML mà chúng ta sẽ làm việc:

Danh sách không thứ tự

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Điều này tạo ra một danh sách dấu chấm, hoàn hảo khi không cần quan tâm đến thứ tự.

Danh sách có thứ tự

<ol>
<li>Thức dậy</li>
<li>Lập trình</li>
<li>Ngủ</li>
</ol>

Điều này tạo ra một danh sách đánh số, lý tưởng cho các chuỗi hoặc xếp hạng.

Danh sách mô tả

<dl>
<dt>HTML</dt>
<dd>Ngôn ngữ Định dạng Siêu văn bản</dd>
<dt>CSS</dt>
<dd>Bảng phân cách Tyle Tự nhiên</dd>
</dl>

Điều này tạo ra một danh sách các thuật ngữ và mô tả của chúng, rất tốt cho từ điển hoặc hỏi đáp.

Danh sách - Thuộc tính CSS: Công cụ định dạng của bạn

Bây giờ chúng ta đã có nền tảng HTML, hãy khám phá các thuộc tính CSS sẽ biến đổi danh sách của chúng ta:

Thuộc tính	Mô tả
list-style-type	Xác định loại dấu hiệu của mục danh sách
list-style-image	Xác định một hình ảnh làm dấu hiệu của mục danh sách
list-style-position	Xác định vị trí của dấu hiệu của mục danh sách
list-style	Thuộc tính viết tắt cho việc đặt tất cả các thuộc tính danh sách

Dấu hiệu mục danh sách hoặc phong cách dấu chấm: Chọn战士 của bạn!

Hãy bắt đầu với list-style-type. Thuộc tính này cho phép bạn thay đổi ngoại hình của dấu hiệu danh sách. Dưới đây là một ví dụ thú vị:

ul {
list-style-type: square;
}

ol {
list-style-type: lower-roman;
}

CSS này sẽ chuyển đổi dấu chấm của danh sách không thứ tự thành hình vuông và số của danh sách có thứ tự thành chữ số La Mã viết thường. Thật sang trọng!

Bạn cũng có thể sử dụng list-style-type: none; để loại bỏ dấu hiệu hoàn toàn. Điều này rất tốt cho việc tạo các menu điều hướng tùy chỉnh.

Dấu hiệu danh sách - Một hình ảnh (Sử dụng hình ảnh dấu chấm tùy chỉnh)

Muốn sáng tạo hơn? Hãy sử dụng một hình ảnh làm dấu chấm của chúng ta:

ul {
list-style-image: url('tiny-coffee-cup.png');
}

Bây giờ mỗi mục danh sách sẽ có một cốc cà phê nhỏ làm dấu chấm. Hoàn hảo cho thực đơn của quán cà phê!

Vị trí dấu hiệu mục danh sách - Vị trí dấu chấm

Thuộc tính list-style-position xác định vị trí của dấu hiệu trong hoặc ngoài luồng nội dung:

ul {
list-style-position: inside;
}

Điều này di chuyển các dấu chấm vào bên trong khối nội dung, tạo ra một外观 gọn gàng.

Thuộc tính viết tắt danh sách - Thuộc tính một trong một

Tại sao sử dụng ba thuộc tính khi bạn có thể sử dụng một? Thuộc tính list-style cho phép bạn đặt loại, hình ảnh và vị trí tất cả cùng một lúc:

ul {
list-style: square outside url('tiny-coffee-cup.png');
}

Điều này đặt dấu chấm vuông, đặt chúng ở ngoài nội dung và sử dụng hình ảnh cốc cà phê (thay thế bằng vuông nếu hình ảnh không tải).

Điều khiển đếm danh sách: Điều khiển số liệu

Đối với danh sách có thứ tự, CSS3 đã giới thiệu một số tính năng mạnh mẽ. Hãy xem thử:

ol {
list-style-type: decimal;
start: 5;
}

ol li:nth-child(even) {
list-style-type: lower-alpha;
}

Điều này bắt đầu danh sách của chúng ta từ số 5 và làm cho mỗi mục chẵn sử dụng chữ cái viết thường thay vì số. Nó giống như phép thuật!

Định dạng danh sách với màu sắc: Sắc màu danh sách của bạn

Đừng quên, bạn có thể định dạng các mục danh sách như bất kỳ phần tử nào khác:

ul {
color: #333;
background-color: #f0f0f0;
padding: 20px;
}

ul li {
background-color: #fff;
margin: 5px;
padding: 10px;
border-radius: 5px;
}

Điều này tạo ra một nền màu xám cho danh sách, với mỗi mục có hiệu ứng "thẻ" trắng riêng.

Kết hợp tất cả lại với nhau

Hãy kết hợp tất cả những gì chúng ta đã học thành một danh sách siêu thời trang:

<ul class="fancy-list">
<li>Học HTML</li>
<li>Chinh phục CSS</li>
<li>Trở thành phù thủy web</li>
</ul>

.fancy-list {
list-style: none;
padding: 0;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}

.fancy-list li {
padding: 15px;
margin: 0;
border-bottom: 1px solid #ddd;
position: relative;
padding-left: 40px;
}

.fancy-list li:last-child {
border-bottom: none;
}

.fancy-list li:before {
content: '✨';
position: absolute;
left: 15px;
color: #ff6b6b;
}

.fancy-list li:hover {
background-color: #ff6b6b;
color: white;
transition: all 0.3s ease;
}

.fancy-list li:hover:before {
color: white;
}

Điều này tạo ra một danh sách được thiết kế đẹp mắt với dấu chấm "sparkle" tùy chỉnh, hiệu ứng hover và外观 hiện đại.

Và thế là xong, các bạn! Bạn vừa nâng cấp kỹ năng định dạng danh sách của mình. Nhớ rằng, chìa khóa để thành thạo CSS là thực hành và thử nghiệm. Đừng ngại thử các kết hợp kỳ lạ - bạn có thể tình cờ tìm thấy phong cách signature tiếp theo của mình!

Chúc các bạn may mắn và danh sách của bạn luôn thời trang! ?✨

Credits: Image by storyset