Một nội dung được trình bày đẹp mắt và trật tự thì không thể thiếu việc nhóm danh sách liệt kê, ở bài này mình giới thiệu và cách tùy biến thẻ ul, ol và li trong HTML để tạo danh sách liệt kê trong nội dung sao cho đẹp mắt.
Thẻ ul, ol và li là gì ?
- Thẻ ul là viết tắt của từ tiếng Anh unordered list (nghĩa là không có thứ tự)
- Thẻ ol là viết tắt của ordered list (nghĩa là có thứ tự)
- Thẻ li là viết tắt của list (danh sách).
Thẻ ul.ol và li là thẻ HTML cơ bản dùng để trình bày nội dung dưới dạng danh sách liệt kê có thứ tự hoặc danh sách liệt kê không theo thứ tự, trong đó thẻ li luôn nằm giữa thẻ ul hoặc ol, ví dụ mình có 2 loại danh sách như sau:
Danh sách liệt kê có thứ tự được tạo bằng thẻ ol và li:
- Mở bài
- Thân bài
- Kết bài
Code như sau:
<ol>
<li>Mở bài</li>
<li>Thân bài</li>
<li>Kết bài</li>
</ol>
Danh sách liệt kê không theo thứ tự, được tạo bằng thẻ ul và li :
- Thảo
- Trang
- Ngân
Code như sau:
<ul>
<li>Thảo</li>
<li>Trang</li>
<li>Ngân</li>
</ul>
Mặc định trong trình soạn thảo có sẵn công cụ tạo danh sách liệt kê theo thứ tự và danh sách liệt kê không theo thứ tự, với biểu tượng cơ bản mặc định đầu hàng, với những người viết nội dung chuyên nghiệp thì việc sử dụng trình tạo danh sách liệt kê cơ bản thì không còn hứng thú nữa, chính vì thế bài này sẽ hướng dẫn bạn tùy biến thẻ ul,ol và li để tạo danh sách liệt kê thu hút hơn với kiểu biểu tượng tùy thích.
Tùy biến style thẻ ul,ol và li trong html
Để tùy biến kiểu (Style) của thẻ ul, ol và li thì bạn cần chuyển trình soạn thảo sang chế độ văn bản thuần túy hoặc dùng CSS tùy biến cho toàn website.
Thuộc tính tùy biến style thẻ ul,ol
list-style: kiểu hiển thị đầu dòng danh sách liệt kê, mặc định trình soạn thảo có sẵn để bạn chọn. Vì dụ
- list-style: square; thì danh sách liêt kê hiển thị chấm vuông đầu dòng.
code: <ul style=”list-style: square;”>
<li>list-style: square; thì danh sách liệt kê hiển thị chấm vuông đầu dòng.</li>
</ul>
- list-style: circle; thì danh sách liệt kê hiển thị chấm tròn đầu dòng.
code: <ul style=”list-style: circle;”>
<li>list-style: circle; thì danh sách liệt kê hiển thị chấm tròn đầu dòng.</li>
</ul>
list-style-image: kiểu hiển thị đầu dòng danh sách liệt kê là ảnh icon. Ví dụ:
- list-style-image: url(‘ liên kết ảnh Máy tính xách tay’); danh sách liệt kê hiển thị ảnh máy tính đầu dòng.
<ul style=”list-style-image: url(‘./,/uploads/2020/10/iconfinder_19_2135796.svg’);”>
<li>list-style-image: url(‘ liên kết ảnh Máy tính xách tay’); danh sách liệt kê hiển thị ảnh máy tính đầu dòng.</li>
</ul>
Theo như mình thấy thì người dùng thường tùy biến kiểu của thẻ ul,ol bằng hình ảnh, bạn chỉ việc code đúng thuộc tính và đặt bên trong url là đường dẫn của ảnh icon bạn thích.
Tùy chỉnh vị trí của thẻ danh sách ul và ol
Có 2 tùy chỉnh vị trí của thẻ danh sách là bên trong (inside) và bên ngoài (outside) dùng thuộc tính list-style-position, thường thì thuộc tính mặc định sẽ là outside. Bạn sẽ thấy nó như thế này:
list-style-position:inside;
<ul style=”list-style-position:inside;”>
<li>nội dung</li>
</ul>
Ví dụ
list-style-position:outside;
<ul style=”list-style-position:outside;”>
<li>nội dung</li>
</ul>
