Các bộ chọn cơ bản trong CSS

1. Bộ chọn theo loại (Type Selectors)

Bộ chọn trong CSS cho phép lựa chọn các phần tử HTML và áp dụng style cho chúng. Việc biết các bộ chọn cơ bản giúp chọn các phần tử trên trang một cách hiệu quả và chính xác, làm cho CSS trở thành một công cụ mạnh mẽ để định dạng nội dung web. Trong bài viết này, chúng ta sẽ tìm hiểu các loại bộ chọn cơ bản: bộ chọn theo loại (Type Selectors), bộ chọn theo class, bộ chọn theo id, bộ chọn nhóm và bộ chọn toàn cục.

Bộ chọn theo loại lựa chọn tất cả các phần tử của một thẻ cụ thể. Ví dụ, nếu chúng ta cần áp dụng style cho tất cả các đoạn văn trên trang, chúng ta sẽ sử dụng bộ chọn theo loại với thẻ <p>.

p {
  color: blue;
  font-size: 16px;
}

<p>Đoạn văn này sẽ có màu xanh và kích thước 16px.</p>
<p>Đoạn văn thứ hai với cùng style.</p>

Bộ chọn theo loại hữu ích khi cần áp dụng style cho tất cả các phần tử thuộc một loại cụ thể, chẳng hạn như tất cả các tiêu đề hoặc đoạn văn. Nó cung cấp khả năng điều khiển chung về giao diện của một nhóm phần tử và giúp dễ dàng quản lý trang web.

2. Bộ chọn theo lớp (Class Selectors)

Bộ chọn theo lớp cho phép lựa chọn các phần tử với giá trị thuộc tính class cụ thể. Lớp được chỉ định bằng dấu chấm (.) trước tên của lớp. Một lớp có thể được sử dụng cho nhiều phần tử, cho phép áp dụng các style giống nhau cho nhiều phần tử.

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">Đoạn văn này được tô đậm với màu xanh trên nền vàng.</p>
<p>Đoạn văn bình thường không có lớp.</p>
<div class="highlight">Khối này cũng sẽ được áp dụng style của lớp highlight.</div>

Bộ chọn theo lớp rất linh hoạt và tiện lợi vì nó cho phép tạo style có thể áp dụng cho các phần tử khác nhau. Lớp đặc biệt hữu ích khi cần định dạng một nhóm các phần tử không liên quan.

3. Bộ chọn theo id (ID Selectors)

Bộ chọn theo id lựa chọn các phần tử với giá trị thuộc tính id cụ thể. Id được chỉ định bằng ký tự # trước tên của id. Khác với lớp, id phải là duy nhất trên trang, điều này làm cho nó trở thành lựa chọn lý tưởng để định dạng các phần tử duy nhất, chẳng hạn như tiêu đề hoặc thanh điều hướng.

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">Tiêu đề trang</h1>
<p>Đoạn văn này sẽ không bị ảnh hưởng bởi bộ chọn theo id.</p>

Bộ chọn theo id chỉ áp dụng style cho một phần tử trên trang, do đó thường được sử dụng để định dạng các phần tử duy nhất bằng các style đặc biệt.

4. Bộ chọn nhóm (Group Selectors)

Bộ chọn nhóm cho phép áp dụng các style giống nhau cho nhiều phần tử. Điều này được thực hiện bằng cách sử dụng dấu phẩy, kết hợp nhiều bộ chọn thành một quy tắc CSS. Bộ chọn nhóm giúp làm gọn mã, vì nó cho phép đặt các style chung cho nhiều loại phần tử.

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

<h1>Tiêu đề cấp một</h1>
<h2>Tiêu đề cấp hai</h2>
<h3>Tiêu đề cấp ba</h3>
<p>Đoạn văn này sẽ không bị ảnh hưởng bởi bộ chọn nhóm.</p>

Bộ chọn nhóm giúp giảm mã CSS và làm đơn giản hóa việc định dạng, đặc biệt khi cần áp dụng các thuộc tính giống nhau cho các phần tử khác nhau, chẳng hạn như các tiêu đề ở các cấp độ khác nhau.

5. Bộ chọn toàn cục (Universal Selectors)

Bộ chọn toàn cục được ký hiệu bằng dấu sao (*) và lựa chọn tất cả các phần tử trên trang. Đây là một công cụ mạnh mẽ, cho phép nhanh chóng đặt các style cơ bản cho tất cả các phần tử, chẳng hạn như đặt cùng một khoảng cách hoặc thiết lập phông chữ tiêu chuẩn. Bộ chọn toàn cục hữu ích trong việc reset style, khi cần xóa các khoảng cách và lề mặc định của trình duyệt để kiểm soát chặt chẽ hơn các style.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>Tiêu đề</h1>
<p>Đoạn văn với khoảng cách và lề bằng 0.</p>
<div>Container với khoảng cách và lề bằng 0.</div>

Trong ví dụ này, bộ chọn toàn cục xóa các khoảng cách và lề cho tất cả các phần tử, điều này giúp đảm bảo tính đồng bộ của style trên trang. Cách làm này thường được sử dụng ở đầu mã CSS để tạo ra phong cách nhất quán.