Thiet Ke Web » Thiet Ke Web bằng CSS » Bullet cho Heading h1, h2, h3

Tạo Bullet, Icon cho Heading, H1

Trong thiet ke web, chúng ta thường tạo 1 icon nhỏ phía trước các h1, h2, h3,... Chúng ta có thể sử dụng background để tạo ra các icon nhỏ này, việc tạo background cho các h1, h2, h3, ... sẽ làm cho code html của chúng ta tốt hơn, gọn hơn.

.h1-icon

{

padding-left: 30px;

background-image: url(assets/images/home_icon.png);

background-repeat: no-repeat;

background-position: left center;

}

Trước tiên chúng ta dùng padding-left: 30px; để chừa chỗ cho Icon nhỏ. Khi thiết kế web, bạn có thể thay đổi so 30px thành con số thích hợp. Sau đó chúng bạn dùng thuộc tính background-image để load icon nhỏ đó lên. Background này không repeat nên bạn set background-repeat: no-repeat. Và cuối cùng bạn cần icon của mình canh giữa dòng và bên trài của chữ, nên bạn phai set background-position: left center;

Tương tự như trên, bạn có thể tạo ra bất kỳ icon nhỏ nào trước các thẻ h1, h2, h3 ... Bạn thấy đó, sử dụng CSS sẽ dễ dàng hơn cho chúng ta trong việc định dạng layout và format. Thiết kế website chuyên nghiệp không những đòi hỏi dữ liệu chạy đúng, sử dụng ngôn ngữ lập trình hiệu quả mà còn đòi hỏi phải có 1 website đẹp, code hmtl gọn gàng, ngắn gọn.

  1. Phần 1: Format các thể chuẩn của HTML: p, h1, h2, h3, ...
  2. Phần 2: Float hình trong paragraph
  3. Phần 3: Tạo background cho website
  4. Phần 4: Tạo Icon, Bullet cho Heading, h1, h2
  5. Phần 5: Rounded-Corner với chiều rộng cố định
  6. Phần 6: Tạo Drop Shadows - Đổ bóng