Bạn đang xem: CSS Selector được hiểu như thế nào? 5 loại CSS Selector bạn cần biết – Tin tức tên miền hosting Tại Vuihecungchocopie

Bạn đang quan tâm đến CSS Selector được hiểu như thế nào? 5 loại CSS Selector bạn cần biết – Tin tức tên miền hosting phải không? Nào hãy cùng Vuihecungchocopie đón xem bài viết này ngay sau đây nhé, vì nó vô cùng thú vị và hay đấy!

css selector là một khái niệm cơ bản trong CSS mà không phải ai cũng hiểu. Trong bài viết này, lều sẽ giúp bạn hiểu khái niệm và cách sử dụng các bộ chọn CSS, đồng thời nắm vững 5+ bộ chọn CSS phổ biến nhất trong CSS.

Xây dựng trang web từ đầu là một cách để tạo một trang web nhanh, gọn nhẹ mà bạn có toàn quyền kiểm soát. Tuy nhiên, việc tạo, tùy chỉnh và duy trì một trang web html đòi hỏi kiến thức kỹ thuật về html, css và javascript và đầu tư đáng kể về thời gian.

Bạn đang xem: Css selector là gì

Tin tốt là bạn có thể đơn giản hóa các giai đoạn này theo một số cách. Ví dụ: để đơn giản hóa quá trình tùy chỉnh trang web của bạn, bạn có thể sử dụng bộ chọn css.

Dưới đây, chúng tôi sẽ tìm hiểu thêm về bộ chọn css là gì.

bộ chọn css?

Trước khi chúng ta tìm hiểu các định nghĩa về bộ chọn css, hãy xem lại các khái niệm cơ bản.

Nếu html là khung của một trang web, thì css xác định giao diện và bố cục của trang web đó. Mọi thứ từ kiểu chữ, cỡ chữ, đến vị trí ảnh, màu nền … đều cần css.

Đối với điều này, css sử dụng các quy tắc đối sánh mẫu để quyết định các kiểu sẽ áp dụng cho các phần tử html nào trong trang web. Mỗi mẫu quy tắc lựa chọn này được gọi là bộ chọn.

Nói một cách dễ hiểu, mỗi bộ chọn css là một lựa chọn được chỉ định mà chúng tôi áp dụng các quy tắc css.

Ví dụ:

Mã html:

& lt; h1 & gt; Tiêu đề & lt; / h1 & gt;

& lt; p id = “p1 ″ & gt; Đoạn 1 & lt; / p & gt;

& lt; p id = “p2 ″ & gt; Đoạn 2 & lt; / p & gt;

css:

h1 # p1 {

Kích thước phông chữ: 20px;

Màu sắc: đỏ;

}

Mã CSS ở trên sử dụng bộ chọn phần tử (h1) và bộ chọn id (# p1) để chỉ định kích thước và màu sắc của thẻ & lt; h1 & gt ;. và thẻ & lt; p & gt; Đầu tiên, thẻ & lt; p & gt; thứ 2 không bị ảnh hưởng.

Nói một cách đơn giản, bộ chọn css cho phép bạn nhắm mục tiêu các phần tử html để áp dụng các thuộc tính css cho chúng.

css selector giống như một đường dẫn chỉ định để cho css biết bạn muốn điều chỉnh kiểu và phần tử html nào.

Đây là file HTML và file CSS. Và bạn sẽ viết CSS để điều chỉnh, tạo kiểu cho phần tử HTML.

bộ chọn css trong tệp css

Tại sao sử dụng bộ chọn css?

Nếu không có bộ chọn, chúng tôi sẽ phải viết các kiểu riêng biệt cho từng phần tử. Khi đó độ dài của tệp css sẽ tỷ lệ với độ dài của tệp html. Điều này không chỉ ảnh hưởng đến tốc độ tải trang mà còn khiến code trở nên rất lộn xộn, khó kiểm soát và chỉnh sửa khi cần thiết.

Vì vậy, việc sử dụng bộ chọn css là rất cần thiết. Việc sử dụng các bộ chọn linh hoạt sẽ làm cho các tệp CSS ngắn hơn và gọn gàng hơn, giúp tăng tốc độ tải trang web và giúp chúng tôi dễ dàng kiểm soát hoặc sửa đổi chúng khi cần thiết.

Cách sử dụng bộ chọn css

Bạn có thể sử dụng bộ chọn css theo hai cách chính. Nếu bạn có html và css trong tài liệu của mình thì bạn chỉ cần thêm công cụ chọn css vào & lt; head & gt; site của nó. Bạn sẽ thấy phương pháp này trong ví dụ bên dưới.

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 này, bạn có thể có một tài liệu html được đánh dấu là index.html và một tệp css được đánh dấu style.css. Tệp index.html phải chứa một dòng mã tham chiếu đến tệp css để các kiểu này xuất hiện trên trang web của bạn.

Tệp html sẽ trông giống như sau:

& lt;! doctype html & gt;

& lt; html lang = “vi” & gt;

& lt; title & gt; css selector & lt; / title & gt;

& lt; link rel = “stylesheet” href = “style.css” & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; h1 & gt; Bộ chọn css là gì & amp; hoạt động như thế nào? & lt; / h1 & gt;

& lt; body & gt;

& lt; / html & gt;

Để ý dòng ? Đây là một tham chiếu đến tệp css của bạn. Tệp này sẽ chỉ chứa khối bộ chọn và css tùy chỉnh khác mà bạn sẽ thấy bên dưới.

Bây giờ chúng ta đã có tổng quan ngắn gọn về cách hoạt động của bộ chọn CSS, hãy cùng xem các loại bộ chọn CSS chính.

Các bộ chọn css phổ biến

Dưới đây, chúng tôi sẽ giới thiệu 5 loại bộ chọn CSS chính. Mỗi phần tử giúp bạn chọn một nhóm phần tử khác nhau trên trang web của mình. Chúng tôi sẽ bắt đầu với các loại giúp bạn định vị nhóm phần tử lớn nhất, sau đó chuyển sang các loại chính xác hơn.

CSS Selector 2

Bộ chọn phần tử

Bộ chọn phần tử (hoặc bộ chọn loại) chọn và định dạng tất cả các phần tử cùng loại trên trang. Ví dụ:

Xem thêm: Độc quyền bán (Monopoly) là gì? Các đặc trưng của thị trường độc quyền bán thuần túy

html:

& lt; h1 & gt; Tiêu đề & lt; / h1 & gt;

& lt; p & gt; Đoạn đầu tiên & lt; / p & gt;

& lt; p class = “center” & gt; Đoạn thứ hai & lt; / p & gt;

& lt; p “para3” & gt; đoạn thứ ba & lt; / p & gt;

& lt; p class = “center” & gt; Đoạn thứ tư & lt; / p & gt;

css:

p {

Màu sắc: đỏ;

}

Đoạn mã trên sử dụng bộ chọn phần tử (p). Nó sẽ chuyển văn bản trên tất cả các thẻ đoạn văn sang màu đỏ.

công cụ chọn id

Công cụ chọn id

chỉ giúp chọn và định dạng các phần tử html có chứa id đã cho. Bộ chọn id sử dụng một cấu trúc có dấu (#) đứng trước id được định dạng

Hoặc html gốc:

& lt; h1 & gt; Tiêu đề & lt; / h1 & gt;

& lt; p & gt; Đoạn đầu tiên & lt; / p & gt;

& lt; p class = “center” & gt; Đoạn thứ hai & lt; / p & gt;

& lt; p id = “para3 ″ & gt; đoạn thứ ba & lt; / p & gt;

& lt; p class = “center” & gt; Đoạn thứ tư & lt; / p & gt;

css:

# para3 {

Màu sắc: đỏ;

}

Trong trường hợp này, thẻ duy nhất được chỉ định bằng màu đỏ là & lt; p id = “para3” & gt ;. thẻ

Bộ chọn lớp

chọn và định dạng tất cả các thẻ html có chứa lớp được chỉ định. Bộ chọn lớp sử dụng một cấu trúc có dấu phẩy (.) Trước lớp cần định dạng.

Hoặc html gốc:

& lt; h1 & gt; Tiêu đề & lt; / h1 & gt;

& lt; p & gt; Đoạn đầu tiên & lt; / p & gt;

& lt; p class = “center” & gt; Đoạn thứ hai & lt; / p & gt;

& lt; p id = “para3 ″ & gt; đoạn thứ ba & lt; / p & gt;

& lt; p class = “center” & gt; Đoạn thứ tư & lt; / p & gt;

css:

.center {

Căn chỉnh văn bản: Căn giữa;

}

Ví dụ này sử dụng bộ chọn lớp (.center), dẫn đến thẻ & lt; p & gt; đoạn thứ hai và thứ tư được căn giữa trang.

Bộ chọn đa năng

Bộ chọn đa năng (*) giúp bạn định dạng tất cả các thẻ html trên trang.

Ví dụ:

Xem thêm: Độc quyền bán (Monopoly) là gì? Các đặc trưng của thị trường độc quyền bán thuần túy

html:

& lt; h1 & gt; Tiêu đề & lt; / h1 & gt;

& lt; p & gt; Đoạn đầu tiên & lt; / p & gt;

& lt; p class = “center” & gt; Đoạn thứ hai & lt; / p & gt;

& lt; p id = “para3 ″ & gt; đoạn thứ ba & lt; / p & gt;

& lt; p class = “center” & gt; Đoạn thứ tư & lt; / p & gt;

css:

* {

Căn chỉnh văn bản: Căn giữa;

Xem thêm: BIÊN BẢN LẤY LỜI KHAI – Luật sư ly hôn

Màu sắc: xanh lam;

}

Đoạn mã trên làm cho tất cả các thẻ html có màu xanh lam và được căn giữa, bao gồm các thẻ tiêu đề và đoạn văn.

công cụ chọn nhóm css

Việc kết hợp các bộ chọn có cùng kiểu giúp mã của bạn đơn giản hơn.

Ví dụ:

h1 {

Căn chỉnh văn bản: Căn giữa;

Màu sắc: đỏ;

}

h2 {

Căn chỉnh văn bản: Căn giữa;

Màu sắc: đỏ;

}

p {

Căn chỉnh văn bản: Căn giữa;

Màu sắc: đỏ;

}

Vì h1, h2 và p có cùng định dạng nên bạn có thể sử dụng công cụ chọn nhóm như sau:

h1, h2, p {

Căn chỉnh văn bản: Căn giữa;

Màu sắc: đỏ;

}

Làm cách nào để nhóm nhiều bộ chọn css?

CSS Selector 4

Giả sử bạn có nhiều phần tử mà bạn muốn áp dụng cùng một css, ví dụ: h2 và một lớp .spacious mà bạn muốn tạo màu xanh lục. Bạn có thể viết mã thành hai quy tắc riêng biệt như hình dưới đây.

h2 {

Màu sắc: xanh lá cây;

}

.Spacious {

Màu sắc: xanh lá cây;

}

Ngoài ra, bạn có thể kết hợp các bộ chọn css vào một danh sách bộ chọn. Để tạo danh sách các bộ chọn, chỉ cần liệt kê nhiều bộ chọn và phân tách chúng bằng dấu phẩy trước dấu ngoặc chứa thuộc tính style. Vì khoảng trắng trước và sau dấu phẩy đều hợp lệ, tôi sẽ thêm khoảng trắng sau mỗi dấu phẩy để làm cho mã dễ đọc hơn.

Vì vậy, cú pháp là: element, element, element {style thuộc tính}. Đây là ví dụ trên:

h2, .spacious {

Màu sắc: xanh lá cây;

}

Bạn cũng có thể đặt bộ chọn css trên dòng riêng của nó nếu điều này làm cho mã dễ đọc hơn. Trong trường hợp này, cú pháp sẽ như thế này:

h2,

.Spacious {

Màu sắc: xanh lá cây;

}

Kết hợp các bộ chọn css theo cách này có thể giúp giảm kích thước của các biểu định kiểu và tăng tốc độ tải trang web.

Tùy chỉnh với bộ chọn css

Công cụ chọn

css cho phép bạn duy trì quyền kiểm soát chính xác đối với quá trình tùy chỉnh và mã khi xây dựng trang web của bạn từ đầu. Mặc dù có thể có một đường cong học tập, bạn nên dành thời gian để tìm hiểu và thử nghiệm với các loại bộ chọn css khác nhau. Làm điều này cho phép bạn tạo kiểu trang web cho phù hợp với thương hiệu của mình trong khi vẫn giữ cho mã của bạn sạch sẽ và thời gian tải nhanh

Kết luận

Trên đây là kiến thức cơ bản nhất về bộ chọn CSS. Biết cách sử dụng thành thạo các bộ chọn sẽ giúp cải thiện kỹ năng thiết kế trang web của bạn, giữ cho tệp css của bạn tối thiểu và nhẹ, tăng tốc độ tải trang và cho phép bạn dễ dàng quản lý và chỉnh sửa css của mình trong tương lai. pha trộn.