[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ẻ

Trong HTML nó sẽ có những thẻ được đặt tên sẵn, ví dụ như: thẻ <body>, <h1>, <H2>,.. còn lại là những ID, Class mà chúng ta tự đặt tên cho nó, Vd: #menu-chinh, #menu-top,…

Với kiểu vùng chọn là thẻ được đặt tên sẵn trong HTML các bạn có thể tham khảo ví dụ sau để hình dung nhé !

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). 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ẹ, tức là CSS chỉ áp dụng cho phần tử con, còn phần tử mẹ thì không. Khi tạo danh sách chẳng hạn, thì 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

Mời bạn oánh giá 😇
- TÁC GIẢ BÀI VIẾT -

Hocban.vn

Tác giả tại Tịnh Nguyễn Blog
Bài viết bạn vừa xem được thực hiện bởi Tịnh Nguyễn, một thanh niên nông thôn, đam mê xe đạp và các máy móc nông cụ. Ngoài ra có thêm sở thích vọc vạch về máy tính và Internet, hiện tại là admin của Hocban.vn. Đây là các bài viết của anh ấy !
Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

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

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