Bài 8 HTML - Thuộc tính style trong HTML

Trong bài này chúng ta sẽ tìm hiểu thuộc tính style trong HTML, đây là thuộc tính dùng để điều chỉnh cách hiển thị cho chính các thẻ HTML.

Do chúng ta chưa học CSS nên mình sẽ không nói quá nhiều về kiến thức chuyên môn như selector, các cách thêm CSS.. Thay vào đó mình sẽ hướng dẫn từng hiệu ứng và giới thiệu luôn các thuộc tính CSS làm ra hiệu ứng đó.

1. Thuộc tính style trong HTML là gì?

Tất cả các thẻ HTML đều có thuộc tính style này. Nó được dùng để bổ sung CSS, thay đổi cách hiện thị mặc định của thẻ HTML đó. Cú pháp như sau:

<tagname style="CSS_PROPERTY">

Trong đó CSS_PROPERTY chính là những đoạn mã dùng để thiết lập giao diện cho chính thẻ đó. Ví dụ như thiết lập background, đổi màu chữ, đổi kích thước font chữ, thiết lập vị trí hiển thị trên giao diện ...

Giá trị của CSS_PROPERTY có dạng key:value, nếu có nhiều CSS thì sử dụng dấu ; để ngăn cách giữa chúng.

Ví dụ: Thiết lập background sang màu đỏ cho thẻ div.

<div style="background:red">Học HTML Style tại mctt.vn</div>

2. Cách sử dụng thuộc tính style trong HTML

Style background

Khi đặt background vào thuộc tính style thì bạn có thể thay đổi được màu nền cho thẻ HTML đó.

<div style="background:red">Học HTML Style tại mctt.vn</div>

Style font color

Bạn cũng có thể đổi màu cho font chữ bằng cách sử dụng thuộc tính color.

<div style="color:red">Học HTML Style tại mctt.vn</div>

Style font size

Thuộc tính font-size sẽ thay đổi kích thước của font chữ. Bạn hãy đặt nó vào style để áp dụng nhé.

<div style="font-size: 50px">Học HTML Style tại mctt.vn</div>

Và còn rất nhiều hiệu ứng khác. Bạn có thể tham khảo thêm tại series học CSS nhé.

3. Thêm nhiều CSS vào thuộc tính style

Để thêm nhiều hiệu ứng vào the style thì ta sẽ ngăn cách chúng bằng dấu chấm phẩy. Xem ví dụ dưới đây để hiểu rõ hơn.

<div style="font-size: 50px;color:red">Học HTML Style tại mctt.vn</div>

Như vậy là bạn đã biết được cách sử dụng thuộc tính style trong HTML rồi đấy. Chúc bạn thành công!