CSS - Các bộ chọn: Cổng vào các trang web thời trang

Xin chào bạn, ngôi sao thiết kế web tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầy.exciting qua thế giới của các bộ chọn CSS. Với vai trò là người đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể告诉 bạn rằng việc thành thạo các bộ chọn giống như mở một kho báu của các khả năng thiết kế web. Hãy cùng nhau lặn xuống và làm cho các trang web của bạn shine!

CSS - Selectors

Các loại bộ chọn

Trước khi chúng ta bắt đầu cuộc phiêu lưu, hãy cùng nhanh chóng xem qua các loại bộ chọn khác nhau mà chúng ta sẽ khám phá:

Loại bộ chọn	Ví dụ	Mô tả
Universal	*	Chọn tất cả các phần tử
Element	p	Chọn tất cả các phần tử
Class	.classname	Chọn các phần tử có class="classname"
ID	#idname	Chọn phần tử có id="idname"
Attribute	[attribute]	Chọn các phần tử có thuộc tính xác định
Group	selector1, selector2	Chọn tất cả các phần tử khớp với bất kỳ bộ chọn nào
Pseudo-class	:hover	Chọn các phần tử ở trạng thái cụ thể
Pseudo-element	::first-line	Chọn một phần của phần tử
Descendant	div p	Chọn tất cả các phần tử bên trong các phần tử
Child	div > p	Chọn tất cả các phần tử nơi phần tử cha là
Adjacent Sibling	div + p	Chọn phần tử đầu tiên xuất hiện ngay sau
General Sibling	div ~ p	Chọn tất cả các phần tử là anh em của các phần tử

Bây giờ, hãy cùng khám phá chi tiết từng loại này!

CSS Universal Selector

Bộ chọn universal giống như chiếc dao đa năng của CSS - nó chọn tất cả! Nó được đại diện bởi một dấu sao (*).

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

Mã này đặt lại margin và padding cho tất cả các phần tử và đặt thuộc tính box-sizing. Nó thường được sử dụng ở đầu các tệp样式 để tạo ra một bảng sạch.

CSS Element Selector

Bộ chọn phần tử nhắm mục tiêu các phần tử HTML cụ thể. Chúng đơn giản nhưng mạnh mẽ.

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

h1 {
color: #333;
font-family: 'Arial', sans-serif;
}

Ở đây, chúng tôi đang định dạng tất cả các phần tử

để có kích thước chữ 16px và cao độ dòng 1.5. Chúng tôi cũng đặt màu đen và phông chữ Arial cho tất cả các phần tử

.

CSS Class Selector

Bộ chọn class rất linh hoạt. Chúng cho phép bạn áp dụng các样式 cho nhiều phần tử chia sẻ cùng một class.

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

.error-message {
color: red;
border: 1px solid red;
padding: 10px;
}

Trong ví dụ này, bất kỳ phần tử nào có class="highlight" sẽ có nền vàng và chữ đậm. Các phần tử có class="error-message" sẽ được hiển thị với màu đỏ, viền đỏ và một chút padding.

CSS ID Selector

Bộ chọn ID được sử dụng để định dạng một phần tử duy nhất, độc đáo. Chúng được előz bằng một dấu gạch ngang (#).

#header {
background-color: #f0f0f0;
padding: 20px;
}

#main-content {
max-width: 800px;
margin: 0 auto;
}

Mã này định dạng phần tử có id="header" và phần tử có id="main-content". Nhớ rằng IDs nên duy nhất trong một trang!

CSS Attribute Selector

Bộ chọn attribute nhắm mục tiêu các phần tử dựa trên thuộc tính hoặc giá trị thuộc tính của chúng.

[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}

[href^="https"] {
color: green;
}

[class*="btn"] {
cursor: pointer;
}

Ở đây, chúng tôi đang định dạng tất cả các phần tử có type="text", các liên kết bắt đầu bằng "https", và các phần tử có class chứa "btn".

CSS Group Selector

Bộ chọn nhóm cho phép bạn áp dụng các样式 cho nhiều bộ chọn. Chúng được分隔 bằng dấu phẩy.

h1, h2, h3 {
font-family: 'Georgia', serif;
color: #333;
}

.error, .warning {
font-weight: bold;
}

Mã này áp dụng cùng một phông chữ và màu cho h1, h2 và h3, và làm cho cả hai class .error và .warning đậm.

CSS Pseudo Class Selector

Bộ chọn pseudo-class nhắm mục tiêu các phần tử ở trạng thái cụ thể.

a:hover {
text-decoration: underline;
}

input:focus {
outline: 2px solid blue;
}

li:nth-child(odd) {
background-color: #f0f0f0;
}

Các样式 này gạch chân các liên kết khi rê chuột, thêm viền xanh khi phần tử nhập liệu được聚焦, và đặt nền màu xám nhạt cho mỗi phần tử li lẻ.

CSS Pseudo Element Selector

Bộ chọn pseudo-element cho phép bạn định dạng các phần cụ thể của một phần tử.

p::first-letter {
font-size: 2em;
font-weight: bold;
}

h1::before {
content: "? ";
}

div::selection {
background-color: yellow;
}

Mã này phóng to và đậm chữ cái đầu tiên của các đoạn văn, thêm biểu tượng ngón tay chỉ trước các phần tử h1, và đặt nền màu vàng cho văn bản được chọn trong các phần tử div.

CSS Descendant Selector

Bộ chọn con cháu nhắm mục tiêu các phần tử là con cháu của một phần tử khác.

article p {
line-height: 1.6;
}

.container .box {
border: 1px solid #ccc;
}

Ở đây, chúng tôi đang định dạng các đoạn văn bên trong các phần tử bài viết và các phần tử có class "box" nằm bên trong các phần tử có class "container".

CSS Child Selector

Bộ chọn con nhắm mục tiêu các con trực tiếp của một phần tử.

ul > li {
list-style-type: square;
}

div > p {
margin-bottom: 10px;
}

Mã này đặt样式 dấu li vuông cho các phần tử danh sách trực tiếp con của các phần tử không thứ tự, và thêm margin dưới cho các đoạn văn trực tiếp con của các phần tử div.

CSS Adjacent Sibling Selectors

Bộ chọn anh em liền kề nhắm mục tiêu các phần tử xuất hiện ngay sau một phần tử khác.

h1 + p {
font-size: 1.2em;
font-weight: bold;
}

.button + .button {
margin-left: 10px;
}

Ở đây, chúng tôi làm cho đoạn văn đầu tiên sau một phần tử h1 lớn hơn và đậm, và thêm margin trái cho các nút nằm ngay sau các nút khác.

CSS General Sibling Selector

Bộ chọn anh em chung nhắm mục tiêu các phần tử là anh em của một phần tử khác, ngay cả khi chúng không liền kề.

h1 ~ p {
color: #666;
}

.highlight ~ li {
font-style: italic;
}

Mã này thay đổi màu sắc của tất cả các đoạn văn là anh em của các phần tử h1, và in nghiêng các phần tử danh sách nằm sau các phần tử có class "highlight".

Nested Selectors In CSS

Bộ chọn嵌套 cho phép bạn viết CSS ngắn gọn và dễ đọc hơn bằng cách đặt các bộ chọn bên trong nhau.

.container {
max-width: 1200px;
margin: 0 auto;

.header {
background-color: #f0f0f0;
padding: 20px;

h1 {
color: #333;
}
}

.content {
padding: 20px;

p {
line-height: 1.6;
}
}
}

Cấu trúc này rõ ràng cho thấy mối quan hệ giữa các phần tử và làm cho CSS có tổ chức hơn.

Characteristics of CSS nesting Selectors

Tăng khả năng đọc: Đặt theo.reflects cấu trúc HTML.
Giảm lặp lại: Bạn không cần phải lặp lại các bộ chọn cha.
Dễ bảo trì: Thay đổi các bộ chọn cha tự động áp dụng cho các bộ chọn嵌套.
Giới hạn phạm vi: Các style tự nhiên được giới hạn trong ngữ cảnh cha.

Nhớ rằng, trong khi đặt theo có thể mạnh mẽ, đừng đặt quá sâu vì nó có thể làm cho CSS khó hiểu và bảo trì.

Và thế là bạn đã hoàn thành một chuyến du lịch nhanh qua các bộ chọn CSS, học trò thiết kế web ham học hỏi của tôi! Với các công cụ này trong tay, bạn đang trên đường tạo ra các trang web được thiết kế đẹp mắt. Nhớ rằng, thực hành làm nên完美, vì vậy đừng ngại thử nghiệm với các bộ chọn và sự kết hợp khác nhau. Chúc bạn may mắn trong việc mã hóa!

Credits: Image by storyset