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

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:

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

• Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML
• Thẻ Table trong HTML – Thẻ tạo bảng trong HTML
• Thẻ IMG trong HTML – Thẻ chèn hình ảnh trong HTML

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ụ

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ụ

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ụ

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ụ

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ụ

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ụ

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ụ

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!