Câu hỏi tự luận Khoa học máy tính 12 kết nối Bài 17: Các mức ưu tiên của bộ chọn

BÀI 17: CÁC MỨC ƯU TIÊN CỦA BỘ CHỌN

1. NHẬN BIẾT (4 CÂU)

Câu 1: Thế nào là bộ chọn pseudo-class trong CSS?

Trả lời: 

Bộ chọn pseudo-class là các lớp giả được sử dụng để định dạng một trạng thái cụ thể của phần tử HTML.

Câu 2: Thế nào là bộ chọn pseudo-element trong CSS?

Trả lời: 

Bộ chọn pseudo-element là các phần tử giả mô tả một phần hoặc thành phần nhỏ hơn của một phần tử HTML.

Câu 3: Hãy kể tên hai quy tắc ưu tiên cơ bản của CSS khi áp dụng định dạng.

Trả lời:

Câu 4: Trọng số CSS được sử dụng để làm gì?

Trả lời:

2. THÔNG HIỂU (4 CÂU)

Câu 1: Bộ chọn pseudo-class khác gì so với pseudo-element?

Trả lời: 

Pseudo-class: Dùng để định dạng trạng thái cụ thể của một phần tử HTML.

Pseudo-element: Dùng để định dạng một phần nhỏ hơn của một phần tử HTML, ví dụ như dòng đầu tiên hoặc ký tự đầu tiên.

Câu 2:Giải thích nguyên tắc ưu tiên của CSS khi có nhiều mẫu định dạng áp dụng cho cùng một phần tử HTML.

Trả lời:

CSS áp dụng mẫu định dạng theo thứ tự ưu tiên:

Trọng số cao nhất được ưu tiên.

Nếu trọng số bằng nhau, áp dụng theo nguyên tắc thứ tự cuối cùng (quy tắc cascade).

Câu 3: Giả sử có hai bộ chọn CSS như sau: #id và .class. Bộ chọn nào có trọng số cao hơn? Vì sao?

Trả lời:

Câu 4: Khi nào cần sử dụng bộ chọn pseudo-class :hover?

Trả lời:

3. VẬN DỤNG (3 CÂU)

Câu 1: Viết đoạn CSS để định dạng cho liên kết có màu xanh lá cây và chuyển sang màu đỏ khi di chuột qua.

Trả lời:

a {

   background-color: green;

}

a:hover {

   color: red;

}

Câu 2: Viết CSS định dạng dòng đầu tiên của một đoạn văn bản để có font chữ nghiêng và màu xanh dương.

Trả lời:

Câu 3: Viết CSS để ẩn một hình ảnh ban đầu và hiện ra khi người dùng nhấn chuột vào một dòng chữ “Xem ảnh”.

Trả lời:

4. VẬN DỤNG CAO (2 CÂU)

Câu 1: Viết đoạn mã HTML và CSS hoàn chỉnh để thực hiện nhiệm vụ: Tiêu đề chính màu đỏ và căn giữa, các tiêu đề nhỏ màu xanh và đậm.

Trả lời:

HTLM

<h1 class="main-title">Tiêu đề chính</h1>

<h2 class="sub-title">Tiêu đề nhỏ</h2>

CSS:

.main-title {

   color: red;

   text-align: center;

}

.sub-title {

   color: blue;

   font-weight: bold;

----------------------------------

----------------------- Còn tiếp -------------------------