Thuộc Tính STYLE Trong HTML Và Một Số Thuộc Tính Thường Dùng

Trong bài viết trước đây mình cũng đã nói về cấu trúc của thẻ và thuộc tính của thẻ HTML rồi. Và các bạn cũng hiểu cách sử dụng thuộc tính trong HTML rồi chứ, nếu chưa hiểu thì bạn xem qua bài viết tìm hiểu về cấu trúc của thẻ và thuộc tính trong HTML nhé. Trong bài này mình sẽ nói về thuộc tính style trong HTML vì nó là 1 thuộc tính thường xuyên được sử dụng.

Thuộc tính style trong HTML là 1 thuộc tính đặc biệt. Đúng như tên gọi của nó, nó dùng để khai báo các định dạng cho thẻ HTML. Giá trị của thuộc tính style có thể là 1 hoặc nhiều cặp thuộc tính: giá trị. Giá trị của thuộc tính style thường được sử dụng là các giá trị dùng để định dạng màu sắc, font chữ, cỡ chữ, màu nền,…Ngoài ra còn rất nhiều giá trị khác của thuộc tính style mà bạn có thể tự tìm hiểu thêm.

Ví dụ về thuộc tính style trong HTML

Chúng ta sẽ gán cho thẻ <p> thuộc tính style các giá trị là màu chữ và cỡ chữ đó là: color:#068400 và font-size:16px. Và chúng ta sẽ có đoạn mã HTML như sau:

<p style="color:#068400;font-size:36px;">Thuộc tính style trong HTML</p>

1	<p style="color:#068400;font-size:36px;">Thuộc tính style trong HTML</p>

Chú ý: Giữa các cặp giá trị của thuộc tính style được ngăn cách bởi dấu chấm phẩy (;).

Tham khảo thêm

Một số cặp giá trị của thuộc tính style thường dùng

Thuộc tính color

Thuộc tính color dùng để thiết lập màu cho chữ trong phần tử. Giá trị của thuộc tính color có thể khai báo theo:

Tên màu (red, green, blue,…)
Theo mã Hex (#FF0000, #00ff00, #0000ff,…)
Theo giá trị RGB (rgb(255,0,0), rgb(0,122,20),…)

Ví dụ

<p style="color:green">Thuộc tính color theo tên màu</p>
<p style="color:#012bff">Thuộc tính color theo mã Hex</p>
<p style="color:rgb(255,0,0)">Thuộc tính color theo giá trị RGB</p>

<p style="color:green">Thuộc tính color theo tên màu</p>

<p style="color:#012bff">Thuộc tính color theo mã Hex</p>

<p style="color:rgb(255,0,0)">Thuộc tính color theo giá trị RGB</p>

Thuộc tính background-color

Thuộc tính background-color dùng để thiết lập màu nền cho phần tử. Giá trị của thuộc tính background-color cũng được xác định theo tên màu, mã Hex và giá trị RGB giống như thuộc tính color.

Ví dụ

<p style="background-color:green">Thuộc tính background-color theo tên màu</p>
<p style="background-color:#012bff">Thuộc tính background-color theo mã Hex</p>
<p style="background-color:rgb(255,0,0)">Thuộc tính background-color theo giá trị RGB</p>

<p style="background-color:green">Thuộc tính background-color theo tên màu</p>

<p style="background-color:#012bff">Thuộc tính background-color theo mã Hex</p>

<p style="background-color:rgb(255,0,0)">Thuộc tính background-color theo giá trị RGB</p>

Thuộc tính font-size

Thuộc tính font-size dùng để thiết lập cỡ chữ cho phần tử. Giá trị của thuộc tính font-size được định theo các đơn vị như:

px (pixel)
pt (point. 1inch=72pt)
em (1em = 16px)
Ngoài ra, còn một số đơn vị đo khác

Ví dụ

<p style="font-size:16px">Cỡ chữ dùng đơn vị px</p>
<p style="font-size:1em">Cỡ chữ dùng đơn vị em</p>

1 2	<p style="font-size:16px">Cỡ chữ dùng đơn vị px</p> <p style="font-size:1em">Cỡ chữ dùng đơn vị em</p>

Thuộc tính font-family

Thuộc tính font-family dùng để khai báo định dạng font chữ cho phần tử. Giá trị của font-family có thể sử dụng một số kiểu chữ phổ biến như:

Times New Roman
Arial Black
Arial
Tahoma

Ví dụ

<p style="font-family:Times New Roman">Chữ dùng font Times New Roman</p>
<p style="font-family:Tahoma">Chữ dùng font Tahoma</p>
<p style="font-family:Arial">Chữ dùng font Arial</p>

<p style="font-family:Times New Roman">Chữ dùng font Times New Roman</p>

<p style="font-family:Tahoma">Chữ dùng font Tahoma</p>

<p style="font-family:Arial">Chữ dùng font Arial</p>

Thuộc tính text-align

Thuộc tính text-align dùng để căn lề cho nội dung trong phần tử. Giá trị của thuộc tính text-align thường dùng là:

Left (căn lề trái)
Center (căn giữa)
Right (căn lề phải)

Ví dụ

<div>
<img src="https://nguyenhungplus.com/wp-content/uploads/2016/03/logo.png">
</div>
<div style="text-align:center">
<img src="https://nguyenhungplus.com/wp-content/uploads/2016/03/logo.png">
</div>
<div style="text-align:right">
<img src="https://nguyenhungplus.com/wp-content/uploads/2016/03/logo.png">
</div>

<div>

</div>

</div>

</div>

Thuộc tính border

Thuộc tính border giúp tạo đường viền xung quanh phần tử. Giá trị của thuộc tính border có 3 tham số:

Tham số thứ nhất là độ dày của đường viền
Tham số thứ hai là kiểu đường viền (none, hidden, dotted, dashed, solid, double,groove, ridge, inset, outset,….)
Tham số thứ ba là màu của đường viền.

Ví dụ

<p style="border:1px dashed red">Tạo đường viền dày 1px</p>

1	<p style="border:1px dashed red">Tạo đường viền dày 1px</p>

Thuộc tính width, height

Thuộc tính width, height là thuộc tính giúp thiết lập chiều rộng và chiều cao cho phần tử. Xác định theo đơn vị px hoặc %

Ví dụ

<div style="border:1px solid blue;width:300px;height:200px">Rộng 300px và cao 200px</div>
<div style="border:1px solid blue;width:100%;height:150px">Rộng 100% và cao 150px</div>

1 2	<div style="border:1px solid blue;width:300px;height:200px">Rộng 300px và cao 200px</div> <div style="border:1px solid blue;width:100%;height:150px">Rộng 100% và cao 150px</div>

Lời kết

Trên đây là thông tin và cấu trúc của thuộc tính style trong HTML cùng với một số cặp giá trị thường dùng trong thuộc tính style mà mình muốn giới thiệu với các bạn. Hi vọng với chút kiến thức về thuộc tính style này sẽ giúp bạn định dạng được cho các thẻ trong HTML theo ý muốn.

Nếu thấy bài viết hay và có ý nghĩa hay like và share ủng hộ cho blog nhé. Nhớ theo dõi chuyên mục học HTML để học thêm nhiều thẻ khác trong HTML nhé. Chúc bạn thành công!

Bài 13: Thuộc tính STYLE trong HTML

5 1 vote