Trong khi code CSS, bộ chọn (selector) là cái được viết ra đầu tiên. Nó là đối tượng mà chúng ta muốn tác động, tiếp theo mới viết các khai báo, trong khai báo có thuộc tính và giá trị (xem thêm
cú pháp của CSS).
Đễ cho dễ tưởng tượng hơn, giả dụ bạn là thợ sơn chuyên nghiệp, khách hàng alo cho bạn, anh ta muốn sơn ngôi nhà có màu xanh, và các viền cửa màu nâu. OK, chuyện đó chẳng khó gì với bạn, thế nhưng nếu khách hàng không cho biết địa chỉ cụ thể của ngôi nhà thì bạn biết sơn vào đâu? Địa chỉ ngôi nhà có thể nói là selector. Dưới đây là các dòng code thực tế. Thí dụ:
#menu {
font-size: 18px;
background-color: lime;
}
Cái
#menu chính là
bộ chọn.
Nếu không nắm rõ về selector, bạn sẽ gặp khó khăn trong việc CSS, rất có thể bạn sẽ lạm dụng id và class, các đoạn mã bị rối loạn, chồng chéo và thiếu kiểm soát.
Câu hỏi đầu tiên, CSS có những bộ chọn nào?
1. Chọn tất cả các thành phần HTML
Sử dụng dấu * để chọn tất cả các thành phần của HTML, ví dụ:
* {
margin: 0;
padding: 0;
}
2. Chọn tất cả thành phần có cùng tên class
Sử dụng dấu chấm (.) theo sau đó là tên class để làm bộ chọn, thí dụ ta có mã đánh dấu HTML như sau:
<h2 class="tieude">Blog Mạng Lưới Toàn Cầu</h2>
Để tác động vào các thẻ có class là tieude, trong CSS viết:
.tieude {
color: red;
}
Lưu ý: tất cả các class có cùng tên đều bị tác động bởi câu lệnh trên.
3. Chọn thành phần có tên id
Với id, sử dụng dấu # để bắt đầu bộ chọn, sau đấy là tên của íd, ví dụ đầu bài về menu chính là minh họa về cách sử dụng id làm selector.
}
4. Chọn tất cả các thẻ cùng loại
Thí dụ tôi muốn văn bản có font là arial thì viết như này:
p {
font-family: Arial Helvetica sans-serif;
}
Khi ấy, bất kỳ văn bản nào trong trang web đều được
quy định font là Arial...Tương tự, câu lệnh:
h2 {
margin-left: 10px;
padding: 5px;
}
Làm tất các các thẻ h2 có
lề về bên trái là 10px và khoảng đệm là 5 px.
5. Chọn nhiều thẻ khác nhau cùng một lúc
Giả dụ nếu bạn muốn cả thẻ h2, h3 và thẻ p cùng có lề trên là 10px thì viết như sau:
h2, h3, p {
margin-top: 10px;
}
Lưu ý:
- Các thẻ ngăn nhau bằng dấu phẩy
- Không giới hạn số thẻ
Tác dụng lớn nhất của selector này là nó giúp chúng ta đỡ phải viết code lặp đi lặp lại.
6. Chọn thành phần nằm trong một thành phần khác
Câu lệnh:
div h3 {
font-weight: normal;
}
Dòng code trên sẽ làm tất cả các thẻ h3 nằm trong div đều chịu ảnh hưởng của lệnh, dù là thẻ con, cháu, chắt...của div
7. Chọn chính xác thành phần phải là con của một thành phần khác
Câu lệnh:
#right>h2{
font-size: 12px;
color: blue;
}
Selector trên sẽ chọn tất cả các thẻ h2 là con của id có tên là right. Có bạn sẽ hỏi: câu lệnh này với câu lệnh chọn thành phần nằm trong một thành phần khác có gì khác nhau?
Sự khác nhau nằm ở độ sâu của tác động. Một cái tác động rất sâu và rộng vào mọi thành phần con và cháu, còn một cái chỉ tác động vào các thẻ nào là con mà thôi.
8. Chọn các lớp giả
Các lớp giả bao gồm :link, :hover, :visited, :active, :focus,
:first-letter, :first-line,
:first-child,
:before,
:after, :lang (mã ngôn ngữ) - nổi tiếng nhất trong nhóm này là hover. Ví dụ:
a:hover {
color: gray;
}
Câu lệnh này làm cho người dùng khi di chuột qua liên kết thì link đổi sang màu xám. Đọc thêm bài
CSS cho thẻ a để biết chi tiết hơn cách tạo style cho liên kết.
9. Chọn dựa vào thuộc tính của thẻ
Bạn chọn thẻ muốn tác động dựa vào thuộc tính của nó, thí dụ đoạn code sau:
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank]
{
background-color:lime;
}
</style>
</head>
<body>
<a href="http://vi.wikipedia.org">vi.wikipedia.org</a>
<a href="www.mangluoitoancau.com" target="_blank">www.mangluoitoancau.com</a>
<a href="http://vnexpress.net">vnexpress.net</a>
</body>
</html>
Có 3 thẻ a trong body, nhưng bằng cách sử dụng thuộc tính để tác động, làm cho chỉ thẻ a ở giữa có màu nền là lime, 2 thẻ a còn lại không bị ảnh hưởng gì.
