Các loại Selectors cơ bản trong CSS

Tạo bởi Hoàng Vũ, chỉnh sửa cuối lúc 19 tháng 1, 2025

Selectors (bộ chọn) trong CSS là thành phần quan trọng, dùng để xác định các phần tử HTML mà bạn muốn áp dụng kiểu dáng. Trong bài học này, bạn sẽ tìm hiểu về các loại selectors cơ bản và cách sử dụng chúng để định dạng nội dung trang web.

Các loại Selectors cơ bản

1. Universal Selector (`*`)

Mô tả: Áp dụng kiểu dáng cho tất cả các phần tử HTML trên trang.
Cú pháp:
```
* {
  margin: 0;
  padding: 0;
}
```
Ví dụ thực tế: Dùng để xóa khoảng cách mặc định của các phần tử.

2. Element Selector

Mô tả: Áp dụng kiểu dáng cho tất cả các phần tử có cùng tên thẻ HTML.

Cú pháp:

p {
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  color: blue;
  text-align: center;
}

Ví dụ thực tế: Định dạng tiêu đề <h1> và đoạn văn <p>.

3. Class Selector (`.class`)

Mô tả: Áp dụng kiểu dáng cho các phần tử có cùng giá trị thuộc tính class.

Cú pháp:

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

Ví dụ thực tế:

<p class="highlight">Đoạn văn được làm nổi bật.</p>
<span class="highlight">Văn bản nổi bật trong đoạn.</span>

4. ID Selector (`#id`)

Mô tả: Áp dụng kiểu dáng cho một phần tử duy nhất có giá trị thuộc tính id.

Cú pháp:

#main-title {
  font-size: 24px;
  color: red;
}

Ví dụ thực tế:

<h1 id="main-title">Tiêu đề chính của trang</h1>

So sánh Class Selector và ID Selector

Đặc điểm	Class Selector (`.class`)	ID Selector (`#id`)
Áp dụng cho	Nhiều phần tử	Một phần tử duy nhất
Cú pháp	`.classname`	`#idname`
Ưu tiên khi xử lý xung đột	Thấp hơn ID Selector	Cao hơn Class Selector

Thực hành

1. Yêu cầu

Tạo một trang HTML với các phần tử sau:

Một tiêu đề <h1> chính.
Một danh sách các đoạn văn <p>, trong đó có đoạn văn được làm nổi bật với class.
Một phần tử được định danh bằng id.

2. Hướng dẫn

File HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Selectors trong CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="main-title">Tiêu đề chính</h1>
  <p>Đây là đoạn văn thứ nhất.</p>
  <p class="highlight">Đây là đoạn văn được làm nổi bật.</p>
  <p>Đây là đoạn văn thứ ba.</p>
</body>
</html>

File CSS (styles.css):

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

/* Element selector */
h1 {
  color: blue;
  text-align: center;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

/* Class selector */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

/* ID selector */
#main-title {
  font-size: 24px;
  color: red;
}

Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.

Xem thêm

↑ Back to Top

Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.

Liên hệ công việc qua email dưới đây.

lhvuctu@gmail.com

Chúng Tôi Trên

Bài viết nổi bật

Các loại Selectors cơ bản trong CSS