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>

Xem demo thay đổi màu nền

lamp 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.

lamp 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>

Xem demo thay đổi màu chữ


Đị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>

Xem demo định kiểu font chữ

lamp 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>

Xem demo định kiểu size chữ


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>

Xem demo căn lề cho văn bản

lamp 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.

 

Có thể bạn sẽ thích…

1 phản hồi

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0 Shares
Share via
Copy link
Powered by Social Snap