Trong HTML, thuộc tính style cho phép bạn áp dụng trực tiếp các quy tắc CSS vào từng phần tử mà không cần tạo tệp CSS riêng. Bằng cách sử dụng style, bạn có thể tùy chỉnh màu sắc, kích thước, font chữ, căn chỉnh và nhiều hiệu ứng khác ngay trong thẻ HTML. Ví dụ: <p style="color: red; font-size: 16px;">Đây là một đoạn văn bản màu đỏ.</p>. Mặc dù tiện lợi, nhưng việc lạm dụng style có thể khiến mã nguồn trở nên cồng kềnh, khó bảo trì. Vì vậy, nên ưu tiên sử dụng CSS riêng để tối ưu hóa hiệu suất và quản lý giao diện một cách chuyên nghiệp hơn. Hãy cùng Y2Graphic tìm hiểu nhé !
Chức năng của thuộc tính style
– Chức năng của thuộc tính style là dùng để thiết lập việc định dạng cho một phần tử HTML.
Ví dụ:
– Tôi thiết lập cho phần tử <p> có chữ màu đỏ, kích cỡ chữ 75 pixel, phông chữ cursive
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<p style="color:red;font-size:75px;font-family:cursive">Hello</p>
</body>
</html>Cách sử dụng thuộc tính style
– Để sử dụng thuộc tính style thì chúng ta đặt nó vào bên trong thẻ mở của phần tử mà mình muốn định dạng với cú pháp như sau:
style="property:value"– Trong đó:
| Property | – Là một thuộc tính CSS dùng để đại diện cho đặc điểm (kiểu dáng) mà bạn muốn định dạng cho phần tử, ví dụ như:
|
| Value | – Là giá trị mà các bạn muốn gán cho thuộc tính CSS, ví dụ như:
|
Ví dụ:
– Thiết lập chữ màu đỏ cho phần tử <h1>
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<h1 style="color:red">Hello</h1>
</body>
</html>– Lưu ý: Để thiết lập nhiều thuộc tính CSS cho một phần tử thì chúng ta đặt nhiều cặp property:value bên trong giá trị của thuộc tính style. Tuy nhiên, các bạn cần phải nhớ thêm một dấu chấm phẩy ngăn cách giữa các cặp property:value
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
<p style="font-family:cursive;font-size:55px;color:violet">Hello</p>
</body>
</html>
Chuyển sang tham khảo bộ tài liệu học CSS
Việc định dạng cho một phần tử chủ yếu là nhờ vào CSS, thuộc tính style chỉ là phương tiện trung gian để áp dụng CSS lên phần tử mà thôi. Sau bài học này, các bạn nên tham khảo song song ngôn ngữ HTML cùng với bộ tài liệu hướng dẫn học CSS để hiểu rõ hơn về cách thức định dạng cho phần tử.
