Tìm hiểu thuộc tính id, thuộc tính class trong HTML - 13

Tìm hiểu thuộc tính id, thuộc tính class trong HTML – 13

– Trong ngôn ngữ HTML, thuộc tính id & thuộc tính class được sử dụng để đặt tên (phân loại) các phần tử, mục đích là để tiện cho việc quản lý, định dạng các phần tử sau này.

Ví dụ:

– Trang web của tôi có 100 phần tử, trong đó có 50 phần tử tôi muốn thiết lập chữ màu đỏ. Nếu dựa vào phương pháp thông thường thì chúng ta phải đến lần lượt 50 phần tử rồi thiết lập cho nó thuộc tính style với giá trị color:red

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Cách sử dụng thuộc tính class 01</p>
	<p style="color:red">Cách sử dụng thuộc tính class 02</p>
	<p>Cách sử dụng thuộc tính class 03</p>
	<p style="color:red">Cách sử dụng thuộc tính class 04</p>
	<p style="color:red">Cách sử dụng thuộc tính class 05</p>
	<p>Cách sử dụng thuộc tính class 06</p>
	<p>Cách sử dụng thuộc tính class 07</p>
	<p style="color:red">Cách sử dụng thuộc tính class 08</p>
	<p>Cách sử dụng thuộc tính class 09</p>
	<p style="color:red">Cách sử dụng thuộc tính class 10</p>
</body>
</html>

– Tuy nhiên, nếu sau này chúng ta muốn sửa lại thành một màu khác, chẳng lẽ chúng ta phải đi đến 50 phần tử đó để chỉnh lại !? Chưa kể đến ví dụ trên chỉ có 50 phần tử, còn trường hợp hàng trăm, hàng nghìn phần tử thì sao !?

– Từ đây, thuộc tính id & thuộc tính class được sử dụng để quản lý những trường hợp như thế này, chúng ta chỉ cần phân loại các phần tử một lần duy nhất. Sau đó, nếu muốn định dạng cho phần tử thì chỉ cần định dạng cho một phần tử, các phần tử còn lại sẽ được áp dụng theo.

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
	<style type="text/css">
		.hello{color:red;}
	</style>
</head>
<body>
	<p>Cách sử dụng thuộc tính class 01</p>
	<p class="hello">Cách sử dụng thuộc tính class 02</p>
	<p>Cách sử dụng thuộc tính class 03</p>
	<p class="hello">Cách sử dụng thuộc tính class 04</p>
	<p class="hello">Cách sử dụng thuộc tính class 05</p>
	<p>Cách sử dụng thuộc tính class 06</p>
	<p>Cách sử dụng thuộc tính class 07</p>
	<p class="hello">Cách sử dụng thuộc tính class 08</p>
	<p>Cách sử dụng thuộc tính class 09</p>
	<p class="hello">Cách sử dụng thuộc tính class 10</p>
</body>
</html>

1) Tìm hiểu “thuộc tính id” trong HTML

– Thuộc tính id dùng để đặt tên cho phần tử, tên này phải là duy nhất, không có trường hợp tên id của các phần tử bị trùng nhau (nếu so sánh một phần tử trong trang web giống như một người công dân Việt Nam thì tên id cũng giống như số CMND, nó dùng để xác định danh tính của phần tử)

– Để khai báo id cho một phần tử thì chúng ta đặt thuộc tính id vào bên trong thẻ mở của phần tử đó với cú pháp id=”tên id”. Sau khi đã khai báo, nếu muốn định dạng cho phần tử thì chúng ta chỉ cần gọi thẳng tên id của nó với cú pháp #tên id

Ví dụ:

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
	<style type="text/css">
		#step{color:red;}
	</style>
</head>
<body>
	<p>Chức năng của thuộc tính id</p>
	<p id="step">Cách sử dụng thuộc tính id</p>
	<p>Tầm quan trọng của thuộc tính id</p>
</body>
</html>

2) Tìm hiểu “thuộc tính class” trong HTML

– Thật ra thì chức năng của thuộc tính class cũng gần giống với thuộc tính id, đó chính là dùng để đặt tên cho phần tử. Tuy nhiên, việc đặt tên class khác với tên id ở chỗ là với cùng một tên class thì chúng ta có thể dùng để đặt cho nhiều phần tử khác nhau (nếu so sánh một phần tử trong trang web giống như một người công dân Việt Nam thì tên class cũng giống như một cái biệt danh, mà biệt danh thì có thể dùng để đặt cho nhiều người khác nhau)

– Để khai báo class cho một phần tử thì chúng ta đặt thuộc tính class vào bên trong thẻ mở của phần tử với cú pháp class=”tên class”. Sau khi đã khai báo class, nếu muốn định dạng cho phần tử thì chúng ta chỉ cần gọi thẳng tên class của nó với cú pháp .tên class

Ví dụ:

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
	<style type="text/css">
		.hello{color:red;}
	</style>
</head>
<body>
	<p>Chức năng của thuộc tính class</p>
	<p class="hello">Tầm quan trọng của thuộc tính class</p>
	<p>Cách sử dụng thuộc tính class</p>
	<p class="hello">Tìm hiểu cách đặt tên cho class</p>
	<p class="hello">Thuộc tính class là gì</p>
</body>
</html>

– Lưu ý: Một người có thể có nhiều cái biệt danh thì phần tử cũng tương tự như vậy, một phần tử có thể có nhiều tên class (nhớ thêm một dấu “khoảng trắng” nằm ngăn cách giữa các tên class)

Ví dụ:

– Phần tử <p> thứ nhất có 1 class là: nguyen

– Phần tử <p> thứ hai có 2 class là: nguyen, thanh

– Phần tử <p> thứ ba có 3 class là: nguyen, thanh, nhan

<!DOCTYPE html>
<html>
<head>
	<title>Xem Ví dụ</title>
	<meta charset="utf-8">
	<style type="text/css">
		.nguyen{color:blue;}
		.thanh{font-size:30px;}
		.nhan{background-color:yellow;}
	</style>
</head>
<body>
	<p class="nguyen">Tài liệu học Lập Trình Web 01</p>
	<p class="nguyen thanh">Tài liệu học Lập Trình Web 02</p>
	<p class="nguyen thanh nhan">Tài liệu học Lập Trình Web 03</p>
</body>
</html>

3) Quy tắc đặt tên id và tên class

– Quy tắc đặt tên id và tên class hoàn toàn giống nhau, chúng chỉ được phép chứa các ký tự như sau:

Các ký tự là chữ cái viết thường: [a . . z]
Các ký tự là chữ cái viết hoa: [A . . Z]
Các ký tự là chữ số: [0 . . 9]
Dấu gạch dưới: _
Dấu gạch nối: –

– Lưu ý: Tên id và tên class tuyệt đối không được chứa các ký tự đặc biệt (ví dụ như ! @ # $ % ^ &) và cũng không được bắt đầu bằng một ký tự là chữ số [0 . . 9]

– Dưới đây là một số ví dụ về việc đặt tên id và tên class:

ĐÚNG:

dsmart
Dsmart
_dsmart
dsmart-web
dsmart-web-11

SAI:

3dsmart (sai vì bắt đầu bằng chữ số)
3dsmart%^web (sai vì có chứa các ký tự đặc biệt)

– Lưu ý: Tên id và tên class có phân biệt chữ in hoa và chữ thường, ví dụ như dsmart và Dsmart là hai cái tên hoàn toàn khác nhau.

4) Điểm khác nhau giữa “thuộc tính id” & “thuộc tính class”

– Dưới đây là bảng tóm tắt một số điểm khác nhau giữa thuộc tính id & thuộc tính class.

Thuộc tính id:

Một phần tử chỉ nên nhận một id.
Một tên id chỉ có thể dùng để đặt cho một phần tử duy nhất.
Khi muốn chọn một phần tử dựa theo id thì ta dùng cú pháp #tên id

Thuộc tính class:

Một phần tử có thể nhận một hoặc nhiều class.
Một tên class có thể dùng để đặt cho nhiều phần tử khác nhau.
Khi muốn chọn một phần tử dựa theo class thì ta dùng cú pháp .tên class

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
	<style type="text/css">
		#hello{background-color:yellow;}
		.hello{font-size:40px;}
	</style>
</head>
<body>
	<p id="hello" class="hello">Xin chao</p>
</body>
</html>