Thuộc tính class

Thuộc tính class thiết lập một hoặc nhiều lớp cho phần tử (phần tử ở đây được hiểu là thẻ).

Việc này được thực hiện để sau đó có thể tham chiếu thông qua CSS đến nhóm các phần tử có cùng một lớp được thiết lập, và áp dụng cho chúng những thuộc tính nhất định (ví dụ: thay đổi màu sắc văn bản, cỡ chữ và vân vân).

Cũng tồn tại thuộc tính id, mà tương tự như thuộc tính class cho phép chọn các phần tử trên trang HTML.

Sự khác biệt giữa thuộc tính class và thuộc tính id là class chọn một nhóm phần tử (ngay cả khi nó được đặt cho một phần tử - sau này có thể đặt nó cho phần tử khác), còn id chọn một phần tử duy nhất (không nên có phần tử nào khác có id như vậy trên trang web, nếu không sẽ xảy ra xung đột).

Làm sao để biết nên đặt cho phần tử - class hay id? Class được đặt cho những phần tử lặp lại trên các trang web (để không phải viết đi viết lại cùng một đoạn mã CSS nhiều lần). Ngay cả khi hiện tại phần tử này chỉ có một, nhưng bạn cảm thấy, rằng những phần tử tương tự có thể xuất hiện sau này - hãy đặt class cho phần tử đó. Nếu như bạn chắc chắn, rằng phần tử đó là duy nhất - thì hãy đặt id cho nó. Mặc dù hiện nay có xu hướng đặt class cho tất cả các phần tử, còn id để dành cho JavaScript, nhưng nó không phải là điều được chấp nhận rộng rãi.

Có thể thiết lập nhiều lớp cho một phần tử, trong trường hợp này chúng nên được liệt kê cách nhau bởi dấu cách.

Tên lớp nên được gõ bằng chữ cái tiếng Anh, chữ số, không có dấu cách (dấu cách phân tách các lớp với nhau, thay vào đó có thể sử dụng dấu gạch dưới hoặc dấu gạch ngang). Lớp không nên bắt đầu bằng chữ số (trong HTML5 đã có thể, nhưng sẽ không hoạt động trong các trình duyệt cũ).

Tên cho lớp nên được đặt bằng tiếng Anh (không phải tiếng Việt, chỉ đơn giản bằng chữ cái tiếng Anh!). Tên nên có ý nghĩa, phản ánh bản chất của lớp.

Ví dụ

Hãy đặt màu đỏ cho văn bản của tất cả các đoạn văn có lớp test:

<p class="test">Đoạn văn có lớp test.</p>
<p>Đoạn văn kiểm tra không có lớp.</p>

.test {
	color: red;
}

Ví dụ . Nhiều lớp cho một phần tử

Và ở đây hãy đặt nhiều lớp cho đoạn văn đầu tiên - test1 và test2 (ghi chúng cách nhau bởi dấu cách). Lớp test1 đặt màu đỏ cho văn bản, còn lớp test2 đặt cỡ chữ là 20px. Đoạn văn thứ hai chỉ được đặt lớp test1 (đoạn văn này sẽ thành màu đỏ), còn đoạn văn thứ ba - lớp test2 (đoạn văn này sẽ có cỡ chữ là 20px). Đoạn văn đầu tiên, có hai lớp, sẽ đồng thời có cả màu đỏ và cỡ chữ 20px:

<p class="test1 test2">Đoạn văn có hai lớp test1 và test2.</p>
<p class="test1">Đoạn văn có lớp test1.</p>
<p class="test2">Đoạn văn có lớp test2.</p>
<p>Đoạn văn kiểm tra không có lớp.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Xem thêm

thuộc tính id,
thiết lập định danh duy nhất cho các phần tử