Lập trình chung
1731
08/12/2023
CSS Selector là gì? Tất cả những gì bạn cần biết về CSS Selectors
Là một lập trình viên Front-end, bạn nhất định không thể không trang bị kiến thức về CSS Selector. Vậy CSS Selectors là gì? Cùng ICANTECH tìm hiểu trong bài viết dưới đây nhé!
1. CSS Selector là gì?
CSS Selectors hay còn gọi là bộ chọn CSS là phần đầu tiên của Quy tắc CSS. Đó là một mẫu gồm các phần tử và các thuật ngữ khác cho trình duyệt, việc nên chọn phần tử HTML nào để áp dụng các giá trị thuộc tính CSS bên trong quy tắc cho chúng. Phần tử hoặc các phần tử được chọn bởi bộ chọn được gọi là chủ đề của bộ chọn.
Các phần tử được bộ chọn CSS nhắm mục tiêu được gọi là "chủ đề của bộ chọn". Một chủ đề có thể được chọn dựa trên loại thành phần, lớp, tên ID, thuộc tính đã cho hoặc pseudo-state. Với rất nhiều loại CSS khác nhau có sẵn, chúng ta không chỉ có thể tùy chỉnh trang web của mình nhanh hơn mà còn có thể duy trì chi tiết kiểm soát code của bạn.
2. Cách sử dụng Selectors trong CSS
Có hai cách chính để sử dụng bộ chọn trong CSS. Nếu có HTML là CSS trong một tài liệu thì chỉ cần thêm bộ chọn CSS vào phần <head> của trang web.
Tuy nhiên, bạn cũng có thể giữ HTML và CSS trong các tài liệu riêng biệt. Trong trường hợp đó, cần có một tài liệu HTML có nhãn index.html và một tệp CSS có nhãn style.css. Tệp index.html phải bao gồm một dòng mã tham chiếu tệp CSS để các định dạng phần tử này được hiển thị trên trang web.
Ví dụ: Tệp HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Selectors</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>What are CSS selectors & How Do They Work?</h1>
</body>
</html>
Hãy để ý dòng <link rel="stylesheet" href="style.css">? Đó là tham chiếu đến tệp CSS. Tệp đó sẽ chỉ bao gồm các khối chọn và các CSS tùy chỉnh khác.
2.1. Một số CSS Selectors
Dưới đây là 4 loại bộ chọn CSS phổ biến:
2.1.1 Universal Selector - Bộ chọn chung
Dấu hoa thị (*) là Universal Selector trong CSS. Thông thường, bộ chọn chung này thường chọn tất cả các thành phần trong tài liệu. Tuy nhiên, bạn có thể kết hợp với không gian tên. @namespace là một quy tắc hữu ích trong các tài liệu có nhiều không gian tên, chẳng hạn như HTML5, SVG nội tuyến, MathML và/hoặc XML. Có thể sử dụng một không gian tên đã xác định để hạn chế bộ chọn phổ quát chỉ ở các thành phần trong không gian tên đó.
a. Universal Selector Syntax - Cú pháp bộ chọn chung
Universal Selector có thể viết như sau:
* hoặc *|* { thuộc tính kiểu } - khớp với tất cả các phần tử|* { thuộc tính kiểu } - khớp với tất cả các thành phần trong không gian tên ns
|* { thuộc tính kiểu } - khớp với tất cả các phần tử mà không có bất kỳ không gian tên được xác định nào
b. Ví dụ về Universal Selector
Giả sử để mọi phần tử trên trang có màu cam, thì ta có thể sử dụng Universal Selector.
Ví dụ:
phần HTML
<h1>All elements on the page, from the heading 1</h1>
<h2 class="pastoral">to the heading 2 with class=pastoral</h2>
<p>to the paragraph will be orange.</p>
phần CSS:
* {color: orange;}
Kết quả:
2.1.2 Type selector - bộ chọn theo kiểu
Type selector sẽ chọn tất cả các thành phần HTML có tên nút nhất định. Ví dụ: “a” sẽ chọn tất cả các phần tử <a> và áp dụng các giá trị thuộc tính CSS cho chúng. “Input” sẽ chọn tất cả các phần tử <input>, “span” tất cả các phần tử <span>, v.v. Bạn cũng có thể sử dụng một không gian tên đã xác định để hạn chế bộ chọn loại chỉ ở các phần tử trong không gian tên đó.
a. Cú pháp Type selector
phần tử { thuộc tính kiểu }
b. Ví dụ
Giả sử tài liệu chứa các phần tử đoạn văn và span. Để các phần tử span được đánh dấu bằng màu cam bạn sử dụng Type selector:
Ví dụ:
phần HTML:
<span>One span. </span>
<p>No span.</p>
<span>Two span.</span>
<p>No span.</p>
phần CSS:
span {
background-color: red;
}
Kết quả:
2.1.3 Class Selector - Bộ chọn theo lớp
Class Selector chọn tất cả các thành phần có tên lớp nhất định. Ví dụ: .intro sẽ chọn bất kỳ phần tử nào có lớp “intro” giống như .index sẽ chọn bất kỳ phần tử nào có lớp “index”. Nếu sử dụng CSS Bootstrap của framework nguồn mở thì hầu như tất cả các kiểu của nó đều sử dụng các lớp làm bộ chọn.
a. Cú pháp Class selector
.classname { style properties }
b. Ví dụ:
Thay đổi tất cả các thành phần có lớp ="pastoral" thành màu cam.
Ví dụ:
phần HTML:
<h1>Not blue</h1>
<h1 class="pastoral">Blue</h1>
phần CSS:
.pastoral {
color: blue;
}
Kết quả:
2.1.4 ID Selector - bộ chọn theo ID
ID Selector chọn một phần tử dựa trên thuộc tính ID của nó. Ví dụ: #toc sẽ chọn phần tử có ID "toc.” Lưu ý bộ chọn này chỉ hoạt động nếu giá trị được cung cấp trong bộ chọn khớp chính xác với thuộc tính ID của phần tử.
a. Cú pháp
#idname { style properties }
b. Ví dụ:
Thay đổi màu sắc và căn chỉnh của phần tử có id "hubspot".
Ví dụ:
phần HTML:
<h1 id="hubspot">#id selector</h1>
phần CSS:
#hubspot {
color: orange;
text-align: right;
}
Kết quả:
3. Tùy chỉnh với CSS Selector
Bộ chọn CSS cho phép duy trì quyền kiểm soát chính xác đối với quy trình và mã tùy chỉnh khi xây dựng trang web từ đầu. Mặc dù có thể cần một khoảng thời gian học tập nhưng chúng ta nên đầu tư thời gian vào việc tìm hiểu và thử nghiệm các loại bộ chọn CSS khác nhau. Làm như vậy có thể cho phép bạn tạo kiểu cho trang web theo thương hiệu của mình trong khi vẫn giữ cho mã nhẹ và thời gian tải nhanh.
4. Lời Kết
Trong bài viết trên, ICANTECH đã cùng bạn tìm hiểu về CSS Selectors cũng như các Selector phổ biến. Hi vọng những kiến thức được ICANTECH chia sẻ ở trên sẽ giúp bạn cải thiện khả năng lập trình khi ứng dụng các kiến thức có liên quan đến CSS.
Cảm ơn bạn đã đọc bài viết, nếu bạn đang quan tâm đến học lập trình thì hãy tham khảo ngay các khóa học lập trình online dưới đây tại ICANTECH nhé
Nguồn ảnh: ICANTECH.
Tags
Lập trình chung
