Bài 8: HTML Styles
HTML Styles
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h2 style=”color:red”>I am Red</h2>
<h2 style=”color:blue”>I am Blue</h2>
</body>
</html>
Kết quả thu được:
I am Red
I am Blue
Định kiểu HTML
Mỗi phần tử trong HTML có một giá trị định kiểu mặc định (màu nền là trắng và màu chữ là đen).
Thay đổi định kiểu mặc định của phần tử HTML có thể được thực hiện bởi các thuộc tính định kiểu.
Đây là ví dụ thay đổi màu nền mặc định từ màu trắng sang màu xám:
Ví dụ
<body style=“background-color:lightgrey”>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
 |
Thuộc tính bgcolor được hỗ trợ trong phiên bản cũ hơn của HTML, tuy nhiên nó không hợp lệ trong HTML5. |
|---|
Thuộc tính định kiểu trong HTML
Thuộc tính định kiểu trong HTML có cú pháp:
style=”property:value“property là một thuộc tính của CSS.
value là một giá trị của CSS.
|
Bạn sẽ học thêm về CSS sau khóa học này. |
|---|
Màu chữ trong HTML
Thuộc tính màu sắc xác định màu cho văn bản được sử dụng cho HTML:
Ví dụ :
<h1 style=“color:blue”>This is a heading</h1>
<p style=“color:red”>This is a paragraph.</p>Định kiểu font chữ HTML
Thuộc tính font-family xác định các phông chữ sử dụng cho HTML:
Ví dụ:
<h1 style=“font-family:verdana”>This is a heading</h1>
<p style=“font-family:courier”>This is a paragraph.</p> |
Thẻ <font> được hỗ trợ trong phiên bản cũ hơn của HTML, tuy nhiên nó không hợp lệ trong HTML5. |
|---|
Định kiểu size chữ HTML
Thuộc tính font-size xác định kích thước chữ sử dụng cho HTML:
Ví dụ
<h1 style=“font-size:300%”>This is a heading</h1>
<p style=“font-size:160%”>This is a paragraph.</p>Căn lề văn bản HTML
Thuộc tính text-align cho phép căn chỉnh văn bản cho HTML:
Ví dụ:
<h1 style=“text-align:center”>Centered Heading</h1>
<p>This is a paragraph.</p> |
Thẻ <center> được hỗ trợ trong phiên bản cũ hơn của HTML, tuy nhiên nó không hợp lệ trong HTML5. |
|---|
Tóm tắt bài học
- Sử dụng thuộc tính style để định kiểu cho phần tử HTML
- Sử dụng background-color cho màu nền.
- Sử dụng color cho màu chữ văn bản.
- Sử dụng font-family cho font chữ văn bản.
- Sử dụng font-size cho size chữ.
- Sử dụng text-align cho căn lề văn bản.
1 phản hồi
[…] <font> […]