Để các bạn dễ hiểu trong bài viết này thì các bạn cần xem lại bài viết [Học HTML] Các kiểu danh sách (list) trong series học HTML của tôi. Ở bài này tôi sẽ viết về các thuộc tính định dạng danh sách (list) mà bạn cần biết.
1. Nhắc lại một chút phần lý thuyết trong HTML
Có 02 kiểu danh sách chính trong HTML là: Kiểu sắp xếp (dùng thẻ <ol>) và kiểu không sắp xếp (dùng thẻ <ul>).
Các thẻ: <ol>, <ul>, <li> đều thuộc dạng PHẦN TỬ KHỐI.
Mặc định các thẻ list (danh sách) trong HTML sẽ được hiển thị dựa trên quy tắt hiển thị ở các trình duyệt cho các thẻ đó. Ví dụ khi bạn sử dụng <ol> thì sẽ hiển thị danh sách có đánh số, thẻ <ul> sẽ hiển thị dấu chấm tròn cho mỗi mục con bên trong.
Nhưng với CSS, bạn có thể tùy biến lại được cách hiển thị của nó, chẳng hạn như bạn muốn dùng hình ảnh thay cho dấu chấm tròn ở thẻ <ul> hoặc bạn có thể dùng thuộc tính margin, padding để làm co giãn khoảng cách giữa các list item hoặc các bạn cũng có thể làm thay đổi màu nền trong bảng danh sách như hình dưới
Ở phần dưới tôi sẽ viết về các thuộc tính trong CSS để làm được những điều đó
2. Thuộc tính list-style-type
Thuộc tính này để thiết lập kiểu hiển thị cho các dấu đầu dòng trên mỗi thẻ <li>.
Cú pháp
list-style-type: giá trị;
Trong đó
+ Giá trị của kiểu không sắp xếp là:
– disc: Tạo ký hiệu (symbol) chấm tròn đen phía trước danh sách
– circle: Tạo ký hiệu (symbol) chấm tròn trắng phía trước danh sách
– square: Tạo ký hiệu (symbol) ô vuông đen phía trước danh sách
– none: Không tạo ký hiệu (symbol) phía trước danh sách
+ Giá trị của kiểu sắp xếp là:
– decimal: Tạo số 1, 2, 3, 4, … phía trước danh sách
– lower-alpha: Tạo chữ cái a, b, c, d, … phía trước danh sách
– upper-alpha: Tạo chữ cái A, B, C, D, … phía trước danh sách
– lower-roman: Tạo số la mã i, ii, iii, iv, … phía trước danh sách
– upper-roman: Tạo số la mã I, II, III, IV, … phía trước danh sách
– none: Không tạo ký hiệu (symbol) phía trước danh sách
3. Thuộc tính list-style-image
Thuộc tính list-style-image dùng để thiết lập kiểu đánh dấu bằng hình ảnh cho danh sách
Cú pháp list-style-image: url(“đường dẫn đến tập tin hình ảnh”);
Trong đó, “đường dẫn đến tập tin hình ảnh” có thể là đường dẫn tương đối hoặc tuyệt đối
(Nếu chưa rõ cách xác định đường dẫn, bạn có thể xem lại bài đường dẫn trong series HTML của tôi)
4. Thuộc tính list-style-position
Thuộc tính list-style-position dùng để thiết lập vị trí đánh dấu danh sách.
Cú pháp list-style-position: giá trị;
Trong đó giá trị có thể là:
+ inside: đánh dấu nằm bên trong nội dung của phần tử <li>
+ outside: đánh dấu nằm bên ngoài nội dung của phần tử <li> (mặc định)
5. Cú pháp định dạng danh sách rút gọn
Thay vì phải định dạng cho danh sách bởi 3 thuộc tính (list-style-type, list-style-image, list-style-position) riêng biệt, thì ta có thể hợp chúng lại thành một bởi thuộc tính list-style
Cú pháp
list-style: giatri1 giatri2 giatri3;
Trong đó
+ giatri1 là giá trị của thuộc tính list-style-type
+ giatri2 là giá trị của thuộc tính list-style-position
+giatri3 là giá trị của thuộc tính list-style-image
Lưu ý: Giá trị của thuộc tính list-style không nhất thiết phải đủ 3 tham số. Tuy nhiên, các tham số phải được sắp xếp theo đúng thứ tự trên.
6. Kiểu danh sách với màu sắc
Chúng ta cũng có thể sắp xếp các danh sách với màu sắc, để làm cho chúng trông hấp dẫn hơn một chút.
Mọi thứ đượ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 trong danh sách riêng lẻ
Ví dụ 1
ví dụ 2
ví dụ 3
7. Các bài tập
7.1 Bài tập 1
Thiết lập kiểu hiển thị cho dấu đầu dòng của kiểu không sắp xếp là “square” và kiểu sắp xếp là “upper-roman”.
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <p>unordered list</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>ordered list</p> <ol> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<p>unordered list</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>ordered list</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
7.2 Bài tập 2
Cũng như bài tập 1 nhưng loại bỏ ký hiệu phía trước các danh sách.
<!DOCTYPE html>
<html>
<head>
<style>
ul, ol {
list-style-type: none;
}
</style>
</head>
<body>
<p>unordered list</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>ordered list</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
8. Lời cuối bài
Đến đây là kết thúc bài viết về các thuộc tính định dạng danh sách (list) trong CSS. Ở bài sau tôi sẽ viết về các thuộc tính định dạng bảng trong CSS.
The post [CSS bài 18] Các thuộc tính định dạng danh sách (list) appeared first on Học online.
from WordPress http://ift.tt/2iTVPbU
via IFTTT
Không có nhận xét nào:
Đăng nhận xét