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

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

1) 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ụ:

– Ta 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>

2) 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ư:
- color (màu chữ)
- font-size (kích cỡ chữ)
- font-family (kiểu phông chữ)
- . . . .
Value: Là giá trị mà các bạn muốn gán cho thuộc tính CSS, ví dụ như:
- Để định dạng chữ màu tím thì chúng ta phải gán cho thuộc tính color giá trị violet
- Để định dạng chữ màu đỏ thì chúng ta phải gán cho thuộc tính color giá trị red
- Để định dạng chữ màu nâu thì chúng ta phải gán cho thuộc tính color giá trị brown
- . . . .

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 world</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>