Bộ chọn class CSS nhắm mục tiêu tất cả phần tử HTML có tên class khớp được gắn vào.
Cú pháp bộ chọn class:
.tên-class { tên-thuộc-tính: giá-trị; }Đây là phần tử HTML với cùng tên class làm giá trị thuộc tính:
<div class="tên-class"></div>Bộ chọn class CSS .tên-class gắn với phần tử <div> có thuộc tính tên-class. Nghĩa là bất kỳ thuộc tính định kiểu bạn thêm vào .tên-class trong bảng định kiểu CSS sẽ áp dụng cho div.
Dấu chấm (.) trước tên class là cú pháp CSS cụ thể. Khi bạn thêm tên class vào phần tử HTML làm thuộc tính class, bạn không dùng ..
Bây giờ hãy dùng những gì vừa học vào ví dụ thực tế.
Đây là phần tử HTML <button> với một số kiểu mặc định kế thừa từ User Agent Stylesheet của trình duyệt:
<button>Nút bấm</button>Giao diện mặc định:
Chán nhỉ?
Hãy ghi đè kiểu mặc định nút bấm bằng cách tạo class CSS gọi là .my-button và cho nó vài thuộc tính định kiểu:
.my-button { font-size: 18px; padding: 14px 24px; border-radius: 8px; border: none; background-color: #F7575C; color: white; }Và thêm vào phần tử nút bấm làm thuộc tính class:
<button class="my-button">Nút bấm</button>Kết quả:
Bạn vừa học những điều quan trọng nhất về dùng bộ chọn class CSS.
Cần biết:
- Class CSS có thể tái dùng trên bất kỳ phần tử HTML nào, khác với ID selector chỉ dùng một lần.
- Bạn có thể thêm nhiều class CSS khác nhau cho cùng phần tử
<div class="first-class second-class third-class". Điều này cho cách linh hoạt lắp ráp thiết kế phần tử với class tiện ích nhỏ, như thấy với framework Tailwind CSS.