By GokiSoft.Com| 10:48 21/05/2020|
Tài Liệu HTML

HTML Styles - Các phong cách của HTML

Thuộc tính HTML style thường được dùng để thêm các phong cách vào một thành phần, như là màu, font, kích thước, và nhiều hơn nữa.

ví dụ

I am Red

I am Blue

I am Big
<!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 style trong HTML


Đặt phong cách của một thành phần HTML, có thể thực hiện với thuộc tính style .

Thuộc tính HTML style có các cú pháp sau:

<tagname style="property:value;">


property là một thuộc tính CSS. value là một giá trị CSS.

Bạn sẽ học về CSS sau.


Màu nền


Thuộc tính CSS background-color định nghĩa màu nền cho một thành phần HTML.

Ví dụ này đặt màu nền cho một trang thành xanh nhạt:

ví dụ

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

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

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

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

</body>
</html>



Màu của văn bản


Thuộc tính CSS color định nghĩa màu văn bản cho một thành phần HTML:

ví dụ

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<!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 font-family trong CSS định nghĩa phông sẽ được sử dụng cho một thành phần HTML:

ví dụ

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<!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 font-size trong CSS định nghĩa cỡ chữ cho một thành phần HTML:

ví dụ

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
<!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 text-align trong CSS định nghĩa sự căn chỉnh văn bản theo chiều chiều ngang cho một thành phần HTML:

ví dụ

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<!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


  • Dùng thuộc tính style để tạo kiểu cho các thành phần HTML
  • Dùng background-color cho màu nền
  • Dùng color cho màu chữ
  • Dùng font-family cho phông chữ
  • Dùng font-size cho kích thước chữ
  • Dùng text-align cho căn chỉnh chữ


Tags: