Trong CSS, bộ chọn “class” giúp định dạng các phần tử có thuộc tính lớp cụ thể.
Để định dạng các phần tử với một lớp cụ thể, hãy viết ký tự dấu chấm (.), theo sau là tên của lớp.
Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi một lớp. Để làm điều này, hãy bắt đầu với tên phần tử, sau đó viết ký tự dấu chấm (.), Theo sau là tên của lớp (xem ví dụ 1 bên dưới).
Các phần tử HTML cũng có thể tham chiếu đến nhiều hơn một lớp (xem ví dụ 2 bên dưới)
Cú pháp CSS
.class {
style properties;
}
Version: CSS1
Ngoài ra chúng ta có thể viết CSS sử dụng cú pháp chọn theo thuộc tính:
[class~=class_name] { style properties }
Ví dụ
Ví dụ 1
Định dạng lại cho tất cả các phần tử <p> với class="tieu_de":
p.tieu_de {
background-color: yellow;
}
Để sử dụng định CSS này trong trang HTML, ta viết như sau:
<p class="tieu_de">Hướng dẫn sử dụng CSS</p>
Định dạng cho các phần tử <div> với class="tieu_de":
CSS:
div.tieu_de {
background-color: yellow;
}
HTML:
<div class="tieu_de">Đoạn văn bản này tham chiếu đến lớp tieu_de dành riêng cho thẻ div</div>
Khi định dạng như trên thì chỉ có phần tử <P> hoặc phần tử <DIV> ảnh hưởng. Nếu không có tagname phía trước dấu chấm (.) thì bất cứ phần tử nào tham chiếu đến lớp tieu_de cũng đều ảnh hưởng
CSS:
.tieu_de {
background-color: yellow;
}
HTML:
<div class="tieu_de">Đoạn văn bản này chịu ảnh hưởng của lớp tieu_de</div>
<p class="tieu_de">Đoạn văn bản này cũng chịu ảnh hưởng của lớp tieu_de</p>
<p>Đoạn văn bản bình thường</p>
Ví dụ 2
Phần tử <p> này sẽ được tạo kiểu định dạng theo class="center" VÀ class="large":
<p class="center large">Đoạn văn bản này tham chiếu đến hai lớp.</p>
