[Học CSS] Bài 05: Tìm hiểu về vùng chọn trong CSS

Trong bài này chúng ta sẽ cùng tìm hiểu xem vùng chọn là gì và có các kiểu vùng chọn nào trong CSS.

Vùng chọn là gì?

Trong CSS, vùng chọn là khu vực mà bạn muốn nó sẽ được áp dụng các định dạng được viết trong đoạn CSS.

Ví dụ: Bạn chọn viết CSS cho thẻ <H1> thì vùng chọn đó là thẻ <H1>, cứ đoạn văn nào là H1 thì nó sẽ được áp dụng các định dạng mà bạn viết cho nó.

Các kiểu vùng chọn

Hiện tại thì chúng ta sẽ tìm hiểu 03 kiểu vùng chọn như sau

Vùng chọn theo tên thẻ

Với kiểu vùng chọn này thì tất cả những thẻ nào có trong văn bản HTML được viết CSS thì sẽ được áp dụng các định dạng.

Ví dụ: trong một đoạn văn HTML có 03 cặp thẻ H2, ta viết CSS cho vùng chọn là <H2> với thuộc tính là font chữ 30px thì tất cả các cặp thẻ H2 sẽ được áp dụng font chữ là 30px.

Ví dụ minh họa:

Các bạn copy đoạn code trên và dán vào Codepen là sẽ hình dung được nhé, trong đó mình chỉ viết CSS cho cặp thẻ H2 (tiêu đề của đoạn văn) và tất cả những thẻ tiêu đề này được áp dụng những định dạng trong đoạn CSS với vùng chọn H2.

Vùng chọn theo ID

Vùng chọn theo ID (tên ID do chúng ta tự đặt). Thì khi viết CSS cho ID nào thì nó chỉ áp dụng cho ID đó thôi. Cấu trúc của ID mình nhắc lại là #Tên-ID

Để hình dung nó như thế nào thì bạn xem ví dụ dưới đây và copy vào Codepen để xem nó thực thi như thế nào nhé !

Qua ví dụ các bạn thấy rằng: Chỉ đoạn văn bản có chứa id noi-dung thì mới được áp dụng những định dạng CSS ở trên, còn lại thì nó bình thường, không có gì cả đúng không nào ? Chỉ thế thôi, các bạn làm đi làm lại ví dụ này sẽ hình dung tốt hơn nhé !

Vùng chọn theo Class (lớp)

Nếu như viết CSS cho ID thì nó chỉ áp dụng cho duy nhất ID đó thôi, vì trong một tài liệu HTML thì các ID hoàn toàn khác nhau, không có ID nào trùng với ID nào cả.

Còn Class (lớp) thì sao ? Class là lớp các đối tượng có chung thuộc tính. Vùng chọn dựa vào Class thì những phần tử nào có chứa đặc điểm chung thì nhóm nó vào một Class và viết CSS riêng cho chúng. Nói khó hiểu, thôi thì làm cái ví dụ như sau:

Đề bài: Tôi có một danh sách số chẵn và lẻ, giờ hãy viết CSS sao cho các số lẻ in màu đỏ. Đây là danh sách HTML ban đầu:

Bây giờ chúng ta sẽ nhóm các số chẵn vào một Class và các số lẻ vào Class khác

Sau khi nhóm xong, chúng ta sẽ bắt đầu viết CSS cho từng Class như sau:

Vùng chọn phân cấp

Vùng chọn phân cấp có nghĩa là việc chọn các phần tử định dạng nó nằm trong một phần tử mẹ, chỉ nằm trong đó thôi. Vì có thể nhiều phần tử khác có chung thuộc tính, cùng loại thẻ nhưng không muốn áp dụng CSS này cho tất cả chúng. Đồng thời đây cũng là kiểu chọn tối ưu, giảm số lượng ký tự so với sử dụng vùng chọn là Class.

Ví dụ ta có 02 menu là Menu A và Menu B cần viết CSS để điều chình màu sắc, font chữ cho nó sặc sỡ tí. Yêu cầu cho các menu con thuộc Menu A có màu xanh và các menu con thuộc Menu B có màu đỏ như sau:

Cái này có vẻ phức tạp hơn hẳn mấy kiểu đầu tiên đúng không nào ? tuy nhiên tính ứng dụng của nó là rất cao. Vì nếu chúng ta viết ra thành nhiều Class đơn lẻ thì sẽ rất mệt. Thay vì đó gán cho tổng thể nó một ID, tiếp theo là CSS cho các phần tử trong ID đó là Ok rồi.

Nội dung bài này khá nhiều đây, các bạn nhớ thực hành lại để hiểu và có thể vận dụng vào dự án của mình nhé !

Bài học trước đó và tiếp theo


- TÁC GIẢ BÀI VIẾT -

Hocban.vn

Farmer at Home Garden
Bài viết bạn vừa xem được thực hiện bởi biên tập viên của Hocban.vn - chúc các bạn online vui vẻ và góp nhặt được nhiều thông tin, tư liệu hữu ích. Trân trọng !

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )