Thứ Năm, 26 tháng 12, 2013
CSS Lists
- Thiết lập đánh dấu mục danh sách khác nhau cho các danh sách đặt hàng
- Thiết lập đánh dấu mục danh sách khác nhau cho danh sách có thứ tự
- Thiết lập một hình ảnh như điểm đánh dấu mục danh sách
Danh sách
Trong HTML, có hai loại danh sách:
- danh sách không có thứ tự - danh sách các mục được đánh dấu bằng đạn
- đánh số thứ tự - danh sách các mục được đánh dấu bằng số hoặc chữ
Với CSS, danh sách có thể được theo kiểu hơn nữa, và hình ảnh có thể được sử dụng như điểm đánh dấu mục danh sách.
Khác nhau Danh sách mục Markers
Loại danh sách mục đánh dấu được quy định với danh sách-style-type bất động sản:
Ví dụ
<!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>
Thử nó cho mình »
Một số các giá trị cho danh sách không có thứ tự, và một số cho các danh sách đặt hàng.
Một hình ảnh như danh sách mục Marker
Để xác định một hình ảnh như điểm đánh dấu mục danh sách, sử dụng tài sản list-style-image:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-image:url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Thử nó cho mình »
Ví dụ trên không hiển thị như nhau trong tất cả các trình duyệt. IE và Opera sẽ hiển thị hình ảnh đánh dấu cao hơn chút ít so với Firefox, Chrome, và Safari.
Nếu bạn muốn hình ảnh đánh dấu được đặt như nhau trong tất cả các trình duyệt, một giải pháp crossbrowser được giải thích dưới đây.
Crossbrowser Giải pháp
Ví dụ sau sẽ hiển thị hình ảnh đánh dấu như nhau trong tất cả các trình duyệt:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Thử nó cho mình »
Ví dụ giải thích:
- Cho ul:
- Thiết lập danh sách-style-type để không để loại bỏ các điểm đánh dấu mục danh sách
- Đặt cả padding và lợi nhuận để 0px (tương thích qua trình duyệt)
- Cho tất cả các li trong ul:
- Thiết lập các URL của hình ảnh, và hiển thị nó chỉ một lần (không lặp lại)
- Định vị hình ảnh mà bạn muốn nó (0px trái và xuống 5px)
- Vị trí các văn bản trong danh sách với lớp đệm bên trái
Danh sách - Viết tắt tài sản
Nó cũng có thể xác định tất cả các thuộc tính trong một danh sách, tài sản duy nhất. Này được gọi là một tài sản viết tắt.
Tài sản viết tắt được sử dụng cho các danh sách, là tài sản list-style:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style:square url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Thử nó cho mình »
Khi sử dụng tài sản viết tắt, thứ tự của các giá trị là:
- list-style-type
- danh sách theo phong cách vị trí (cho một mô tả, xem bảng thuộc tính CSS dưới đây)
- list-style-hình ảnh
Nó không quan trọng nếu một trong các giá trị ở trên bị thiếu, miễn là còn lại là theo thứ tự quy định.
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét