Làm thế nào tạo danh sách có dấu đầu dòng? html

Như ta thường thấy việc đánh số thứ tự (number list) hoặc đánh dấu đầu dòng (bullet list) được sử dụng rất nhiều trong soạn thảo văn bản cũng như bài viết trên web. Mặc định đánh số hoặc đánh dấu đều sử dụng kiểu font bình thường. Nhưng nếu bạn muốn bài viết của mình trở nên đẹp mắt hơn với các định dạng riêng. Thì hôm nay mình sẽ chia sẻ cách để tạo một danh sách với định dạng đẹp mắt (gọi là style list). Chỉ cần sử dụng CSS và tất nhiên là hoàn toàn tự động.

Định dạng cho số thứ tự theo HTML là:

Định dạng cho đánh dấu đầu dòng theo HTML là:

Do đó ta sẽ chỉ cần viết lại CSS cho các element ol, ul và li.

1 Định dạng cho danh sách số thứ tự

Thường CSS của danh sách số cơ bản sẽ như thế này:

Trước tiên ta sẽ ẩn số mặc định này đi bằng cách thay bằng đoạn css

Tiếp theo ta sẽ thêm phần CSS sau để hiển thị số đã được tút theo ý muốn:

Đây là code canxem.com đang xài cho bài viết. Các bạn có thể tùy chỉnh lại các phần màu sắc, độ lớn, hình dạng,…

2 Định dạng đánh dấu đầu dòng

Tương tự phần đánh dấu mặc định thường sẽ như này:

Ta sẽ bỏ dấu tròn đi bằng cách xóa đoạn trên và thay bằng đoạn sau:

Tiếp theo ta sẽ thêm phần CSS sau để hiển thị nút đã được lựa chọn theo ý muốn:

Ở đây ta lưu ý phần content: “\2756”; Mã này là mã HTML của nút đầu dòng. Xem thêm Bảng tra cứu mã HTML ký tự đặc biệt để chọn icon mình thích.

Lưu ý nếu dùng wordpress, chúng ta sẽ sửa CSS trong file style.css của theme hoặc child theme đang sử dụng.

Dưới đây là ví dụ cho kết quả thu được sau khi thực hiện các bước như hướng dẫn.

Các nội dung 5K là:

• Khẩu trang
• Khử khuẩn
• Khoảng cách
• Không tụ tập
• Khai báo y tế

Còn chờ gì nữa mà ko bắt tay làm ngay. Quá đơn giản để có một danh sách đẹp phải không. Mọi thắc mắc hãy để lại bình luận bên dưới.

Danh sách không sắp xếp theo thứ tự bắt đầu với thẻ <ul>. Mỗi mục trong danh sách bắt đầu với thẻ <li>.

Các mục của danh sách sẽ được đánh dấu bằng các kí hiệu đầu mục ( mặc định là vòng tròn nhỏ màu đen).

<ul>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>

Xem ví dụ 1

Danh sách không sắp xếp trong HTML – Các kiểu thuộc tính

Thuộc tính style có thể được thêm vào danh sách không sắp xếp, để định kiểu cua đầu mục: 

<ul style=“list-style-type:disc”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>

Xem ví dụ 2

<ul style=“list-style-type:circle”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>

Xem ví dụ 3

<ul style=“list-style-type:square”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>

Xem ví dụ 4:

<ul style=“list-style-type:none”>
<li>Cà phê</li> <li>Trà</lí>

<li>Sữa</li>

Xem ví dụ 5

Danh sách sắp xếp trong HTML

Danh sách sắp xếp thứ tự bắt đầu bằng thẻ <ol>. Mỗi mục trong danh sách bắt đầu bằng thẻ <li>.

Danh sách các mục sẽ được đánh dấu bằng các số:

<ol>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>

Xem ví dụ 6

Danh sách sắp xếp – Các kiểu thuộc tính

Thuộc tính type có thể được thêm vào danh sách sắp xếp, để xác định kiểu của đầu mục dấu:

<ol type=“1”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>

Xem ví dụ 7

<ol type=“A”>
<li>Cà phê</li>
<li>Trà</li> <li>Sữa</lì>

</ol>

Xem ví dụ 8

<ol type=“a”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>

Xem ví dụ 9

<ol type=“I”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>

Xem ví dụ 10

<ol type=“i”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>

Xem ví dụ 11

Mô tả danh sách trong HTML

Ngoài 2 kiểu danh sách sắp xếp và không sắp xếp như ở trên thì HTML còn hỗ trợ thêm kiểu danh sách mô tả.

Danh sách mô tả là kiểu hiển thị danh sách mà các mục con của nó sẽ không được đánh dấu thứ tự, nhưng sẽ có kèm theo một đoạn miêu tả..

Thẻ <dl> Xác định danh sách mô tả, thẻ <dt> Xác định tên danh sách, và thẻ <dd> xác định mô tả cho danh sách.

<dl>
<dt>Cà phê</dt>
<dd>– một loai đồ uống nóng màu đen</dd>
<dt>Sữa</dt>
<dd>– một loại đồ uống lạnh màu trắng</dd>
</dl>

Xem ví dụ 12

Danh sách lồng nhau trong HTML

Danh sách có thể được lồng trong nhau (Danh sách bên trong danh sách):

<ul>
<li>Cà phê</li>
<li>Trà</li>
<ul>
<li>Trà đen</li>
<li>Trà xanh</li>
</ul>
</li>
<li>Sữa</li>
</ul>

Xem ví dụ 13

	Danh sách mục có thể chứa danh sách mới và các thẻ HTML khác như các ảnh, các liên kết, v.v.

Danh sách theo chiều ngang

Danh sách trong HTML được định kiểu theo nhiều cách khác nhau  với CSS.

Một trong những kiểu phổ biến là tạo một kiểu danh sách hiển thị theo chiều ngang:

<!DOCTYPE html>
<html><head>
<style> ul#menu li { display:inline; }

</style>

Xem ví dụ 14

Bổ xung một chút CSS vào kiểu danh sách, bạn có thể thay đổi và thấy nó như một menu:

ul#menu {
padding: 0; }

ul#menu li {

ul#menu li a {

ul#menu li a:hover {

Xem ví dụ 15

Tóm tắt bài học:

• Sử dụng phần tử <ul> trong HTML để định nghĩa một danh sách không sắp xếp
• Sử dụng thuộc tính style trong HTML để xác định kiểu đầu mục
• Sử dụng phần tử <ol> trong HTML để định nghĩa một danh sách sắp xếp
• Sử dụng thuộc tính type trong HTML để xác định kiểu số dùng cho đầu mục
• Sử dụng phần tử <li> trong HTML để xác định các mục của danh sách
• Sử dụng phần tử <dl> trong HTML để định nghĩa một danh sách mô tả
• Sử dụng phần tử <dt> trong HTML để xác định tên trong danh sách mô tả
• Sử dụng phần tử <dd> trong HTML để xác định dữ liệu mô tả
• Các danh sách có thể lồng nhau
• Các mục của danh sách có thể chứa các phần tử khác của HTML
• Sử dụng thuộc tính display:inline trong CSS để hiển thị danh sách theo chiều ngang

Danh sách thẻ HTML