Để tránh lặp lại mã, chúng tôi sử dụng nhiều lớp trong HTML và CSS. Với CSS, chúng ta cũng có thể định nghĩa và định kiểu cả hai lớp với nhau và sử dụng nhiều lớp trong một phần tử bằng cách gán cho chúng các id lớp khác nhau. Cách tiếp cận này có thể được thực hiện bằng cách sử dụng cú pháp được phân tách bằng dấu cách để thêm nhiều lớp vào một phần tử HTML.
Trong bài này, chúng ta sẽ học cách thêm nhiều lớp vào một phần tử.
Làm thế nào để sử dụng nhiều lớp trong CSS?
Để sử dụng hai hoặc nhiều lớp trong một phần tử, mỗi id lớp sẽ được phân tách bằng dấu cách.
Bạn phải làm theo cú pháp sau để sử dụng nhiều lớp trong một phần tử:
< lớp h1 = 'class_1 class_2 class_3' > giao ... h >
Trong một phần tử HTML duy nhất, bạn có thể bao gồm nhiều hơn một lớp bằng cách tách chúng bằng một khoảng trắng. Để thuận tiện cho bạn, đây là một ví dụ.
Ví dụ: Sử dụng nhiều lớp trong CSS
Trong ví dụ dưới đây, chúng tôi sẽ tạo:
- Một tiêu đề sử dụng thẻ
và gán tên lớp “ phần mở đầu ”.
- Tiếp theo, chúng tôi sẽ tạo một tiêu đề khác và gán nó cho hai lớp khác nhau: “ phần mở đầu ' và ' hàng ”. Các id lớp này được phân tách bằng dấu cách:
HTML
h1 >
< h1 lớp = 'dòng tiêu đề' >
Nhiều lớp học Trong Một phần tử
h1 >
Bây giờ, hãy chuyển sang tệp CSS và áp dụng một số thuộc tính CSS được liệt kê bên dưới:
- Đặt màu nền cho tiêu đề bằng cách sử dụng hàm rgb () là “ (69, 51, 151) ”.
- Đặt kiểu phông chữ “ in nghiêng ”Cho tiêu đề.
Trong lớp HTML, tiêu đề đầu tiên sử dụng tên lớp “ phần mở đầu ”. Vì vậy, kiểu được chỉ định trong lớp được chỉ định sẽ được triển khai trên tiêu đề đầu tiên:
.phần mở đầu {
background-color: rgb ( 69 , 51 , 151 ) ;
font-style: nghiêng
}
Cho ' hàng ”Lớp, chúng tôi có:
- Đặt màu của tiêu đề bằng cách sử dụng hàm rgb () là “ (255, 0, 0) ”.
- Áp dụng dòng trang trí văn bản là “ gạch chân ”.
Tiêu đề thứ hai sẽ sử dụng các kiểu của cả hai lớp: “ phần mở đầu ' và ' hàng ' lớp:
.hàng {màu sắc: rgb ( 255 , 0 , 0 ) ;
text-decoration-line: gạch chân;
}
Sau khi thực hiện, hãy kiểm tra kết quả:
Từ đầu ra, bạn có thể thấy rằng tiêu đề thứ hai sử dụng cả hai lớp CSS.
Sự kết luận
Để sử dụng nhiều lớp trên một phần tử, hãy sử dụng các id lớp khác nhau được phân tách bằng khoảng trắng. Sử dụng điều này, chúng ta có thể áp dụng các thuộc tính CSS khác nhau cùng một lúc. Nó cho phép chúng ta sử dụng lại lớp mà các phần tử tương tự tồn tại. Bài viết này giải thích cách sử dụng nhiều lớp trong một phần tử duy nhất và tạo kiểu cho nó cùng với một ví dụ.