Cafedev chia sẻ cho ace về list trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.
Có 2 loại list cơ bản trong css:
- List có số thứ tự
- List chỉ có các ký tự chấm, or ký tự nào đó…
Nội dung chính
1. List trong HTML và list trong CSS
Trong HTML, có hai loại danh sách chính:
- danh sách không có thứ tự (< ul >) – các mục danh sách được đánh dấu bằng dấu đầu dòng
- danh sách có thứ tự ( < ol > ) – các mục trong danh sách được đánh dấu bằng số hoặc chữ cái
Thuộc tính danh sách CSS cho phép bạn:
- Đặt các điểm đánh dấu mục danh sách khác nhau cho các danh sách có thứ tự
- Đặt các điểm đánh dấu mục danh sách khác nhau cho danh sách không có thứ tự
- Đặt hình ảnh làm điểm đánh dấu mục danh sách
- Thêm màu nền vào danh sách và liệt kê các mục
2. Các điểm đánh dấu mục trong danh sách khác nhau
Thuộc tính list-style-type chỉ định loại điểm đánh dấu mục danh sách.
Ví dụ sau cho thấy một số điểm đánh dấu mục danh sách có sẵn:
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Lưu ý: Một số giá trị dành cho danh sách không có thứ tự và một số giá trị dành cho danh sách có thứ tự.
3. Một hình ảnh làm điểm đánh dấu mục danh sách
Thuộc tính list-style-image chỉ định một hình ảnh làm điểm đánh dấu mục danh sách:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('cafedev.vn.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
4. Vị trí các điểm đánh dấu mục danh sách
Thuộc tính list-style-position chỉ định vị trí của các điểm đánh dấu mục danh sách (dấu đầu dòng).
“list-style-position: external;” nghĩa là các dấu đầu dòng sẽ nằm ngoài mục danh sách. Đầu mỗi dòng của một mục danh sách sẽ được căn chỉnh theo chiều dọc.
“list-style-position: inside;” nghĩa là các dấu đầu dòng sẽ nằm bên trong mục danh sách. Vì nó là một phần của mục danh sách, nó sẽ là một phần của văn bản và đẩy văn bản vào đầu:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position: outside (default):</h2>
<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>
</body>
</html>5. Danh sách tạo kiểu với màu sắc
Chúng tôi cũng có thể tạo kiểu cho danh sách bằng màu sắc, để làm cho chúng trông thú vị hơn một chút.
Bất kỳ thứ gì được thêm vào thẻ < ol > hoặc < ul > đều ảnh hưởng đến toàn bộ danh sách, trong khi các thuộc tính được thêm vào thẻ < li > sẽ ảnh hưởng đến các mục danh sách riêng lẻ:
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors:</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Full series tự học CSS từ cơ bản tới nâng cao.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
