Hướng dẫn body class html - html lớp cơ thể

- 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.

- 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

	
	


	
Cách sử dụng thuộc tính class 01
	
Cách sử dụng thuộc tính class 02
	
Cách sử dụng thuộc tính class 03
	
Cách sử dụng thuộc tính class 04
	
Cách sử dụng thuộc tính class 05
	
Cách sử dụng thuộc tính class 06
	
Cách sử dụng thuộc tính class 07
	
Cách sử dụng thuộc tính class 08
	
Cách sử dụng thuộc tính class 09
	
Cách sử dụng thuộc tính class 10

- 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.

	
	
	


	
Cách sử dụng thuộc tính class 01
	
Cách sử dụng thuộc tính class 02
	
Cách sử dụng thuộc tính class 03
	
Cách sử dụng thuộc tính class 04
	
Cách sử dụng thuộc tính class 05
	
Cách sử dụng thuộc tính class 06
	
Cách sử dụng thuộc tính class 07
	
Cách sử dụng thuộc tính class 08
	
Cách sử dụng thuộc tính class 09
	
Cách sử dụng thuộc tính class 10

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

	
	
	


	
Chức năng của thuộc tính id
	
Cách sử dụng thuộc tính id
	
Tầm quan trọng của thuộc tính id

Xem ví dụ

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

	
	
	


	
Chức năng của thuộc tính class
	
Tầm quan trọng của thuộc tính class
	
Cách sử dụng thuộc tính class
	
Tìm hiểu cách đặt tên cho class
	
Thuộc tính class là gì

Xem ví dụ

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

- 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)

	
	
	


	
Tài liệu học Lập Trình Web 01
	
Tài liệu học Lập Trình Web 02
	
Tài liệu học Lập Trình Web 03

Xem ví dụ

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
• - 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)
• - Phần tử thứ nhất có 1 class là: nguyen
• - Phần tử thứ hai có 2 class là: nguyen, thanh
• - Phần tử thứ ba có 3 class là: nguyen, thanh, nhan

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:

webCobAn webcoban và webCoban là hai cái tên hoàn toàn khác nhau.

we9co3an

_webc_oban

- Một phần tử chỉ nên nhận một id.

	
	
	


	
Tài liệu học Lập Trình Web

Xem ví dụ