Kiểm tra bộ chọn
Bộ chọn CSS được dùng để chọn các thành phần để áp dụng kiểu. Bộ chọn cung cấp rất nhiều tính linh hoạt và sức mạnh. Bộ chọn cho phép bạn áp dụng một kiểu cho tất cả các thành phần hoặc cho một thành phần cụ thể và thậm chí một chữ cái cụ thể.
Có ba loại bộ chọn cốt lõi:
- Yếu tố
- Lớp học
- Id
Bằng cách sử dụng các bộ chọn này, bạn có thể áp dụng kiểu cho nhiều thành phần hoặc một vài thành phần.
Bộ chọn phần tử
Bộ chọn phần tử áp dụng cho tất cả các thành phần với thẻ đó. Bất kỳ thành phần HTML nào cũng có thể được dùng làm bộ chọn phần tử. Việc sử h1 cho phép bạn sửa đổi tất cả h1 thành phần trên trang.
h1 {
/* style */
}
Bộ chọn lớp
Tất cả các thành phần HTML cho phép bạn thêm một thuộc class mới.
class dùng để nhóm các thành phần lại với nhau và cho phép bạn đánh dấu chúng để áp dụng thiết đặt CSS.
Khi tạo sơ yếu lý lịch, bạn có các phần cho trình độ học vấn và lịch sử việc làm của mình. Sử dụng lớp học sẽ cho phép bạn định dạng các thành phần đó với cùng một kiểu.
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
Trong ví dụ trước, bạn có thể muốn định dạng cho div giống như khi chúng hiển thị các loại thông tin tương tự. Bằng cách đánh dấu hai div thành phần với cùng một lớp, bạn có thể áp dụng cùng một kiểu CSS cho mỗi thành phần.
Để xác định một lớp học trong CSS, bạn . một tên trước tên. Trong ví dụ của chúng tôi, bạn sẽ sử dụng .history.
.history {
/* your styles */
}
Nếu sử dụng tệp CSS, bạn sẽ viết định nghĩa kiểu lớp trong tệp CSS. Thuộc tính lớp trong HTML tham chiếu định nghĩa từ tệp CSS.
Lớp pseudo
Lớp Pseudo cho phép bạn xác định các thành phần dựa trên vị trí của chúng trên một trang hoặc cách người dùng tương tác với chúng.
Khi người dùng tương tác với một trang web, trạng thái của các yếu tố khác nhau sẽ thay đổi. Người dùng có thể di chuột qua một mục và bạn muốn màu thay đổi khi họ di chuột qua. Hoặc nếu người dùng đã chọn một liên kết. Sau khi họ truy cập liên kết đó, bạn có thể muốn cho họ biết bằng cách thay đổi kiểu. CSS hỗ trợ nhiều cấp giả, được áp dụng tự động dựa trên những gì người dùng làm hoặc đã làm. Lớp Pseudo được tiền tố bởi một :, và được đặt sau một bộ chọn khác.
Ví dụ: để đặt màu nền của liên kết thành màu vàng khi người dùng di con trỏ qua liên kết đó, bạn có thể sử dụng CSS sau đây:
a:hover {
background-color: yellow;
}
Một số lớp giả phổ biến nhất được liệt kê trong bảng sau:
| Lớp Pseudo | Sự miêu tả |
|---|---|
hover |
Người dùng đang di con trỏ trên một mục |
visited |
Đường liên kết đã được nhấp vào trước đó |
link |
Một nối kết chưa được xem |
first-child |
Đứa con đầu tiên khớp với bộ chọn trong cấu trúc phân cấp |
last-child |
Đứa con cuối cùng khớp với bộ chọn trong cấu trúc phân cấp |
Quan trọng
Sử dụng thành phần pseudo và CSS, bạn có thể loại bỏ gạch dưới khỏi siêu kết nối. Theo quy tắc chung, tốt nhất bạn nên để gạch dưới cho mục đích trợ năng. Văn bản được gạch dưới cho phép người dùng nhanh chóng xác định các liên kết trên một trang.
Bộ chọn ID
Tương tự như các lớp học, MỘT ID cho phép bạn áp dụng một phong cách cho một yếu tố. Tuy nhiên, trong khi một lớp học có thể được áp dụng cho nhiều thành phần, một ID phải là duy nhất và tham chiếu đến chỉ một phần tử.
Trên sơ yếu lý lịch, bạn có thể có một phần dành cho mạng xã hội, chẳng hạn như X, GitHub hoặc blog của bạn. Nếu bạn muốn có kiểu tùy chỉnh cho mục đó, bạn có thể đặt ID:
<div id="social-media">
<!-- list of links -->
</div>
ID được tiền tố bằng một # trong CSS:
#social-media {
/* style */
}
Ghi
Quy ước đặt tên tiêu chuẩn cho các lớp học và ID là sử dụng "xếp xiên". Mỗi từ được viết thường và được phân tách bằng một từ -. Tên skewer-case xuất phát từ cách các từ xuất hiện như thể họ có thể được trên một xiên.