🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Thuộc tính kiểu(Styles) trong HTML đượ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à hơn thế nữa.

Ví dụ:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

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

Copy and chạy code

1. Thuộc tính style trong HTML

Đặt kiểu của một phần tử HTML, có thể được thực hiện với thuộc tính style.

Thuộc tính kiểu HTML có cú pháp sau:


<tagname style="property:value;">

property 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 sau trong hướng dẫn này hoặc trong series tự học CSS.

2. Background Color

thuộc tính Background Color của CSS định nghĩa màu nền cho một phần tử của HTML.

Ví dụ: Đặt màu nền cho một trang thành Powderblue:

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

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

</body>

Copy and chạy code

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

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <body>

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

</body>

Copy and chạy code

3. Màu chữ

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

Ví dụ:

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

4. Fonts

Thuộc tínhfont-family trong CSS đinh nghĩa phông chữ được sử dụng cho phần tử HTML:

Ví dụ:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

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

Copy and chạy code

5. Text Size

Thuộc tính kích thước phông chữ (font-size) CSS định nghĩa kích thước văn bản cho một phần tử HTML:

Ví dụ:

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

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

Thuộc tính căn chỉnh văn bản ( text-align) CSS định nghĩa căn chỉnh văn bản ngang cho một phần tử HTML:

Ví dụ:

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

Copy and chạy code

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM