Ngôn ngữ CSS - Selector CSS
Bộ chọn CSS (CSS Selector)
CSS Selector hay Bộ chọn CSS được sử dụng để chọn nội dung bạn muốn định dạng. Bộ chọn là một phần của bộ quy tắc của CSS. Bộ chọn CSS chọn các phần tử HTML theo id, class, type, thuộc tính…
Có một số loại bộ chọn khác nhau trong CSS như sau:
- Bộ chọn CSS phần tử
- Bộ chọn CSS id
- Bộ chọn CSS class
- Bộ chọn CSS toàn thể
- Bộ chọn CSS nhóm
1. Bộ chọn CSS phần tử
Bộ chọn CSS phần tử chọn phần tử HTML theo tên.
Ví dụ:
đoạn CSS dưới đây sẽ ảnh hưởng đến nội dung trong phần tử p.
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>Đây là một đoạn văn bản.</p>
<p id="para1">Đây cũng là đoạn văn bản!</p>
<p>And me!</p>
</body>
</html>
2. Bộ chọn CSS class
Bộ chọn class chọn các phần tử HTML với một thuộc tính class cụ thể.
Cách đặt tên id: bắt đầu tiền tố dấu chấm "." sau đó tên class
<html>
<head> <title>Ví dụ</title>
<style type="text/css">
.tp { color:FF0000 }
.tinh { color:0000FF }
</style>
</head>
<body>
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p>
<ul>
<li class="tp">Hà Nội</li>
<li class="tp">TP. Hồ Chí Minh</li>
<li class="tp">Đà Nẵng</li>
<li class="tinh">Thừa Thiên Huế</li>
<li class="tinh">Khánh Hòa</li>
<li class="tinh">Quãng Ninh</li>
<li class="tinh">Tiền Giang</li>
</ul>
</body>
</html>
Bộ chọn CSS class cho một phần tử cụ thể
Nếu bạn muốn chỉ định rằng chỉ có một phần tử HTML cụ thể bị ảnh hưởng thì bạn nên sử dụng tên phần tử với bộ chọn lớp.
Cũng ví dụ trên chúng ta chỉ định chỉ thẻ li chịu tác động css
<html>
<head> <title>Ví dụ</title>
<style type="text/css">
li.tp { color:FF0000 }
li.tinh { color:0000FF }
</style>
</head>
<body>
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p>
<ul>
<li class="tp">Hà Nội</li>
<li class="tp">TP. Hồ Chí Minh</li>
<li class="tp">Đà Nẵng</li>
<li class="tinh">Thừa Thiên Huế</li>
<li class="tinh">Khánh Hòa</li>
<li class="tinh">Quãng Ninh</li>
<li class="tinh">Tiền Giang</li>
</ul>
</body>
</html>
3. Bộ chọn CSS id
Bộ chọn id sẽ chọn thuộc tính id của một phần tử HTML . Một id luôn luôn là duy nhất trong trang vì vậy nó được chọn để chọn một phần tử độc nhất.
Cách đặt tên id: bắt đầu tiền tố dấu # sau đó tên id
Ví dụ :
<html>
<head> <title>Ví dụ</title>
<style type="text/css">
#hanoi { color:# 790000 }
#hcmc { color:#FF0000 }
#danang { color:#FF00FF }
.tinh { color:#0000FF }
</style>
</head>
<body>
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p>
<ul>
<li id="hanoi">Hà Nội</li>
<li id="hcmc">TP. Hồ Chí Minh</li>
<li id="danang">Đà Nẵng</li>
<li class="tinh">Thừa Thiên Huế</li>
<li class="tinh">Khánh Hòa</li>
<li class="tinh">Quãng Ninh</li>
<li class="tinh">Tiền Giang</li>
</ul>
</body>
</html>
4. Bộ chọn CSS toàn thể
Bộ chọn toàn thể được sử dụng làm ký tự đại diện. Nó chọn tất cả các phần tử trên các trang. Dấu sao (*) đại diện cho tất cả các phần tử.
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Đây là thẻ định dạng tiêu đề</h2>
<p>Thẻ này dùng định dạng đoạn văn bản.</p>
<p id="para1">Thẻ này dùng định dạng đoạn văn bản.</p>
<p>Thẻ này dùng định dạng đoạn văn bản.</p>
</body>
</html>
5. Bộ chọn CSS nhóm
Để dễ đọc hơn, bạn nên viết mỗi thuộc tính CSS ở một dòng. Tuy nhiên, nó sẽ làm tăng dung lượng lưu trữ CSS của bạn.
h1 { color:#0000FF; text-transform:uppercase }
h2 { color:#0000FF; text-transform:uppercase; }
h3 { color:#0000FF; text-transform:uppercase; }
Đối với một trang web có nhiều thành phần có cùng một số thuộc tính, chúng ta có thể thực hiện gom gọn lại như sau:
h1, h2, h3 { color:#0000FF; text-transform:uppercase; }
Hãy xem ví dụ đầy đủ về bộ chọn nhóm CSS.
<html>
<head>
<meta charset="UTF-8">
<style>
h1, h2, h3 { color:#0000FF; text-transform:uppercase; }
</style>
</head>
<body>
<h1>Welcome to HiepsiIt</h1>
<h2>Trang web hướng dẫn lập trình</h2>
<h3>Chúc các bạn thành công </h3>
</body>
</html>
