Lớp phần tử trong CSS
Trong các bài học trước, chúng ta đã chọn các phần tử trang theo tên thẻ, đặt kiểu, ví dụ, cho tất cả các đoạn văn cùng một lúc. Trên một trang, tuy nhiên, có thể có các loại đoạn văn khác nhau, và cần áp dụng các kiểu khác nhau cho chúng. Để giải quyết vấn đề này, có thể phân các đoạn văn khác nhau vào các lớp CSS khác nhau.
Để gán một thẻ cho một lớp nào đó, cần
viết thuộc tính class cho thẻ đó,
và trong đó - tên lớp do bạn tự đặt,
bao gồm chữ cái, số, ký tự gạch dưới
và dấu gạch ngang.
Hãy xem một ví dụ. Hãy tạo các đoạn văn
với hai loại lớp - eee và zzz:
<p class="eee">
đoạn văn với lớp eee
</p>
<p class="eee">
đoạn văn với lớp eee
</p>
<p class="zzz">
đoạn văn với lớp zzz
</p>
<p class="zzz">
đoạn văn với lớp zzz
</p>
Bây giờ hãy truy cập vào các đoạn văn trong CSS
với các lớp khác nhau và đặt cho chúng một số
kiểu. Ví dụ, hãy tô màu đỏ cho các đoạn văn có lớp
zzz, và các đoạn văn có lớp
eee - màu xanh lá cây.
Để làm điều này, trong tệp CSS cần truy cập vào
các lớp của chúng ta. Cú pháp truy cập như sau:
đầu tiên là ký tự dấu chấm, sau đó
là tên lớp do chúng ta tự đặt. Tức là để
truy cập vào lớp eee cần viết
.eee, và cho lớp zzz - viết
.zzz.
Vậy, hãy thực hiện điều đã mô tả. Hãy thêm vào HTML của chúng ta cả kiểu CSS cho các lớp chúng ta đã tạo:
.eee {
color: green;
}
.zzz {
color: red;
}
Nếu chạy mã của chúng ta, kết quả sẽ như sau:
Cho đoạn mã sau:
<ul>
<li class="odd">text</li>
<li class="eve">text</li>
<li class="odd">text</li>
<li class="eve">text</li>
<li class="odd">text</li>
<li class="eve">text</li>
</ul>
Hãy tô màu đỏ cho các phần tử có lớp
odd và màu xanh lá cây - các phần tử có
lớp eve.
Cho đoạn mã sau:
<h2 class="eee">Tiêu đề</h2>
<p class="eee">
đoạn văn
</p>
<p class="eee">
đoạn văn
</p>
<p>
đoạn văn không có lớp
</p>
<ul class="eee">
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Hãy tô màu đỏ cho tất cả các phần tử có lớp
eee.
Hãy giải thích, tại sao trong bài toán trước, các thẻ
li được tô màu đỏ,
mặc dù lớp,
đặt màu, được gán cho thẻ ul.
