KIỂM TRA BÀI CŨ
KHỞI ĐỘNG
BÀI 17. CÁC MỨC ƯU TIÊN CỦA BỘ CHỌN
1. KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENT
a) Bộ chọn pseudo-class (Lớp giả)
Khái niệm:
Là các trạng thái đặc biệt của phần tử HTML (như khi chưa bấm vào, khi di chuột qua...) mà không cần định nghĩa lớp, được viết sau dấu hai chấm :.
Các lớp giả thường dùng:
- :link: Chọn liên kết khi chưa được kích hoạt (chưa bấm vào bao giờ).
- :visited: Chọn liên kết sau khi đã được kích hoạt (đã bấm vào rồi).
- :hover: Chọn phần tử khi người dùng di chuyển con trỏ chuột lên nó.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 1: Theo tài liệu học tập, bộ chọn lớp giả (pseudo-class) trong ngôn ngữ CSS được sử dụng để mô tả các trạng thái đặc biệt của phần tử HTML và được nhận diện bằng dấu hiệu nào?
Câu 2: Khi thiết kế các nút bấm tương tác trên trang web, người lập trình muốn nút bấm tự động đổi màu sắc khi người dùng đưa con trỏ chuột lướt ngang qua nó. Trạng thái đặc biệt này được CSS quản lý thông qua lớp giả nào?
Câu 3: Giả sử bạn đang làm việc trên một trang web và muốn thiết lập màu xám (gray) cho các đường liên kết (thẻ a) mà người dùng đã từng nhấp chuột vào xem trước đó. Bạn sẽ sử dụng đoạn mã định dạng CSS nào sau đây cho chuẩn xác nhất?
b) Bộ chọn kiểu pseudo-element (Phần tử giả)
Khái niệm:
Dùng để định dạng cho một phần cụ thể của phần tử (như dòng đầu, chữ cái đầu) mà không cần thêm thẻ HTML mới, được viết sau hai dấu hai chấm ::.
Các phần tử giả thường dùng:
- ::first-line: Chọn dòng đầu tiên của văn bản.
- ::first-letter: Chọn kí tự đầu tiên của văn bản.
- ::selection: Chọn vùng văn bản đang được người dùng bôi đen (kéo thả chuột chọn).
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 4: Khác biệt hoàn toàn so với bộ chọn lớp giả, bộ chọn kiểu phần tử giả (pseudo-element) dùng để định dạng cho một phần cụ thể của phần tử mà không cần phải bổ sung thêm thẻ HTML mới. Bộ chọn này được viết ngay sau cụm kí hiệu nào?
Câu 5: Trong thiết kế của các bài báo hay tạp chí trực tuyến, ta thường xuyên bắt gặp trường hợp kí tự đầu tiên của đoạn văn bản được phóng to lên rất nhiều so với các kí tự bình thường khác. Để làm được điều này một cách tự động, lập trình viên sử dụng phần tử giả nào?
Câu 6: Nhằm tăng cường trải nghiệm người dùng, bạn muốn tạo điểm nhấn cho trang web sao cho mỗi khi khách truy cập tiến hành bôi đen văn bản bằng thao tác chuột, phần nền của vùng văn bản được chọn đó sẽ tự động chuyển sang màu vàng. Đoạn mã CSS nào sau đây sẽ thực hiện chính xác điều này?
2. MỨC ĐỘ ƯU TIÊN KHI ÁP DỤNG CSS
Khi có nhiều mẫu định dạng cùng áp dụng cho một phần tử, trình duyệt sẽ chọn mẫu để hiển thị dựa trên thứ tự ưu tiên từ cao xuống thấp như sau:
1. !important:
Mức ưu tiên cao nhất, bất chấp mọi quy tắc khác.
2. CSS trực tiếp (Inline CSS):
Viết ngay trong thẻ HTML bằng thuộc tính style.
3. Media type:
Định dạng phụ thuộc kích thước thiết bị.
4. Trọng số CSS (Specificity):
Nếu không có các trường hợp trên, CSS sẽ tính điểm (trọng số) của bộ chọn. Ai điểm cao hơn sẽ thắng.
5. Nguyên tắc thứ tự cuối cùng (Cascading):
Nếu trọng số bằng nhau, quy tắc nào viết sau (bên dưới) sẽ được áp dụng.
6. Kế thừa:
Lấy thuộc tính từ phần tử cha.
7. Mặc định:
Theo quy định của trình duyệt.
TRẢ LỜI CÂU HỎI TRẮC NGHIỆM:
Câu 7: Trong trường hợp thực tế có quá nhiều mẫu định dạng cùng lúc hướng tới để thay đổi một phần tử HTML trên trang web, hệ thống trình duyệt sẽ tuân theo thứ tự ưu tiên nhất định. Quy tắc đặc biệt nào sau đây sở hữu mức độ ưu tiên cao nhất, luôn luôn chiến thắng và bất chấp mọi quy tắc khác?
Câu 8: Trong bảng phân loại và xếp hạng các mức độ ưu tiên định dạng trên trang web, phương pháp định dạng CSS nào sau đây chiếm vị trí thứ hai, đứng ngay sau từ khóa !important, nhờ vào việc được lập trình viên viết trực tiếp vào bên trong thẻ HTML thông qua thuộc tính style?
Câu 9: Trong quá trình xử lý giao diện, nếu có hai mẫu định dạng cùng áp dụng cho một phần tử nhưng không sử dụng mã CSS trực tiếp hay từ khóa !important, trình duyệt web sẽ xét đến yếu tố nào tiếp theo để phân định mức độ ưu tiên phụ thuộc trực tiếp vào kích thước của màn hình thiết bị?
Câu 10: Nhằm giải quyết các xung đột định dạng phức tạp, hệ thống trình duyệt web tiến hành tính toán điểm trọng số (Specificity) của tất cả các bộ chọn CSS. Trong hệ thống tính điểm này, nếu lập trình viên sử dụng một bộ chọn ID (#id), nó sẽ mang lại cho quy tắc định dạng đó bao nhiêu điểm cơ bản?
Câu 11: Xuyên suốt quá trình phân tích mã nguồn, nếu tất cả các mức độ ưu tiên phía trên bao gồm cả trọng số CSS đều cho kết quả hoàn toàn bằng nhau, trình duyệt sẽ tự động áp dụng nguyên tắc thứ tự cuối cùng (Cascading) để đưa ra quyết định hiển thị. Nguyên tắc Cascading này hoạt động dựa trên cơ sở ra sao?
Câu 12: Theo sơ đồ xếp hạng các mức độ ưu tiên của ngôn ngữ CSS, khi một phần tử HTML trên trang web hoàn toàn không có bất kỳ định nghĩa định dạng nào từ phía lập trình viên (bao gồm cả !important, inline, trọng số hay kế thừa), hệ thống sẽ hiển thị màu sắc và bố cục dựa trên quy tắc cuối cùng nào?
Câu 13: Khi tiến hành so sánh trọng số (Specificity) của các bộ chọn CSS khác nhau, trình duyệt máy tính sẽ tính tổng điểm theo một quy tắc cộng dồn đặc biệt. Theo nguyên tắc mặc định này, một bộ chọn lớp (ví dụ như .class hoặc :hover) được hệ thống quy định tương đương với mức giá trị là bao nhiêu điểm?
Câu 14: Trong cấu trúc mã nguồn của một trang web hoàn chỉnh, tại sao một đoạn mã định nghĩa trực tiếp bên trong thẻ HTML thông qua thuộc tính style (hay còn gọi là Inline CSS) lại có khả năng ghi đè lên và vô hiệu hóa các định dạng được viết trong tệp External CSS (file ngoài) khi cả hai quy tắc này cùng nhắm vào một thuộc tính?
Câu 15: Giả sử trong tập tin định dạng của bạn hiện có hai bộ chọn cùng muốn áp dụng màu sắc cho cùng một phần tử p: đó là bộ chọn ".test p" và bộ chọn "div p". Dựa vào cách tính toán điểm trọng số (Specificity) đã được học của CSS, bộ chọn nào sẽ là người chiến thắng và giành được quyền định dạng?
Câu 16: Trong quá trình viết mã, một đoạn mã CSS quy định "p { color: red; }" được lập trình viên viết ở dòng số 1, sau đó ngay ở dòng số 2 lại xuất hiện một đoạn mã khác là "p { color: blue; }". Dựa theo nguyên tắc thứ tự cuối cùng (Cascading) của trình duyệt, đoạn văn bản p thực tế sẽ hiển thị màu gì?