Bài 7: HTML Styles | Thẻ Styles trong HTML là gì?

html

Table of Contents

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

Ví dụ:

				
					<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>
				
			

Thuộc tính kiểu HTML

Đặt kiểu của phần tử HTML, có thể được thực hiện với stylethuộc tính.
Thuộc tính HTML style có cú pháp như sau:

				
					<tagname style="property:value;">

				
			

Thuộc tính này là một thuộc tính CSS. Giá trị là một giá trị CSS.

Màu nền

Thuộc tính CSS background-colorxác định màu nền cho phần tử HTML.

Ví dụ

Đặt màu nền cho trang thành màu xanh bột:

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
				
			

Ví dụ

Đặt màu nền cho hai phần tử khác nhau:

				
					<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>
</html>
				
			

Văn bản màu

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

				
					<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
				
			

Phông chữ

Thuộc tính CSS font-familyxác định phông chữ sẽ được sử dụng cho phần tử HTML:

				
					<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>
				
			

Cỡ chữ

Thuộc tính CSS font-sizexác định kích thước văn bản cho một phần tử HTML:

				
					<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

</body>
</html>
				
			

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

Thuộc tính CSS text-alignxác định căn chỉnh văn bản theo chiều ngang cho phần tử HTML:

				
					<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>
				
			

Tóm tắt chương

  • Sử dụng style thuộc tính để tạo kiểu cho 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 kích thước văn bản
  • Dùng text-align để canh lề văn bản

Nguồn tham khảo: w3schools.com

Hệ thống Website:

  • WePage: Nền tảng thiết kế website chuyên nghiệp.
  • WeHost: Nhà cung cấp Hosting, VPS, máy chủ uy tín.
  • WeSoft: Hệ sinh thái phần mềm chuyển đổi số toàn diện.
  • WeTech Software: Nhà phát triển phần mềm dành cho thị trường quốc tế.
  • WeTech Smart Cloud: Giải pháp điện toán đám mây toàn cầu theo tiêu chuẩn quốc tế.
  • SuperAds VietnamChuyên Gia Quảng Cáo

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 *