{}

Tạp chí tiếng Việt dành cho Web Designers.
Thứ Năm ngày 4 Tháng 12 năm 2008
Trang trí cho danh sách có thứ tự

Mặc định hầu hết các trình duyệt (Browser) đều hiển thị chữ số của danh sách có thứ tự (order list) theo font mặc định mà chúng ta sử dụng cho nội dung site. Trong bài chỉ dẫn ngắn này tôi xin hướng dẫn các bạn làm thế nào để sử dụng hai thẻ <ol> (orderlist) và <p> để thêm trang trí thêm cho danh sách có thứ tự orderlist.

Để có hình dung rõ hơn các bạn hãy nhìn vào hình vẽ dưới đây:

orderlist, unorderlist

Chúng ta sẽ sử dụng font cho các chữ số là font "Georgia", còn font cho thẻ <p> là font Arial.

Với hình vẽ trên chúng ta có mã nguồn HTML như sau:

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>

Dưới đây là mã CSS cho hai thẻ <ol> và <p>

ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}

ol p {
  font: normal .8em Arial, Helvetica, sans-serif;
  color: #000000;
}

Bài viết được tổng hợp từ Web Designer Wall

 

Vài nét về tác giả

Chu Huu Trung Chào tất cả các bạn, tên tôi là Chu Hữu Trung. Thiết kế Web là nghề của tôi, hiện nay tôi đang sống và làm việc tại Hà Nội (Việt Nam). Tôi rất vui khi các bạn ghé thăm cssyeah.com

Free icons

Free icons Với những bộ icon này bạn sẽ làm cho các dự án của bạn thêm sinh động hơn.