Tin tức
CSS Selectors là gì? Tìm hiểu về kiến thức CSS Selectors căn bản
CSS Selectors là một trong những khái niệm quan trọng nhất trong CSS. Đây được xem là một công cụ không thể thiếu để đơn giản hóa quá trình tùy chỉnh trang web, giúp dễ dàng kiểm soát hoặc sửa đổi trang web của mình một cách nhanh chóng. Vậy CSS selectors là gì? Các loại CSS selectors và cách sử dụng chúng ra sao? Hãy cùng Mẫu website 24h đi tìm câu trả lời qua bài viết dưới đây nhé!
CSS Selectors là gì?
CSS Selectors là một thành phần của bộ quy tắc CSS, nó được sử dụng để xác định phần tử bạn muốn tạo style bằng CSS. CSS selectors cho trình duyệt biết phần tử HTML nào cần áp dụng các giá trị thuộc tính CSS. Nó lựa chọn phần tử HTML dựa trên ID, class, loại và thuộc tính của chúng,…
Nói một cách dễ hiểu, CSS selectors là thứ cho phép bạn nhắm mục tiêu tới phần tử HTML để áp dụng các thuộc tính CSS cho chúng. CSS Selectors giống như một đường dẫn chỉ định, cho CSS biết rằng bạn đang muốn điều chỉnh, tạo kiểu cho phần tử HTML nào.
Vì sao cần phải sử dụng CSS Selectors?
Nếu không có CSS Selectors, ta phải viết style cho từng thành phần. Lúc đó, độ dài của file CSS sẽ có tỷ lệ thuận với độ dài của file HTML. Điều này khiến cho tốc độ tải trang bị ảnh hưởng, ngoài ra nó khiến cho code rất rối và khó kiểm soát hay chỉnh sửa khi cần.
Vì thế, việc sử dụng CSS Selectors là hết sức cần thiết. Sử dụng Selector linh hoạt sẽ giúp cho file CSS trở nên ngắn gọn và đơn giản hơn, giúp tăng tốc độ tải trang và đặc biệt là dễ dàng kiểm soát hay sửa đổi khi cần.
Cách sử dụng CSS Selectors
Có hai cách sử dụng CSS Selector chính. Nếu bạn có HTML và CSS trong một tài liệu, thì bạn chỉ cần thêm bộ chọn CSS vào phần <head> của trang web của mình.
Ngoài ra, bạn cũng có thể giữ HTML và CSS của mình trong các tài liệu khác nhau. Trong trường hợp đó, bạn có thể 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 đến tệp CSS để các kiểu này được hiển thị trên trang web của bạn.
Những CSS selector phổ biến
Có rất nhiều loại CSS Selectors, tuy nhiên Mẫu website 24h sẽ liệt kê cho bạn 5 loại CSS Selectors chính:
Element selector
Element selector (hay type selector) giúp lựa chọn và định dạng tất cả các element cùng loại trên trang.
ví dụ:
HTML:
<h1>Heading</h1>
<p>Đoạn một</p>
<p class=”center”>Đoạn hai</p>
<p “para3”>Đoạn ba</p>
<p class=”center”>Đoạn bốn</p>
CSS:
p {
color: red;
}
ID selector
ID selector giúp lựa chọn và định dạng cho duy nhất một nguyên tố HTML có chứa ID nhất định. ID selector sử dụng cấu trúc với dấu (#) đứng trước ID cần định dạng.
HTML ban đầu:
<h1>Heading</h1>
<p>Đoạn một</p>
<p class=”center”>Đoạn hai</p>
<p id=”para3″>Đoạn ba</p>
<p class=”center”>Đoạn bốn</p>
CSS:
#para3 {
color: red;
}
Class selector
Class selector lựa chọn và định dạng tất cả các thẻ HTML có chứa class được chỉ định. Class selector sử dụng cấu trúc với dấu (.) đứng trước class cần định dạng.
Vẫn với đoạn HTML ban đầu:
<h1>Heading</h1>
<p>Đoạn một</p>
<p class=”center”>Đoạn hai</p>
<p id=”para3″>Đoạn ba</p>
<p class=”center”>Đoạn bốn</p>
CSS:
.center {
text-align: center;
}
Universal selector
Universal selector (*) giúp định dạng tất cả các thẻ HTML trên cùng một trang.
Ví dụ:
HTML:
<h1>Heading</h1>
<p>Đoạn một</p>
<p class=”center”>Đoạn hai</p>
<p id=”para3″>Đoạn ba</p>
<p class=”center”>Đoạn bốn</p>
CSS:
* {
text-align: center;
color: blue;
}
CSS grouping selector
Nhóm các Selector có chung style lại với nhau giúp code của bạn đơn giản hơn.
Xét ví dụ:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Do h1, h2, và p được định dạng giống nhau, bạn có thể sử dụng Selector nhóm như sau:
h1, h2, p {
text-align: center;
color: red;
}
Một vài lưu ý về CSS Selectors
Trước tiên, bạn cần phải phân biệt được hai loại ID Selector và Class Selector:
- Với ID Selector: Trong một trang web nó là suy nhất nên thường dùng ở các vị trí không có tính chất lặp lại nhiều lần
- Với Class Selector: Có thể đặt ở nhiều vị trí, chính vì thế nếu website của bạn có nhiều block giống nhau thì hãy chọn Class.
Điều cần lưu ý tiếp theo là bạn cần hiểu dù là ID hay Class thì đều cần tuân thủ luật phân cấp, nghĩa là khi truy vấn selector sẽ ghi cấp cha rồi đến cấp con.
Điều cần lưu ý thứ 3: Hiểu được sự khác nhau giữa ghi liền và ghi có khoảng cách giữa ID hoặc Class và thẻ tên.
Ví dụ:
div#main: chọn thẻdivcóid="main"div #mian: Chọn thẻ cóid="main"nằm trong thẻdiv
Lời kết
Trên đây là những chia sẻ của Mẫu website 24h về những kiến thức cơ bản về CSS Selectors. Hi vọng sau bài viết có thể giải đáp được phần nào thắc của bạn về CSS Selectors, hiểu được tầm quan trọng và cách dùng của nó một cách đơn giản nhất. Nếu có bất kỳ thắc mắc nào hãy liên hệ với Mẫu website 24. Cảm ơn các bạn đã theo dõi đến cuối bài viết.