Thiet Ke Web » Thiet Ke Web bằng CSS » Các thẻ chuẩn trong HTML

Các thẻ chuẩn của HTML

Format thẻ p

Chúng ta có thể thay đổi color, font size, background color,... bằng cách thay đổi các thuộc tính của thẻ p. Ví dụ: chúng ta muốn thay đổi đoạn văn sau thành màu xanh, có font là 16 và màu background là màu xám:

p { color: Green; font-size:20px; background-color: Gray; }

Khi chúng ta ghi như vậy, có nghĩa là tất cả các thẻ p trong website sẽ có cũng định dạng là màu xanh, font-size 20 và background là màu xám.




Live Demo | Download Source Code

 

Trong khi thiet ke web, có trường hợp chúng ta cần format các đoạn có màu sắc và font-size khác nhau, thì khi đó chúng ta cần phải định nghĩa các class cho các thẻ p

.p1{

    color: #000066;font-size: 20px;background-color: #CCCCCC;

}

.p2{

    color: #990000;font-size: 24px;background-color: #FFFF99;

}

.p3{

    color: #009933;font-size: 30px;background-color: #CCCC00;

}

<p class="p1">Vi nhng công c thiết kế web mi nht hin nay và mt qui trình thiết kế web chuyên nghip chúng tôi đm bo rng d án thiết kế web được thc hin đúng theo yêu cu ca quý khách cùng vi mt thi gian hp lý. </p>
<p class="p2">Vi nhng công c thiết kế web mi nht hin nay và mt qui trình thiết kế web chuyên nghip chúng tôi đm bo rng d án thiết kế web được thc hin đúng theo yêu cu ca quý khách cùng vi mt thi gian hp lý. </p>
<p class="p3">Vi nhng công c thiết kế web mi nht hin nay và mt qui trình thiết kế web chuyên nghip chúng tôi đm bo rng d án thiết kế web được thc hin đúng theo yêu cu ca quý khách cùng vi mt thi gian hp lý. </p>

Live Demo | Download Source Code

định dạng web cho thẻ p xuất hiện nhiều lần trong 1 trang web

Format cho h1, h2, h3, ...

Tương tự với thẻ p, thì h1, h2, h3, ... cũng là các thẻ chuẩn trong hmlt, khi thiet ke web 1 website chúng ta cũng cần format lại các thẻ h1, h2, h3, ... này cho phù hợp với bảng thiết kế. Ví dụ:

h1 {color: #990000; font-size: 30px; margin: 0; font-weight: bold; text-transform: uppercase;}

h2 {color: #000000; font-size: 25px; margin-top: 10px; font-weight: bold; padding-top: 5px;}

h3 {color: #330000; font-size: 20px; margin-top: 10px; font-weight: bold; padding-top: 5px;}

Live Demo | Download Source Code

 

  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