Email: cssyeah@gmail.com / Cel: +84(0) 982 555 408
Bạn đang ở trang: Home CSS Typography Trang trí cho danh sách có thứ tự

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

icons, icon, download, free icon, css, html, design, jobs, themes, template, module, css guru, mockup css, css design, photoshop, joomla, drupal, magento, css gallery, Thiết kế web, seo, Search Engine Optimization, sáng tạo, idea, modules, component, wallpers, nhạc vui, nhạc hay, việc làm, tuyển dụng, công nghệ thông tin, du lịch, graphic, basic, advance.