Trong bài viết hướng dẫn tự học CSS này, bạn sẽ tìm hiểu cách tạo kiểu, định dạng các danh sách HTML bằng CSS. (CSS List)
Đây là một trong những công việc rất thường xuyên trong quá trình học lập trình, nên hãy học nó thật kỹ, luyện tập thật nhiều để thành thục bạn nhé.
Tham Khảo: Khóa học Lập trình Full stack (Dành cho người mới bắt đầu)
Các loại danh sách (List) trong HTML
Có ba loại danh sách khác nhau trong HTML:
- Danh sách không theo thứ tự (Unordered List) – Một danh sách, trong đó mọi mục trong danh sách được đánh dấu bằng dấu chấm đầu dòng.
- Danh sách theo thứ tự (Ordered List) – Một danh sách, trong đó mỗi mục danh sách được đánh dấu bằng số.
- Danh sách định nghĩa (Definition List) – Một danh sách các mục, với một mô tả của từng mục.
Tạo kiểu cho Danh sách (List) bằng CSS
CSS cung cấp một số thuộc tính phổ biến để tạo kiểu và định dạng các danh sách có thứ tự và không thứ tự.
Các thuộc tính danh sách CSS này thường cho phép bạn:
- Kiểm soát hình dạng hoặc sự xuất hiện của điểm đánh dấu.
- Chỉ định hình ảnh cho điểm đánh dấu thay vì dấu chấm đầu dòng hoặc số.
- Thiết lập khoảng cách giữa phần đánh dấu và phần văn bản trong danh sách.
- Chỉ định xem điểm đánh dấu sẽ xuất hiện bên trong hoặc bên ngoài hộp chứa các mục danh sách.
Trong phần sau chúng ta sẽ thảo luận về các thuộc tính có thể được sử dụng để tạo kiểu cho danh sách HTML.
#1. Thay đổi kiểu đánh dấu đầu dòng của list
Theo mặc định, các mục trong danh sách được sắp xếp được đánh số bằng chữ số Ả Rập (1, 2, 3, 5, v.v.) -> Kiểu ordered list
Trong khi trong danh sách không có thứ tự (Kiểu Unordered list), các mục được đánh dấu bằng chấm tròn (•).
Tuy nhiên, bạn có thể thay đổi loại điểm đánh dấu danh sách mặc định này thành bất kỳ loại nào khác, chẳng hạn như chữ số La Mã, chữ cái la tinh, hình tròn, hình vuông, v.v. bằng cách sử dụng thuộc tính: list-style-type
Hãy thử ví dụ sau để hiểu cách thức hoạt động của thuộc tính này:
HTML:
<h2>Danh sách không có thứ tự</h2>
<ul>
<li>Học CSS</li>
<li>Học SASS</li>
<li>Học Bootstrap</li>
</ul>
<h2>Danh sách có thứ tự</h2>
<ol>
<li>Học CSS</li>
<li>Học SASS</li>
<li>Học Bootstrap</li>
</ol>CSS:
ul {
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}#2. Thay đổi vị trí của điểm đánh dấu danh sách
Theo mặc định, các điểm đánh dấu của từng mục danh sách được đặt bên ngoài (outside) hộp hiển thị của chúng.
Tuy nhiên, bạn cũng có thể định vị các điểm đánh dấu hoặc dấu đầu dòng bên trong các hộp hiển thị của mục danh sách bằng cách sử dụng thuộc tính list-style-position cùng với giá trị inside.
Trong trường hợp này, các danh sách và đánh dấu sẽ cùng nằm trong hộp hiển thị của nó:
HTML:
<h2>Thay đổi điểm đánh dấu vào trong</h2>
<ol class="trong">
<li>Học CSS</li>
<li>Học SASS</li>
<li>Học Bootstrap</li>
</ol>
<h2>Thay đổi điểm đánh dấu ra ngoài</h2>
<ol class="ngoai">
<li>Học CSS</li>
<li>Học SASS</li>
<li>Học Bootstrap</li>
</ol>CSS:
ol.trong li {
list-style-position: inside;
}
ol.ngoai li {
list-style-position: outside;
}Bạn thử chạy ví dụ này trên trình duyệt xem. Kết quả như thế nào?
#3. Sử dụng hình ảnh để làm điểm đánh dấu
Bạn cũng có thể đặt hình ảnh để làm điểm đánh dấu danh sách bằng cách thông qua thuộc tính: list-style-image
Quy tắc CSS trong ví dụ sau sẽ chỉ định hình ảnh PNG là ‘icon-tick.png’ làm điểm đánh dấu danh sách cho tất cả các mục trong danh sách không theo thứ tự.
Note: Bạn có thể sử dụng hình ảnh bất kỳ, đặt trong thư mục cùng cấp với file HTM. Ở đây, mình tạo một thư mục images cùng cấp với file HTML và lưu / đặt tên là icon-tick.png
Hãy dùng thử và xem nó hoạt động như thế nào:
HTML:
<h2>Danh sách sử dụng điểm đánh dấu là ảnh</h2>
<ul>
<li>CSS rất dễ học</li>
<li>CSS rất thú vị</li>
<li>CSS tất cần thiết</li>
</ul>CSS như sau:
ul li {
list-style-image: url("images/icon-tick.png");
}Đôi khi, thuộc tính list-style-image có thể không tạo ra két quả như dự kiến. Ngoài ra, bạn có thể sử dụng giải pháp sau đây để kiểm soát tốt hơn việc định vị các điểm đánh dấu hình ảnh.
Để giải quyết vấn đề, bạn cũng có thể đặt hình ảnh đánh dấu thông qua thuộc tính CSS background-image.
Đầu tiên, thiết lập list-style-type không có dấu đánh dấu đầu dòng. Sau đó, xác định một hình nền no-repeat cho thành phần trong danh sách.
Ví dụ sau hiển thị các điểm đánh dấu hình ảnh bằng nhau trong tất cả các trình duyệt:
ul {
list-style-type: none;
}
ul li {
background-image: url("images/icon-tick.png");
background-position: 0px 5px;
background-repeat: no-repeat;
padding-left: 20px;
}Bạn lưu ý, có thuộc tính background-position: 0px 5px; có thể bạn chưa học.
Nhưng bạn có thể hiểu đơn giản là thuộc tính này xác định lại ví trí của điểm đánh dấu như sau:
- Cách cạnh trái hộp hiển thị của nó là 0px
- Cách cạnh trên hộp hiển thị của nó là 5px
#4. Cách viết tắt thuộc tính css cho danh sách
Như bạn đã biết cách viết riêng lẻ 3 thuộc tính định dạng cho danh sách ở trên.
Ngoài cách viết riêng lẻ để tăng khả năng đọc, CSS cung cấp cho chúng ta cách viết tắt cực kỳ ngắn gọn (Các lập trình viên web chuyên nghiệp rất thích điều này)
Ví dụ, thay vì phải viết dài dòng như thế này:
ul li {
list-style-type: square;
list-style-position: inside;
list-style-image: url("images/icon-tick.png");
}Chúng ta có thể viết tắt trên một dùng như thế này:
ul li {
list-style: square inside url("images/icon-tick.png");
}Dĩ nhiên, ở đây có một điểm có thể hơi thừa thãi.
Một khi đã sử dụng kiểu hình ảnh để thay thế cho kiểu đánh dấu mặc định thì chúng ta có thể bỏ cái kia đi, ví dụ:
ul li {
list-style: inside url("images/icon-tick.png");
}Hoặc như thế này:
ul li {
list-style: square inside;
}Tuy nhiên, để cả 2 giá trị cũng không sao. CSS sẽ ưu tiên giá trị kiểu hình ảnh (được ghi sau).
Note: Đây cũng là cách đề phòng trường hợp trình duyệt không load được ảnh thì vẫn sẽ hiển thị giá trị square.
Lưu ý: Khi sử dụng cách viết tắt này, thứ tự của các giá trị là: list-style-type | list-style-position | list-style-image. Sẽ không có vấn đề gì nếu một trong các giá trị trên bị thiếu miễn là các giá trị còn lại theo thứ tự được chỉ định.
Ví dụ tạo Menu điều hướng sử dụng list
Danh sách HTML thường được sử dụng để tạo thanh điều hướng ngang hoặc menu thường xuất hiện ở đầu trang web.
Nhưng vì các mục danh sách là các thành phần block (khối), vì vậy để hiển thị chúng theo kiểu inline (nội tuyến), chúng ta cần sử dụng thuộc của CSS là display.
Hãy thử một ví dụ để xem nó thực sự hoạt động như thế nào:
HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Về NIIT</a></li>
<li><a href="#">Khóa Học</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Thư viện</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>CSS:
body{
font-size: 14px;
font-family: Arial,sans-serif;
}
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
text-transform: uppercase;
}
ul li a {
display: block;
padding: 10px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #003999;
}Bạn thử làm lại ví dụ trên và chạy nó trên trình duyệt xem. (Nhớ thay đổi, xóa các thuộc tính để xem chúng thay đổi, phản ứng như thế nào bạn nhé)
Như vậy, qua bài viết này, mình đã giúp bạn học cách định dạng, viết css cho các danh sách, cũng như cách đơn giản để tạo ra một menu với các thẻ ul, li.
Chúc bạn học lập trình web tốt.
Học tiếp: CSS Bảng
Đọc thêm: CSS Link