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 (kntt)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Câu hỏi(t.98)	Hoạt động 2
Câu hỏi(t.100)	Luyện tập	Vận dụng

Khởi động (trang 96): 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?

Gợi ý trả lời:

Có. Cách 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:
:link – Tất cả các liên kết khi chưa được kích hoạt.
:visited – Tất cả các liên kết sau khi đã được kích hoạt một lần.
:hover – Tất cả các phần tử, khi người dùng di chuyển con trỏ chuột lên đối tượng.

1. KIỂU BỘ CHỌN DẠNG SPEUDO-CLASS VÀ SPUEDO-ELEMENT

Hoạt động 1 (trang 96): Thảo luận và trả lời các câu hỏi sau:
1. Thế nào là pseudo-class của bộ chọn? Cách áp 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.

Gợi ý trả lời:

1. Pseudo-class là khái niệm chỉ các trạng thái đặc biệt của phần tử HTML.
Cách áp dụng: Pseudo-class được áp dụng sau bộ chọn phần tử HTML, sử dụng dấu hai chấm (:) để phân biệt. Ví dụ:

2. Pseudo-element (phần tử giả) là một loại bộ chọn CSS đặc biệt cho phép bạn thêm nội dung hoặc định dạng các phần tử HTML mà không cần thay đổi cấu trúc HTML. Pseudo-element được sử dụng để tạo các hiệu ứng CSS độc đáo, giúp trang web trở nên sinh động và hấp dẫn hơn.
Ý nghĩa: Khai báo phần tử giả để thiết lập các mẫu định dạng đặc biệt cho phần tử giả đó khác so với mặc định.

CÂU HỎI

Câu hỏi 1 (trang 7): 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?

Gợi ý trả lời:

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 sau:

Câu hỏi 2 (trang 7): 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?

Gợi ý trả lời:

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 sau:

2. MỨC ĐỘ ƯU TIÊN KHI ÁP DỤNG CSS

Hoạt động 2 (trang 98): Giả sử có định dạng CSS như sau:

Gợi ý trả lời:

Cụm từ “Tin học 12” sẽ có màu xanh (green).
Đoạn code:

CÂU HỎI

Câu hỏi 1 (trang 100): Tính trọng số của các mẫu định dạng sau:

Gợi ý trả lời:

a) #n12 > .test (1 id, 1 lớp)
100+10=110
b) h1, h2, h3, h4 > #new (4 phần tử, 1 id)
1+1+1+1+100=
c) p + em.test (2 phần tử, 1 lớp)
1+1+10=12
Câu hỏi 2 (trang 100): 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?

Gợi ý trả lời:

Nguyên tắc thứ tự cuối cùng được áp dụng khi dãy các định dạng CSS có trọng số bằng nhau.

LUYỆN TẬP

Luyện tập 1 (trang 101): Giải thích sự khác nhau giữa hai định dạng sau:

Gợi ý trả lời:

#p123 + p: Áp dụng cho phần tử <p> ngay sau bất kỳ phần tử nào có ID là p123.
h2#p123 + p: Áp dụng cho phần tử <p> ngay sau một phần tử <h2> có ID là p123.
Luyện tập 2 (trang 101): 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?

Gợi ý trả lời:

.name {
font-style: italic; /* In nghiêng */
border: 1px solid #000; /* Đóng khung bằng đường viền màu đen */
padding: 2px; /* Thêm đệm xung quanh nội dung để không quá sát viền */
display: inline-block; /* Đảm bảo viền ôm sát nội dung */
}

VẬN DỤNG

Vận dụng 1 (trang 101): 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.

Gợi ý trả lời:

1. :visited: Áp dụng cho các liên kết đã được truy cập.
Ví dụ: HIệu ứng thay đổi màu khi truy cập liên kết.

Kết quả: Khi truy cập một liên kết, màu sắc của liên kết đó sẽ thay đổi sang màu đã truy cập.

2. :invalid: Áp dụng cho các phần tử nhập dữ liệu không hợp lệ (lỗi nhập).
Ví dụ: Báo hiệu lỗi khi nhập dữ liệu không hợp lệ.

Kết quả: Khi người dùng nhập email không hợp lệ (ví dụ: thiếu ký tự @), viền của trường nhập sẽ chuyển sang màu đỏ để báo hiệu lỗi.

3. :required: Áp dụng cho các phần tử nhập dữ liệu bắt buộc.
Ví dụ: Làm nổi bật các trường nhập dữ liệu bắt buộc.

Kết quả: Khi người dùng nhấp vào trường nhập dữ liệu bắt buộc, viền của trường sẽ chuyển sang màu xanh lam để thu hút sự chú ý.

Vận dụng 2 (trang 101): Tìm hiểu thêm các dạng pseuso-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.

Gợi ý trả lời:

1. ::placeholder: Định dạng văn bản hiển thị bên trong phần tử nhập dữ liệu (ví dụ: tên người dùng, email).
Ví dụ: Thay đổi màu sắc placeholder khi nhập dữ liệu.

Kết quả: Khi người dùng chưa nhập dữ liệu, placeholder "Nhập tên của bạn" sẽ hiển thị với màu đỏ và kiểu chữ nghiêng.

2. ::before: Thêm nội dung trước nội dung của phần tử được chọn.
Ví dụ: Thêm chú thích hoặc biểu tượng trước nội dung của một đoạn văn bản mà không cần thay đổi HTML.