KIỂU HTML
Thuộc tính HTML style được sử dụng để thêm kiểu vào một phần tử, như màu sắc, font chữ, kích thước,...
❶ Quan sát đoạn code
👀 Màu đỏ
👀 Màu xanh
👀 Chữ lớn
Ví dụ
<!DOCTYPE html>
<html>
<body>
<p>tôi bình thường</p>
<p style="color:red;">màu đỏ</p>
<p style="color:blue;">màu xanh</p>
<p style="font-size:50px;">chữ lớn</p>
</body>
</html>
❷ Thuộc tính kiểu HTML
Thiết lập kiểu của một phần tử HTML, có thể được thực hiện với style thuộc tính.
Thuộc tính HTML style có cú pháp như sau
<tagname style="property:value;">
Thuộc tính là một thuộc tính CSS.
Giá trị là một giá trị CSS.
Bạn sẽ tìm hiểu thêm về CSS ở phần sau của hướng dẫn này.
❸ Màu nền trong HTML
Thuộc tính CSS background-color xác định màu nền cho một phần tử HTML.
Ví dụ
Đặt màu nền cho một trang thành bộ màu
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Ví dụ
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>đây là tiêu đề lớn</h1>
<p>đây là đoạn văn</p>
</body>
</html>
Ví dụ
Đặt màu nền cho hai phần tử khác nhau
<body>
<h1 style="background-color:powderblue;">đây là một tiêu đề</h1>
<p style="background-color:tomato;">đây là một đoạn văn.</p>
</body>
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">đây là một tiêu đề</h1>
<p style="background-color:tomato;">đây là một đoạn văn.</p>
</body>
</html>
❹ Màu văn bản trong HTML
Thuộc tính CSS color xác định màu văn bản cho một phần tử HTML
Ví dụ
<body>
<h1 style="background-color:powderblue;">đây là một tiêu đề</h1>
<p style="background-color:tomato;">đây là một đoạn văn.</p>
</body>
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">đây là một tiêu đề</h1>
<p style="font-family:courier;">đây là một đoạn văn.</p>
</body>
</html>
❺ Cỡ chữ trong HTML
Thuộc tính FCSS font-family xác định Font chữ được sử dụng cho một phần tử HTML
Ví dụ
<h1 style="font-size:300%;">đây là một tiêu đề</h1>
<p style="font-size:160%;">đây là một đoạn văn.</p>
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">đây là một tiêu đề</h1>
<p style="font-size:160%;">đây là một đoạn văn
</p>
</body>
</html>
❻ Căn chỉnh văn bản trong HTML
Thuộc tính CSS font-size xác định kích thước văn bản cho một phần tử HTML
Ví dụ
<h1 style="text-align:center;">tiêu đề chính giữa</h1>
<p style="text-align:center;">căn giữa đoạn văn.</p>
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">tiêu đề chính giữa</h1>
<p style="text-align:center;">căn giữa đoạn văn.</p>
</body>
</html>
❼ Ghi chú
👀 Sử dụng style thuộc tính để tạo kiểu các phần tử HTML
👀 Sử dụng background-color cho màu nền
👀 Sử dụng color cho màu văn bản
👀 Sử dụng font-family cho phông chữ văn bản
👀 Sử dụng font-size cho các kích thước văn bản
👀 Sử dụng text-align để căn chỉnh văn bản