Khi dùng CSS tạo kiểu cho trang web, bạn thường muốn nhắm đến phần tử cụ thể. Một cách chọn một hoặc nhiều phần tử là qua thuộc tính ID và/hoặc Class.
Khi xem hướng dẫn này, hãy xem Codepen tương tác và cùng thực hành!
Thuộc tính ID và Bộ chọn CSS
Hãy tạo đoạn văn đơn giản, dùng thẻ <p>:
<p> Tô màu đoạn văn này! </p>
ID là định danh duy nhất (unique identifier) bạn thêm cho bất kỳ phần tử đơn lẻ nào để nhận diện nó duy nhất. Nó tuân theo quy ước id="#TÊN".
Với ý đó, và vì chúng ta muốn tô màu đoạn văn, hãy đặt tên duy nhất cho nó.
<p id="paragraph-colored"> Tô màu đoạn văn này! </p>
Bây giờ có ID định danh duy nhất, chúng ta cần đảm bảo không thêm cùng ID cho phần tử khác. Trình duyệt sẽ không phàn nàn, nhưng sẽ mất mục đích và CSS sẽ không hoạt động như ý.
Với ID đã sẵn sàng, chúng ta có thể chọn nó dùng ký hiệu thăng # với CSS. Hãy làm cho thẻ p màu tím:
#paragraph-colored { color: purple; }
Dễ dàng phải không? 😊
Thuộc tính Class và Bộ chọn CSS của nó
Tuyệt, chúng ta có đoạn văn màu tím. Giả sử bây giờ chúng ta có một đống hình ảnh bơ (avocado) dưới thẻ p đơn lẻ:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="bơ"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="bơ"> <img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="bơ">
Làm sao nhận diện và chọn tất cả các lập trình viên bơ (avocado-devs)? Chúng ta biết không dùng thẻ ID, vì ID dùng nhận diện duy nhất mục đơn lẻ. Đây là lúc thuộc tính class phát huy tác dụng.
Thuộc tính class tuân theo quy ước class="#TÊN_CLASS". Vì nhiều thành viên có thể thuộc một lớp, tất cả lập trình viên bơ có thể gán class như:
<img src="https://avatars1.githubusercontent.com/u/43709642?s=280&v=4" alt="bơ" class="avocado-devs">
Tuyệt! Hình ảnh bơ đã được gán class "avocado-devs". Chúng ta có thể dùng bộ chọn lớp CSS biểu thị bằng dấu chấm đơn giản (.). Hãy thêm thuộc tính CSS filter cho bơ devs. Giả sử họ làm việc khuya nên đảo ngược màu 100%.
.avocado-devs { filter: invert(100) }
Với class, chúng ta cơ bản tạo nhóm và dùng bộ chọn class CSS áp dụng kiểu dáng như muốn cho nhóm phần tử.
Sử dụng Bộ chọn thẻ chung với Bộ chọn Class
Chúng ta thường thấy khi chọn class với CSS, tốt hơn dùng bộ chọn thẻ chung (generic tag selectors) kết hợp với bộ chọn dấu chấm. Tại sao? Vì càng cụ thể (specific) với bộ chọn, CSS áp dụng tốt hơn.
Với CSS, dùng bộ chọn thẻ chung bằng cách tham chiếu tên thẻ. Ví dụ đây là bộ chọn thẻ hợp lệ:
/* H1 */ h1{} /* Đoạn văn */ p{ }
Vì vậy, chúng ta có thể refactor bộ chọn hình ảnh bằng cách thêm thẻ chung img:
img.avocado-devs { filter: invert(100) }
Chức năng không thay đổi, nhưng khi mã phát triển, tính cụ thể này quan trọng. Nó cũng làm mã dễ đọc hơn. Lập trình viên khác sẽ thấy class avocado-devs tham chiếu đến hình ảnh.
Điều này quan trọng vì ở đây chúng ta chỉ áp dụng filter cho hình ảnh có tên class cụ thể. Nếu thêm hình ảnh bơ dev khác không có class thích hợp, kiểu sẽ không áp dụng. Là lập trình viên web, hành vi có điều kiện này thường là thứ chúng ta muốn.