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:

Tính kế thừa (inheritance).

Nguyên tắc thứ tự cuối cùng (cascading).

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

Trả lời:

Trọng số CSS được sử dụng để xác định mức độ ưu tiên của các mẫu định dạng áp dụng cho cùng một phần tử HTML.

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:

Bộ chọn #id có trọng số cao hơn vì id có trọng số lớn hơn so với class trong cách tính trọng số CSS.

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

Trả lời:

Bộ chọn pseudo-class :hover được sử dụng để định dạng trạng thái của phần tử khi người dùng di chuột qua phần tử đó.

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:

p::first-line {

font-style: italic;

color: blue;

}

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:

<p id="show-image">Xem ảnh</p>

<img src="image.jpg" id="image" style="display: none;">

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âu 2: Giải thích cách CSS áp dụng trọng số khi có nhiều bộ chọn áp dụng cho cùng một phần tử. Ví dụ: div#id.class.

Trả lời:

CSS tính trọng số dựa trên các thành phần của bộ chọn:

id: Trọng số là 100.

class: Trọng số là 10.

div (phần tử): Trọng số là 1.

Tổng trọng số của div#id.class là 111.