Phần tử với nhiều lớp CSS
Có thể đồng thời thiết lập nhiều lớp CSS
cho một thẻ nào đó. Để làm điều này, trong thuộc tính
class cần liệt kê các lớp này
cách nhau bằng dấu cách.
Hãy xem xét ví dụ. Giả sử chúng ta có một số lớp CSS:
.error {
color: red;
}
.large {
font-size: 30px;
font-family: Arial;
}
Hãy thiết lập cho đoạn văn cả lớp thứ nhất và lớp thứ hai:
<p class="error large">
lorem ipsum
</p>
Giả sử bạn được cho các lớp sau:
.success {
color: green;
}
.error {
color: red;
}
.large {
font-size: 30px;
}
.small {
font-size: 20px;
}
Giả sử bạn cũng có 4 đoạn văn. Với
sự trợ giúp của các lớp đã trình bày, hãy làm sao để
đoạn văn thứ nhất có màu xanh lá và font chữ lớn,
đoạn văn thứ hai - màu đỏ và font chữ nhỏ,
đoạn văn thứ ba - màu đỏ và font chữ lớn,
còn đoạn thứ tư - màu xanh lá và font chữ nhỏ.
Hãy nghĩ ra và tạo 3 lớp nào đó.
Thiết lập cho một thẻ nào đó đồng thời
tất cả ba lớp do bạn nghĩ ra.