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">Với những công cụ thiết kế web mới nhất hiện nay và một qui trình thiết kế web chuyên nghiệp chúng tôi đảm bảo rằng dự án thiết kế web được thực hiện đúng theo yêu cầu của quý khách cùng với một thời gian hợp lý. </p>
<p
class="p2">Với những công cụ thiết kế web mới nhất hiện nay và một qui trình thiết kế web chuyên nghiệp chúng tôi đảm bảo rằng dự án thiết kế web được thực hiện đúng theo yêu cầu của quý khách cùng với một thời gian hợp lý. </p>
<p
class="p3">Với những công cụ thiết kế web mới nhất hiện nay và một qui trình thiết kế web chuyên nghiệp chúng tôi đảm bảo rằng dự án thiết kế web được thực hiện đúng theo yêu cầu của quý khách cùng với một thời gian hợp lý. </p>
Live Demo |
Download Source Code
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
- Phần 1: Format các thể chuẩn của HTML: p, h1, h2, h3, ...
- Phần 2: Float hình trong paragraph
- Phần 3: Tạo background cho website
- Phần 4: Tạo Icon, Bullet cho Heading, h1, h2
- Phần 5: Rounded-Corner với chiều rộng cố định
- Phần 6: Tạo Drop Shadows - Đổ bóng