Trong bài này chúng ta sẽ học
các mục sau:
- Dùng thẻ <ul> để định danh sách không có thứ tự.
- Dùng thuộc tính CSS list-style-type để xác định kiểu gạch đầu dòng.
- Dùng thẻ <ol> để định danh sách có thứ tự.
- Dùng thuộc tính type để định kiểu số thứ tự.
- Dùng thuộc tính <li> để định phần tử của danh sách.
- Dùng thẻ <dl> để định danh sách mô tả.
- Dùng thẻ <dt> để định tên các mục.
- Dùng thẻ <dd> để định phần mô tả.
- Danh sách có thể chứa 1 hay nhiều danh sách con.
- Các mục trong danh sách có thể chứa các thẻ HTML khác.
- Dùng thuộc tính CSS float: left hoặc display:inline để định 1 danh sách nằm ngang( ví dụ như kiểu danh sách menu của trang web).
Ví dụ về danh sách:
Danh sách có thứ tự:
1.Tèo
2.Tí
3.Tủn
Danh sách không có thứ tự:
- Item
- Item
- Item
- Item
Danh sách không có thứ tự:
01
danh sách không có thứ tự bắt đầu bằng thẻ <ul>.
Mỗi thành phần trong danh sách bắt đầu với thẻ <li>.
Các
mục trong danh sách sẽ bị đánh dấu mặc định bằng
các bullets (những chấm đen).
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Danh sách không thứ tự – Thay đổi các bullets
Dùng
thuộc tính CSS list-style-type
để định kiểu của các
mục trong danh sách:
Giá trị
|
Mô tả
|
|---|---|
disc
|
Kiểu bullet
(default)
|
circle
|
Kiểu circle
|
square
|
Kiểu square
|
none
|
Không đánh dấu
|
Ví dụ: - Disc
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ví dụ: - Circle<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ví dụ: - Square<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ví dụ: - None<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Danh sách có thứ tự
Dùng
thẻ <ol>.
Mỗi mục con dùng thẻ <li>.
Các
mục con trong danh sách theo mặc định được đánh số
thứ tự.
Ví dụ:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Danh sách có thứ tự – Thuộc tính Type
Thuộc
tính type của thẻ <ol> xác định loại số thứ tự
ở đánh dấu cho mỗi mục con.
Loại
|
Mô tả
|
|---|---|
type="1"
|
Kiểu số (mặc
định)
|
type="A"
|
Kiểu chữ HOA
|
type="a"
|
Kiểu chữ
thường
|
type="I"
|
Kiểu số La Mã
viết HOA (I, II, III,...)
|
type="i"
|
Kiểu số La Mã
viết thường.
|
Kiểu số:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Kiểu chữ HOA:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Kiểu chữ thường:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Kiểu số La Mã viết HOA:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Kiểu số La Mã viết thường:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Danh sách mô tả - Description Lists
01
danh sách mô tả là 1 danh sách các điều khoản và phần
mô tả theo từng mục.
Dùng
thẻ <dl>
để xác định danh sách mô tả,
thẻ <dt>
dùng để xác định tên các điều khoản,
và thẻ <dd>
để mô tả mỗi điều khoản:
Ví dụ:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Danh sách con trong danh sách
Ví dụ:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Danh sách theo hàng ngang
Danh
sách có thể được định dạng theo nhiều cách với CSS.
01
trong những cách thông dụng là danh sách theo hàng ngang như
kiểu Menu.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<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>
</body>
</html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<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>
</body>
</html>
Tác giả: #drM
Nguồn: Sưu Tầm
Không có nhận xét nào:
Đăng nhận xét