Bộ chọn(selector) là thành phần không thể thiếu trong website, về các loại selector thì hơi nhiều nên trong bài này chỉ là một số selector thông dụng và căn bản nhất.
Selector – Bộ chọn?
Selector là cách gọi để chỉ đến việc dùng để truy vấn(chọn) đến các thẻ HTML. Trong một file HTML thì có rất nhiều thẻ giống nhau để phân biệt được chúng ta có khái niệm các ID và Class. Selector chính là cách truy xuất các ID hoặc class này.
Các selector thông dụng:
Chúng ta cùng tìm hiểu 3 loại sau:
Selector cha con (phân cấp): là cách dùng các thẻ, class, id cha để tìm chọn các thẻ, class id con.
HTML:
[html]
<div>
<p>
Nội dung sẽ có màu đỏ
</p>
</div>
<p>
Nội dung không có màu đỏ
</p>
[/html]
CSS:
[css]
/*Với cách viết sau thì nội dung trong thẻ p thứ nhất có màu đỏ, nội dung thẻ p thứ 2 sẽ không có màu đỏ vì nó không nằm trong thẻ div*/
div p{
color: red;
}
[/css]
Vậy để phân cấp cha con ta dùng một khoảng trắng(phím space) ngăn cách thẻ đầu là cha, tiếp theo là thẻ con.
Cái trong ví dụ trên là có 2 cấp, giả sử nó có 3, 4, 5 cấp thì thế nào?
[css]
div p span{
color: red;
}
[/css]
Selector Class:
Với một class ta có thể sử dụng cho nhiều thẻ HTML, điều này khá tiện lợi cho CSS. Selector cho class sẽ là dấu chấm (.).
HTML:
[html]
<div class="red">
Nội dung sẽ có màu đỏ
</div>
<div>
Nội dung sẽ ko có màu đỏ
</div>
<div>
<p class="red">Nội dung sẽ có màu đỏ</p>
</div>
<div class="red">
Nội dung sẽ có màu đỏ
</div>
[/html]
CSS:
[css]
.red{
color: red
}
[/css]
Selector ID:
Với ID thì trong một trang web ID là duy nhất nhé, nếu có hai ID giống nhau trong 1 page thì không đúng chuẩn giao diện của W3C, cái này nó ngượi lại với class. Chúng ta sử dụng dấu thăng (#) để đại diện cho ID.
HTML:
[html]
<div id="header">
header
</div>
<div id="footer">
footer
</div>
[/html]
CSS:
[css]
#header{
color: red;
}
#footer{
color: yellow;
}
[/css]
cũng có thể viết thế này:
[css]
div#header{
color: red;
}
div#footer{
color: yellow;
}
[/css]
Chú ý:
- Với ID thì trong mỗi trang web nó là duy nhất nên thông thường chúng ta hay dùng nó ở những vị trí không có tính chất lặp đi lặp lại.
- Với Class thì ta có thể đặt nhiều vị trí khác nhau.
- Cả ID và Class đều phải tuân thủ theo quy tắc cha con.
[thongbao]
- Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
- Cảm ơn các bạn đã đọc.
[/thongbao]