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ẻ (orderlist) và để 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:

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