Sử Dụng Thẻ Tạo Danh Sách: Ul, Ol, Li - Code Lean

Có thể bạn quan tâm

Bài đăng nổi bật

Học Ngành Gì KHÔNG THẤT NGHIỆP

Đặng Kim Thi13:22 Trang chủCSS Sử dụng thẻ tạo danh sách: ul, ol, li Van Tran 18:53 0 Nhận xét

Sử dụng các thẻ tạo danh sách: ul, ol, li

Ví dụ về danh sách trong HTML Một danh sách không xếp thứ tự:

Item
Item
Item
Item

Một danh sách có xếp thứ tự:

First item
Second item
Third item
Fourth item

Danh sách không xếp thứ tự

Ta định nghĩa danh sách không xếp thứ tự bằng thẻ <ul>, viết tắt của unordered list. Mỗi phần tử của danh sách được định nghĩa bằng thẻ <li> , viết tắt của list item. Mặc định, các phần tử của danh sách sẽ được hiển thị kèm theo một dấu tròn phía trước: <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

Các biểu tượng cho phần tử trong danh sách không xếp thứ tự

Ta dùng thuộc tính CSS list-style-type để định kiểu cho biểu tượng của phần tử trong danh sách: Giá trịMiêu tả disc (Mặc định) Các biểu tượng là hình tròn màu đen circleCác biểu tượng là hình tròn rỗng squareCác biểu tượng là hình vuông none Không hiển thị các biểu tượng Ví dụ dùng giá trị disc  <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Ví dụ dùng giá trị circle <ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Ví dụ dùng giá trị square  <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Ví dụ dùng giá trị none <ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

Danh sách xếp theo thứ tự

Ta định nghĩa một danh sách xếp theo thứ tự bằng thẻ <ol> (ordered list). Mỗi phần tử của danh sách được định nghĩa bằng thẻ <li> (list item). Mặc định thì các phần tử sẽ được hiển thị kèm số thứ tự: <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

Thuộc tính type của danh sách xếp thứ tự

Thuộc tính type của thẻ <ol> dùng để định kiểu cho biểu tượng các phần tử: TypeMiêu tả type="1" Các phần tử sẽ được đánh thứ tự bằng số (Mặc định) type="A" Các phần tử sẽ được đánh thứ tự bằng chữ cái hoa type="a" Các phần tử sẽ được đánh thứ tự bằng chữ cái thường type="I" Các phần tử sẽ được đánh thứ tự bằng chữ số La Mã hoa type="i" Các phần tử sẽ được đánh thứ tự bằng chữ số La Mã thường Đánh thứ tự bằng số: type="1" <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Đánh thứ tự bằng chữ cái hoa: type="A" <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Đánh thứ tự bằng chữ cái thường: type="a"  <ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Đánh thứ tự bằng chữ số La Mã hoa: type="I" <ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Đánh thứ tự bằng chữ số La Mã thường: type="i" <ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

Danh sách miêu tả

Mã HTML cũng có thẻ danh sách miêu tả. Một danh sách miêu tả là danh sách các thuật ngữ cùng với miêu tả của chúng. Thẻ <dl> định nghĩa một danh sách miêu tả, trong đó, thẻ <dt> định nghĩa thuật ngữ (tên gọi), và thẻ <dd> miêu tả các thuật ngữ: <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

Danh sách bên trong danh sách

Ta có thể lồng danh sách vào một danh sách khác, tạo thành danh sách bên trong danh sách, tiếng Anh gọi là nested list: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> Chú ý: Mỗi phần tử không chỉ có thể chứa danh sách khác mà còn có thể chứa các thành phần HTML khác như ảnh hay liên kết v.v.

Danh sách nằm ngang

Danh sách trong HTML có thể được định kiểu theo nhiều cách bằng CSS. Một cách làm phổ biến là định kiểu chuyển danh sách thành nằm ngang để tạo thành một menu:   <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>

Tóm tắt

Dùng thẻ <ul> để định nghĩa một danh sách không xếp thứ tự
Dùng thuộc tính CSS list-style-type để định nghĩa biểu tượng cho các phần tử trong danh sách
Dùng thẻ <ol> để định nghĩa một danh sách xếp thứ tự
Dùng thuộc tính type để định nghĩa kiểu đánh thứ tự
Dùng thẻ <li> để định nghĩa một phần tử trong danh sách
Dùng thẻ <dl> để định nghĩa một danh sách miêu tả
Dùng thẻ <dt> để định nghĩa một thuật ngữ
Dùng thẻ <dd> để miêu tả thuật ngữ ngay phía trên nó trong danh sách miêu tả
Có thể lồng các danh sách bên trong các danh sách
Các phần tử trong danh sách có thể chứa các thành phần HTML khác
Dùng thuộc tính CSS float:left hoặc display:inline để hiển thị danh sách nằm ngang

Tags CSS HTML Thiết Kế Website

You might like

Hiện thêm