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:
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Tiêu đề webiste</title>
<style type="text/css">
h2 {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<H1> Tiêu đề Bài Viết</H1>
<H2> Tiêu đề đoạn thứ nhất</H2>
<p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus
facilisis felis massa, at bibendum lorem fringilla ut. Sed
ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
</p>
.
<H2> Tiêu đề đoạn thứ hai</H2>
<p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus
facilisis felis massa, at bibendum lorem fringilla ut. Sed
ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
</p>
.
<H2> Tiêu đề đoạn thứ ba</H2>
<p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus
facilisis felis massa, at bibendum lorem fringilla ut. Sed
ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
</p>
.
</body>
</html>
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é !
<html>
<head>
<title>Tiêu đề của trang web </title>
<meta charset="UTF-8" />
</head>
<style type="text/css">
#noi-dung {
color: red;
font-family: Arial;
font-size: 24px;
}
</style>
</head>
<body>
<h1> Tên tiêu đề bài viết </h1>
<p> Nội dung không có chứa ID </p>
<p> Nội dung không có chứa ID </p>
<p id="noi-dung" > Nội dung có ID </p>
<p> Nội dung không có chứa ID </p>
<p> Nội dung không có chứa ID </p>
</body>
</html>
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:
<h1>Danh sách số chẵn và lẻ </h1> <ul> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> <li>55555555</li> </ul>
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
<h1> Đây là danh sách các số chẵn lẻ </H1>
<ul>
<li class="so-le">111111111111 </li>
<li class="so-chan">2222222222 </li>
<li class="so-le">33333333333</li>
<li class="so-chan">44444444444 </li>
<li class="so-le">55555555555 </li>
</ul>
Sau khi nhóm xong, chúng ta sẽ bắt đầu viết CSS cho từng Class như sau:
<head>
<meta charset="utf-8" />
<title>Tiêu đề webiste</title>
<style type="text/css">
.so-chan {
color: red;
font-size: 28px;
}
.so-le{
font-size: 32px;
color: blue;
}
</style>
</head>
<h1> Đây là danh sách các số chẵn lẻ </H1>
<ul>
<li class="so-le">111111111111 </li>
<li class="so-chan">2222222222 </li>
<li class="so-le">33333333333</li>
<li class="so-chan">44444444444 </li>
<li class="so-le">55555555555 </li>
</ul>
</body>
</html>
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:
<head>
<meta charset="utf-8" />
<title>Tiêu đề webiste</title>
<style type="text/css">
#menu-a li {
font-size: 18px;
color: red;
}
#menu-b li {
font-size: 18px;
color: blue;
}
</style>
</head>
<h1> Menu A </h1>
<ul id="menu-a">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
<h1> Menu B</h1>
<ul id="menu-b">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</body>
</html>
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
![[Học CSS] Bài 16: Sử dụng Pseudo Class trong CSS](https://hocban.vn/wp-content/uploads/2017/05/Bai-16-Pseudo-Class-trong-CSS-scaled-211x150.jpg "[Học Css] Bài 16: Sử Dụng Pseudo Class Trong Css")
![[Học CSS] Bài 01: Giới thiệu serie Học CSS Cơ Bản](https://hocban.vn/wp-content/uploads/2017/05/Hoc-CSS-211x150.jpg "[Học Css] Bài 01: Giới Thiệu Serie Học Css Cơ Bản")
![[Học CSS] Bài 14: Tìm hiểu về Box Model trong CSS](https://hocban.vn/wp-content/uploads/2017/03/Hinh-dung-ve-CSS-Box-Model-211x150.png "[Học Css] Bài 14: Tìm Hiểu Về Box Model Trong Css")
