Làm cách nào để sử dụng một lớp trong CSS?

Bộ chọn lớp CSS so khớp các phần tử dựa trên nội dung thuộc tính của chúng

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All 
 elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All 
 elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

.class_name { style properties }

[class~=class_name] { style properties }

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

<p class="red">This paragraph has red text.p>
<p class="red yellow-bg">
  This paragraph has red text and a yellow background.
p>
<p class="red fancy">This paragraph has red text and "fancy" styling.p>
<p>This is just a regular paragraph.p>

Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu

Tìm thấy một vấn đề với trang này?

• Chỉnh sửa trên GitHub
• Nguồn trên GitHub
• Báo cáo sự cố với nội dung này trên GitHub
• Bạn muốn tự khắc phục sự cố?

Sửa đổi lần cuối. Ngày 29 tháng 9 năm 2022, bởi những người đóng góp MDN

Thuộc tính class thường được dùng để trỏ đến tên lớp trong biểu định kiểu. Nó cũng có thể được JavaScript sử dụng để truy cập và thao tác các phần tử với tên lớp cụ thể

Trong ví dụ sau, chúng ta có ba

các phần tử có thuộc tính class với giá trị là "city". Tất cả ba

các phần tử sẽ được tạo kiểu như nhau theo định nghĩa kiểu .city trong phần đầu

Ví dụ

London

London là thủ đô của nước Anh

Paris

Pari là thủ đô của nước Pháp

Tokyo

Tokyo là thủ đô của Nhật Bản

Trong ví dụ sau, chúng ta có hai phần tử với thuộc tính class có giá trị là "note". Cả hai phần tử sẽ được tạo kiểu như nhau theo định nghĩa kiểu

.class_name { style properties }

Ví dụ

Đây là một số quan trọng văn bản.

Mẹo. Thuộc tính class có thể được sử dụng trên bất kỳ phần tử HTML nào

Ghi chú. Tên lớp có phân biệt chữ hoa chữ thường

Mẹo. Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi

Cú pháp cho lớp

Để tạo một lớp học; . ) ký tự, theo sau là tên lớp. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}

Ví dụ

Tạo một lớp có tên là "thành phố"

London

London là thủ đô của nước Anh

Paris

Pari là thủ đô của nước Pháp

Tokyo

Tokyo là thủ đô của Nhật Bản

nhiều lớp

Các phần tử HTML có thể thuộc về nhiều lớp

Để định nghĩa nhiều lớp, hãy phân tách các tên lớp bằng dấu cách, e. g

Phần tử sẽ được tạo kiểu theo tất cả các lớp được chỉ định

Trong ví dụ sau, đầu tiên

phần tử thuộc về cả lớp .class_name { style properties } 4 và cả lớp class0 và sẽ nhận các kiểu CSS từ cả hai lớp.  Ví dụ

London

Paris

Tokyo

Các yếu tố khác nhau có thể chia sẻ cùng một lớp

Các phần tử HTML khác nhau có thể trỏ đến cùng một tên lớp

Trong ví dụ sau, cả hai

vàtrỏ đến lớp "thành phố" và sẽ chia sẻ cùng một phong cáchVí dụ

Paris

Pari là thủ đô của nước Pháp

Sử dụng Thuộc tính lớp trong JavaScript

Tên lớp cũng có thể được JavaScript sử dụng để thực hiện một số tác vụ nhất định cho các phần tử cụ thể

JavaScript có thể truy cập các phần tử có tên lớp cụ thể bằng phương thức class1

Ví dụ

Nhấp vào nút để ẩn tất cả các thành phần có tên lớp "thành phố"

Đừng lo lắng nếu bạn không hiểu mã trong ví dụ trên

Bạn sẽ tìm hiểu thêm về JavaScript trong chương JavaScript HTML của chúng tôi hoặc bạn có thể nghiên cứu Hướng dẫn JavaScript của chúng tôi

Làm cách nào để thêm lớp bằng CSS?

Làm cách nào để sử dụng lớp div trong CSS?

Cú pháp cho lớp trong CSS là gì?

Làm cách nào để nhập lớp CSS trong HTML?