Bài tập củng cố Tin học ứng dụng 12 kết nối: bài 17 Các mức ưu tiên của bộ chọn

Bài tập củng cố môn Tin học ứng dụng 12 kết nối tri thức: Bài 17 Các mức ưu tiên của bộ chọn. Phần bài tập gồm 4 mức độ: Nhận biết, Thông hiểu, Vận dụng và Vận dụng cao bám sát với chương trình sách giáo khoa. Thông qua bài tập này, học sinh có thể ôn luyện kiến thức đã học từ cơ bản đến nâng cao.

Nội dung chi tiết

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: Cú pháp của bộ chọn pseudo-class trong CSS là gì?

Trả lời:

Cú pháp của bộ chọn pseudo-class trong CSS là :pseudo-class {thuộc tính : giá trị ;}.

Câu 2: Bộ chọn pseudo-element mô tả gì trong CSS?

Trả lời:

Bộ chọn pseudo-element mô tả một phần (hoặc thành phần) nhỏ hơn của phần tử, có thể coi là một phần tử giả và có thể thiết lập mẫu định dạng CSS.

Câu 3: Khi CSS có nhiều mẫu định dạng có thể áp dụng cho một phần tử, nguyên tắc nào quyết định mẫu định dạng nào sẽ được áp dụng?

Trả lời:

Nguyên tắc thứ tự ưu tiên của CSS, bao gồm tính kế thừa và quy tắc thứ tự cuối cùng (cascading), quyết định mẫu định dạng nào được áp dụng.

Câu 4: Trọng số của mẫu định dạng CSS được tính dựa trên cái gì?

Trả lời:

Trọng số của mẫu định dạng CSS được tính dựa trên giá trị trọng số của từng thành phần của bộ chọn (selector) trong mẫu định dạng.

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

Câu 1: Sự khác biệt giữa bộ chọn pseudo-class và pseudo-element là gì?

Trả lời:

Bộ chọn pseudo-class mô tả các trạng thái đã được định nghĩa trước của phần tử, còn bộ chọn pseudo-element mô tả các thành phần nhỏ hơn của phần tử, có thể coi là phần tử giả.

Câu 2: Tại sao cần phải tính trọng số của mẫu định dạng CSS khi có nhiều mẫu định dạng áp dụng cho một phần tử?

Trả lời:

Trọng số của mẫu định dạng CSS giúp xác định mẫu nào có mức ưu tiên cao nhất và sẽ được áp dụng khi có nhiều mẫu định dạng cùng áp dụng cho phần tử đó.

Câu 3: Nếu có nhiều mẫu định dạng CSS có cùng mức ưu tiên, mẫu nào sẽ được áp dụng?

Trả lời:

Nếu có nhiều mẫu định dạng CSS cùng mức ưu tiên, mẫu có trọng số cao nhất sẽ được áp dụng.

Câu 4: Bộ chọn pseudo-element có thể áp dụng cho những phần nào của một phần tử?

Trả lời:

Bộ chọn pseudo-element có thể áp dụng cho các phần nhỏ hơn của phần tử, chẳng hạn như ::before và ::after để tạo ra các nội dung giả được chèn vào trước hoặc sau nội dung của phần tử.

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

Câu 1: Viết một bộ chọn pseudo-class hoàn chỉnh để thay đổi màu chữ của liên kết bất kỳ khi người dùng di chuột lên.

Trả lời:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

}

h1 {

color: white;

text-align: center;

}

p {

font-family: verdana;

font-size: 20px;

}

a {

color: blue;

text-decoration: none;

}

</style>

</head>

<body>

<h1>Facbeook cua toi</h1>

<p>This is a paragraph.

<a href="https://www.facebook.com/">Visit our website</a>

</p>

</body>

</html>

Câu 2: Viết một đoạn mã trong đó sử dụng bộ chọn pseudo-element để thêm nội dung trước một phần tử, ví dụ thêm một dấu chấm vào đầu tất cả các đoạn văn.

Trả lời:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

}

h1 {

color: white;

text-align: center;

}

p::before {

content: "• ";

}

a {

color: blue;

text-decoration: none;

}

</style>

</head>

<body>

<h1>Facbeook cua toi</h1>

<p>fiduteach tu luan 4 muc do.

<a href="https://www.facebook.com/">Visit our website</a>

</p>

</body>

</html>

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

Câu 1: Viết ví dụ CSS để hiện thị logo khi di chuột vào dòng "Xem logo của HTML" và "Xem logo của CSS".

Trả lời:

#html-logo:hover + #html-img, #css-logo:hover + #css-img {

display: block;

}