Câu hỏi mở đầu trang 96

Đề bài: Chúng ta đã biết nhiều cách thiết lập mẫu định dạng cho các phần tử HTML. Tuy nhiên, các lệnh định dạng CSS đã biết đều chỉ áp dụng cho các phần tử tĩnh, tức là không phụ thuộc vào tương tác với người dùng. Vậy có cách nào thiết lập CSS để định dạng cho các trạng thái tương tác với người dùng, ví dụ như trạng thái khi người dùng di chuyển hay nháy chuột lên phần tử đó không?

Lời giải:

Có thể thực hiện được. CSS cung cấp một loại bộ chọn đặc biệt gọi là pseudo-class (lớp giả) để định dạng cho các trạng thái tương tác của phần tử với người dùng.

Ví dụ:

• :hover – khi con trỏ chuột di chuyển lên phần tử.
• :link – các liên kết chưa được kích hoạt.
• :visited – các liên kết đã được kích hoạt.

Cú pháp: bộ_chọn:pseudo-class {thuộc tính: giá trị;}

1. Kiểu bộ chọn dạng pseudo-class và pseudo-element

Hoạt động 1 trang 96

Đề bài:

1. Thế nào là pseudo-class của bộ chọn? Cách áp dụng.

Lời giải:

Pseudo-class (lớp giả) là khái niệm chỉ các trạng thái đặc biệt của phần tử HTML (ví dụ liên kết đã được nháy hay chưa, con trỏ chuột đang di chuyển lên phần tử,…).

• Các lớp này không cần định nghĩa, được coi như có sẵn trong CSS.
• Cú pháp: viết sau dấu :

:pseudo-class {thuộc tính: giá trị;}

Một số pseudo-class thường dùng:

2. Thế nào là pseudo-element của bộ chọn? Nêu ý nghĩa của khái niệm này trong định dạng CSS.

Lời giải:

Pseudo-element (phần tử giả) là khái niệm chỉ một phần (hoặc một thành phần) của phần tử HTML bình thường (ví dụ dòng đầu tiên, kí tự đầu tiên,…).

• Các phần này được coi như phần tử giả và có thể được thiết lập định dạng riêng.
• Cú pháp: viết sau dấu ::

::pseudo-element {thuộc tính: giá trị;}

Một số pseudo-element thường dùng:

Ý nghĩa: cho phép định dạng một phần cụ thể của phần tử mà không cần đánh dấu riêng phần đó trong mã HTML.

Câu hỏi củng cố mục 1 trang 98

Đề bài:

1. Muốn áp dụng đổi màu chữ một vùng trên màn hình khi nháy chuột tại vùng đó thì cần phải dùng định dạng CSS nào?

Lời giải:

Cần dùng pseudo-class :active – định dạng phần tử khi đang bị nháy chuột.

Ví dụ: đổi màu đỏ khi nháy chuột lên đoạn văn:

p:active {color: red;}

2. Muốn tăng kích thước một đoạn văn bản khi di chuyển chuột qua đoạn văn bản đó thì cần dùng định dạng CSS nào?

Lời giải:

Cần dùng pseudo-class :hover – định dạng phần tử khi con trỏ chuột di chuyển lên.

Ví dụ: tăng cỡ chữ lên 150% khi di chuyển chuột qua đoạn văn:

p:hover {font-size: 150%;}

2. Mức độ ưu tiên khi áp dụng CSS

Hoạt động 2 trang 98

Đề bài: Giả sử có định dạng CSS như sau:

<style>
  .test {color: green;}
  p {color: red;}
</style>

CSS trên áp dụng cho phần tử HTML sau:

<p class="test">Tin học 12</p>

Khi đó cụm từ “Tin học 12” sẽ có màu gì?

Lời giải:

Cụm từ “Tin học 12” sẽ có màu xanh lá cây (green).

Giải thích: khi có hai mẫu CSS cùng áp dụng cho một phần tử, trình duyệt sẽ chọn mẫu có trọng số cao nhất.

• Bộ chọn .test là class → trọng số 10.
• Bộ chọn p là phần tử (element) → trọng số 1.

→ .test có trọng số cao hơn nên được áp dụng → chữ có màu xanh lá cây.

Câu hỏi củng cố mục 2 trang 100

Đề bài:

1. Tính trọng số của các mẫu định dạng sau:

a) #n12 > .test

Lời giải:

Phân tích bộ chọn:

• #n12 – id → 100
• .test – class → 10

→ Trọng số = 100 + 10 = 110.

b) h1, h2, h3, h4 > #new

Lời giải:

Dấu phẩy (,) chia thành bốn bộ chọn riêng biệt, mỗi bộ chọn có trọng số riêng:

• h1 – element → 1
• h2 – element → 1
• h3 – element → 1
• h4 > #new – element + id → 1 + 100 = 101

c) p + em.test

Lời giải:

Phân tích bộ chọn:

• p – element → 1
• em – element → 1
• .test – class → 10

→ Trọng số = 1 + 1 + 10 = 12.

2. Khi nào nguyên tắc cascading (thứ tự cuối cùng) được áp dụng cho một dãy các định dạng CSS?

Lời giải:

Nguyên tắc cascading (thứ tự cuối cùng) được áp dụng khi:

• Có nhiều mẫu định dạng CSS cùng áp dụng cho một phần tử.
• Các mẫu này có cùng mức ưu tiên và cùng trọng số.

→ Khi đó, mẫu được viết ở vị trí cuối cùng trong tệp CSS sẽ được áp dụng.

Luyện tập

Luyện tập trang 101

Đề bài:

1. Giải thích sự khác nhau giữa hai định dạng sau:

#p123 + p {color: red;}
h2#p123 + p {color: red;}

Lời giải:

• #p123 + p: áp dụng cho <p> đứng liền kề ngay sau bất kì phần tử nào có id = “p123” (không quan tâm tên thẻ).
  • Trọng số: #p123 (100) + p (1) = 101.
• h2#p123 + p: áp dụng cho <p> đứng liền kề ngay sau phần tử <h2> có id = “p123” (bắt buộc là h2).
  • Trọng số: h2 (1) + #p123 (100) + p (1) = 102.

→ Điểm khác: định dạng thứ hai giới hạn phần tử có id “p123” phải là <h2>, và có trọng số cao hơn một bậc.

2. Trong phần Thực hành, các tên riêng (tên người, tên tổ chức) cần được bổ sung định dạng đóng khung và in nghiêng. Em sẽ thực hiện các yêu cầu này như thế nào?

Lời giải:

Cách thực hiện:

Bước 1: Trong tệp HTML, bọc các tên riêng vào thẻ <span> có class chung, ví dụ class="ten_rieng":

<span class="ten_rieng">Tim Berners-Lee</span>
<span class="ten_rieng">CERN</span>

Bước 2: Thêm mẫu CSS định dạng cho class đó:

.ten_rieng {
  border: 1px solid black;
  font-style: italic;
}

→ Tất cả các cụm tên riêng có class “ten_rieng” sẽ được đóng khung và in nghiêng đồng loạt.

Vận dụng

Vận dụng trang 101

Đề bài:

1. Tìm hiểu thêm các dạng pseudo-class khác, nêu ý nghĩa và tìm ví dụ ứng dụng thực tế cho các kiểu bộ chọn này.

Lời giải:

Một số pseudo-class khác thường dùng:

2. Tìm hiểu thêm các dạng pseudo-element khác, nêu ý nghĩa và tìm ví dụ ứng dụng thực tế cho các kiểu bộ chọn này.

Lời giải:

Một số pseudo-element khác thường dùng:

Ví dụ minh hoạ ::before:

p.trich_dan::before {content: "❝ "; color: red;}

→ Tự động thêm dấu ngoặc kép đỏ trước mọi đoạn có class “trich_dan”.

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa