[HTML/HTML5] Phần 8: Phong cách HTML

28 lượt xem

Thiết lập phong cách của 1 phần tử HTML, có thể thực hiện với thuộc tính style. Thuộc tính style HTML có cú pháp sau:

<tagname style=”property:value;”>

Với propery là 1 thuộc tính CSS và value là 1 giá trị CSS.

Màu nền HTML
Thuộc tính màu nền background-color HTML định nghĩa màu nền cho 1 phần tử. Ví dụ sau thiết lập màu nền màu pink (hồng) cho 1 trang web

<!DOCTYPE html>
<html>
<body style="background-color:pink;">

<h1>Đây là tiêu đề --- dammio.com</h1>
<p>Đây là 1 đoạn văn bản.</p>

</body>
</html>

Màu chữ HTML
Thuộc tính color định nghĩa màu văn bản cho 1 phần tử HTML.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Tiêu đề màu xanh.</h1>
<p style="color:red;">Đoạn văn bản màu đỏ.</p>

</body>
</html>

Font chữ HTML
Thuộc tính font-family định nghĩa font chữ cho 1 phần tử HTML.

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">Tiêu đề có kiểu chữ Verdana --- dammio.com</h1>
<p style="font-family:courier;">Đoạn văn bản có kiểu chữ Courier.</p>

</body>
</html>

Kích thước văn bản HTML
Thuộc tính font-size định nghĩa kích thước văn bản.

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:400%;">Đây là tiêu đề có kích thước 400% --- dammio.com</h1>
<p style="font-size:160%;">Đây là đoạn văn bản có kích thước 120%.</p>

</body>
</html>

Canh dòng văn bản
Thuộc tính text-align dùng để canh dòng đoạn văn bản ở các vị trí left (mặc định), right, center và justify (canh đều).

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Canh giữa --- dammio.com</h1>
<p style="text-align:right;">Canh phải.</p>

</body>
</html>

Kết luận: Bài viết giúp bạn nắm 1 số thuộc tính phong cách CSS cơ bản, để xây dựng 1 trang web trên thực tế, bạn cần nắm vững nhiều thuộc tính hơn nữa và thành thục trong việc áp dụng các phong cách này.

Bình luận Facebook

Để lại bình luận

2 Comments on "[HTML/HTML5] Phần 8: Phong cách HTML"

Thông báo khi có
avatar
1000
Sắp xếp theo:   mới nhất | cũ nhất | nhiều bình chọn nhất
trackback

[…] Đăng ngày 26 Tháng Sáu, 201727 Tháng Sáu, 2017 bởi dammio 13 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo >> […]

trackback

[…] 2017 bởi dammio 0 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo […]

wpDiscuz