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

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ài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [HTML/HTML5] Phần 29: URL trong HTML

Trích dẫn bài viết

APA:
Dammio. (2017). [HTML/HTML5] Phần 8: Phong cách HTML. https://www.dammio.com/2017/06/27/htmlhtml5-phan-8-phong-cach-html.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 8: Phong cách HTML}, year = {2017}, url = {https://www.dammio.com/2017/06/27/htmlhtml5-phan-8-phong-cach-html}, urldate = {2024-12-05} }

Kết nối