HTML styles

Thuộc tính style trong HTML được sử dụng để thêm định dạng (kiểu trang trí) cho một một phần tử, chẳng hạn như màu sắc, font chữ, kích thước, v.v.

Ví dụ

Tôi có màu đỏ
Tôi có màu xanh
Tôi có kích thước 30px

Xem ví dụ

Thuộc tính HTML Style


Chúng ta sử dụng thuộc tính style để thiết lập các định dạng style cho một phần tử HTML.

Thuộc tính style có cú pháp như sau.

<div style="property:value"></div>

Trong đó, property là một thuộc tính CSS, value là giá trị CSS

CSS là gì thì chúng ta sẽ xem trong loạt bài viết về CSS nhé

Background Color


Thuộc tính CSS background or background-color được dùng để xác định màu nền cho phần tử HTML

Ví dụ 1: Đặt màu nền cho trang web bằng màu xanh da trời

<body style="background-color:powderblue;">

<h1>Tiêu đề heading 1</h1>
<p>Văn bản paragraph.</p>

</body>

Xem kết quả

Ví dụ 2: Đặt màu nền cho 2 phần tử khác nhau như trên

<h1 style="background-color:powderblue;">Tiêu đề heading 1</h1>
<p style="background-color:tomato;">Văn bản paragraph.</p>

Xem kết quả

Color


Thuộc tính CSS color xác định màu văn bản cho một phần tử HTML:

Ví dụ

<h1 style="color:green;">Tiêu đề heading 1</h1>
<p style="color:red;">Văn bản paragraph.</p>

Xem kết quả

Font


Thuộc tính CSS font-family xác định phông chữ được sử dụng cho một phần tử HTML.

Ví dụ

<h1 style="font-family:verdana;">Tiêu đề heading 1</h1>
<p style="font-family:courier;">Văn bản paragraph.</p>

Xem kết quả

Font-size


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="font-size:300%;">Tiêu đề heading 1</h1>
<p style="font-size:160%;">Văn bản paragraph.</p>

Xem kết quả

Căn chỉnh văn bản


Thuộc tính CSS text-align xác định căn chỉnh văn bản theo chiều ngang (trái, phải, giữa ...) cho một phần tử HTML:

Ví dụ

<h1 style="text-align:center;">Tiêu đề heading 1</h1>
<p style="text-align:center;">Văn bản paragraph.</p>

Xem kết quả

Tóm tắt nội dung bài viết


  • Sử dụng thuộc tính style để tạo định dạng kiểu các phần tử HTML
  • Sử dụng thuộc tính background-color khi cần định dạng màu nền của phần tử HTML
  • Sử dụng thuộc tính color để tạo màu văn bản của phần tử
  • Sử dụng thuộc tính font-family cho phông chữ của văn bản
  • Sử dụng thuộc tính font-size để định dạng kích thước của văn bản
  • Sử dụng thuộc tính text-align để căn chỉnh văn bản