Thầy Cải - Quốc Thái

BÀI 17 - CÁC MỨC ƯU TIÊN CỦA BỘ CHỌN (KNTT - CS & ICT)

Bài 17 - Các mức ưu tiên của bộ chọn (kntt)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Kết nối tri thức). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

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.

---The end!---

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Bài 7. HTML và cấu trúc trang web
Bài 8. Định dạng văn bản
Bài 9. Tạo danh sách, bảng
Bài 10. Tạo liên kết
Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web
Bài 12. Tạo biểu mẫu
Bài 13. Khái niệm, vai trò của CSS
Bài 14. Định dạng văn bản bằng CSS
Bài 15. Tạo màu cho chữ và nền
Bài 16. Định dạng khung
Bài 17. Các mức ưu tiên của bộ chọn
Bài 18. Thực hành tổng hợp thiết kế trang web

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

CHỦ ĐỀ 7. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Bài 25. Làm quen với Học máy
Bài 26. Làm quen với Khoa học dữ liệu
Bài 27. Máy tính và Khoa học dữ liệu
Bài 28. Thực hành trải nghiệm trích rút thông tin và tri thức
Bài 29. Mô phỏng trong giải quyết vấn đề
Bài 30. Ứng dụng mô phỏng trong giáo dục

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

CHỦ ĐỀ 7. ỨNG DỤNG TIN HỌC

Bài 23. Chuẩn bị xây dựng trang web
Bài 24. Xây dựng phần đầu trang web
Bài 25. Xây dựng phần thân và chân trang web
Bài 26. Liên kết và thanh điều hướng
Bài 27. Biểu mẫu trên trang web
Bài 28. Thực hành tổng hợp

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI 16 - ĐỊNH DẠNG KHUNG (KNTT - CS & ICT)

Bài 16 - Định dạng khung (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.90)	Hoạt động 2
Câu hỏi(t.92)	Hoạt động 3	Câu hỏi(t.93)	Luyện tập	Vận dụng

Khởi động (trang 89): Trên một số trang web thường có rất nhiều phần tử cùng loại (cùng tên thẻ). Ví dụ thẻ p sẽ tương ứng với rất nhiều phần tử của trang web. Một định dạng với bộ chọn p sẽ áp dụng cho tất cả các thẻ p. Nếu muốn phân biệt các thẻ p với nhau và muốn tạo ra các CSS để phân biệt các thẻ p thì có thể thực hiện không?

Gợi ý trả lời:

Thực hiện được.
Có thể phân biệt các thẻ p với nhau bằng CSS. Cách thức thực hiện dựa vào việc sử dụng các bộ chọn CSS để xác định các thẻ p cụ thể và áp dụng các kiểu CSS khác nhau cho từng thẻ.

1. PHÂN LOẠI PHẦN TỬ KHỐI VÀ NỘI TUYẾN

Hoạt động 1 (trang 5): Quan sát cách tô màu nền của hai phần tử trên trang web trong Hình 16.1, em có nhận xét gì?

Gợi ý trả lời:

Nhận xét:
Phần tử body bao gồm 2 phần tử h1 và p, định dạng phần tử h1: tô màu nền background-color bằng màu green, tạo border quanh phần tử body.
Để tô màu chữ “Việt Nam”, tạo phần tử em trong phần tử p và tô màu nền cho phần tử em.

CÂU HỎI

Câu hỏi 1 (trang 90): Chiều rộng của các phần tử nội tuyến phụ thuộc vào những yếu tố nào? Có phụ thuộc vào chiều rộng cảu cửa sổ trình duyệt không?

Gợi ý trả lời:

Chiều rộng của các phần tử nội tuyến phụ thuộc vào các yếu tố sau:
- Nội dung của phần tử: Chiều rộng của phần tử sẽ tự động điều chỉnh để phù hợp với nội dung bên trong nó.
- Phông chữ: Kích thước và kiểu phông chữ có thể ảnh hưởng đến chiều rộng của phần tử.
- Kiểu CSS: Bạn có thể sử dụng CSS để điều chỉnh chiều rộng của phần tử nội tuyến bằng thuộc tính width.
Chiều rộng của phần tử nội tuyến không trực tiếp phụ thuộc vào chiều rộng của cửa sổ trình duyệt. Tuy nhiên, nếu nội dung bên trong phần tử nội tuyến quá dài, nó có thể dẫn đến việc xuống dòng và tạo ra các dòng mới, làm ảnh hưởng đến bố cục chung của trang web.
Câu hỏi 2 (trang 90): Khẳng định “Chiều rộng của các phần tử khối chỉ phụ thuộc vào kích thước cửa sổ trình duyệt” là đúng hay sai?

Gợi ý trả lời:

Sai. Chiều rộng của các phần tử khối không chỉ phụ thuộc vào kích thước cửa sổ trình duyệt. Nó còn phụ thuộc vào nội dung, kiểu CSS, các thuộc tính CSS khác, bố cục trang web.

2. THIẾT LẬP ĐỊNH DẠNG KHUNG BẰNG CSS

Hoạt động 2 (trang 90): Quan sát Hình 16.3 để biết các thông số chính của khung của phần tử HTML để có thể hiểu được cách thiết lập khung, viền bằng CSS.

Gợi ý trả lời:

Các thông số chính bao gồm: Kiểu đường viền, lề khung, vùng đệm, chiều cao khung, chiều rộng khung, màu viền khung, độ dày viền khung.

CÂU HỎI

Câu hỏi 1 (trang 92): Trong các thuộc tính khung của một phần tử HTML, khoảng cách từ vùng văn bản đến đường viền khung được gọi là gì?

Gợi ý trả lời:

Khoảng cách từ vùng văn bản đến đường viền khung của một phần tử HTML được gọi là "padding".
Câu hỏi 2 (trang 92): Lề khung khác gì với vùng đệm?

Gợi ý trả lời:

- Lề khung (margin): Là khoảng cách từ đường viền ngoài của khung đến văn bản xung quanh nó (nếu có).
- Vùng đệm (padding): Là khoảng cách từ vùng văn bản đến đường viền ngoài của khung.

3. MỘT SỐ BỘ CHỌN ĐẶC BIỆT CỦA CSS

Hoạt động 3 (trang 92): Thảo luận, tìm hiểu thêm cách thiết lập bộ chọn đặc biệt của CSS và trả lời các câu hỏi sau:
1. Có thể đặt mẫu định dạng cho các thẻ với thuộc tính cho trước được không?
2. Có thể thiết lập các mẫu định dạng khác nhau cho cùng một loại phần tử giống nhau được không? Nếu có thì thực hiện bằng cách nào?

Gợi ý trả lời:

1. Được. CSS cho phép đặt mẫu định dạng cho các thẻ với thuộc tính cho trước. Để làm điều này, chúng ta sử dụng bộ chọn thuộc tính trong CSS.
2. Được. Có thể thiết lập các mẫu định dạng khác nhau cho cùng một loại phần tử giống nhau bằng cách sử dụng các bộ chọn lớp (class) hoặc mã định danh (id) riêng biệt.
Cách thực hiện: Gắn các lớp hoặc mã định danh khác nhau cho các phần tử tương tự, có thể áp dụng các mẫu định dạng khác nhau cho chúng.

CÂU HỎI

Câu hỏi 1 (trang 93): Nêu sự khác biệt cơ bản giữa thuộc tính id và class của các phần tử HTML.

Gợi ý trả lời:

Sự khác biệt cơ bản nhất giữa id và class là: Mỗi mã định danh (id) chỉ được gán duy nhất cho một phần tử HTML. Mỗi lớp (class) được phép gán cho nhiều phần tử HTML.
Câu hỏi 2 (trang 93): Mỗi bộ chọn sau có ý nghĩa gì?
a) div#bat_dau > p
b) p.test em#p123

Gợi ý trả lời:

a) Mẫu định danh này sẽ chỉ áp dụng cho các phần tử p với điều kiện p là phần tử con của một phần tử div có mã định danh #bat_dau.
b) Mẫu định dạng này sẽ chỉ áp dụng cho phần tử em với mã định danh #p123 với điều kiện phần tử này là con/cháu của một phần tử p thuộc lớp test.

LUYỆN TẬP

Luyện tập 1 (trang 95): Phần tử html có thể ẩn đi trên trang web được không? Nếu có thì dùng lệnh CSS gì?

Gợi ý trả lời:

- Phần tử HTML có thể được ẩn đi trên trang web.
- Lệnh CSS dùng để ẩn phần tử HTML là: display: none;
Luyện tập 2 (trang 95): Hãy giải thích ý nghĩa định dạng sau:

Gợi ý trả lời:

Ý nghĩa:
.test .test_more
Đây là một bộ chọn đồng thời, áp dụng cho các phần tử có cả hai lớp tên là "test" và "test_more". Điều này có nghĩa là chỉ các phần tử có cả hai lớp tên này sẽ được áp dụng định dạng.
background-color: red;
Đây là thuộc tính CSS được sử dụng để đặt màu nền của các phần tử được chọn. Trong trường hợp này, màu nền của các phần tử có lớp tên "test" và "test_more" sẽ được đặt là đỏ (red).

VẬN DỤNG

Vận dụng 1 (trang 95): Giả sử nội dung trang web của em có rất nhiều thẻ p, trong đó có ba đoạn mà em thấy quan trọng nhất, kí hiệu các đoạn này là P1, P2, P3. Có cách nào thiết lập định dạng CSS để có thể định dạng P1 khác biệt, P2 và P3 có cùng kiểu và cũng khác biệt không? Tất cả các đoạn còn lại có định dạng giống nhau. Hãy nêu cách giải quyết vấn đề của em.

Gợi ý trả lời:

Có.
Đoạn mã giải quyết vấn đề:

Kết quả hiển thị:

Vận dụng 2 (trang 95): Có thể thiết lập định dạng cho các khung với thông số khung, viền trên, dưới, trái, phải khác nhau được không? Em hãy tìm hiểu và trình bày cách thiết lập định dạng CSS cho các khung, viền như vậy.

Gợi ý trả lời:

Có.
Đoạn mã trình bày cách thiết lập:

---The end!---

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

CHỦ ĐỀ 7. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

CHỦ ĐỀ 7. ỨNG DỤNG TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI 15 - TẠO MÀU CHO CHỮ VÀ NỀN (KNTT - CS & ICT)

Bài 15 - Tạo màu cho chữ và nề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.84)	Hoạt động 2
Câu hỏi(t.85)	Hoạt động 3	Câu hỏi(t.87)	Luyện tập	Vận dụng

Khởi động (trang 83): Các định dạng sau có thiết lập cùng một màu hay không? Em có nhận xét gì về thiết lập này?

Gợi ý trả lời:

Các định dạng trên đều thiết lập cùng một màu, đó là màu tím.
a) p {color: rgb(128,0,128);} sử dụng giá trị RGB để thiết lập màu.
b) p {color: #800080;} sử dụng mã màu HEX để thiết lập màu.
c) p {color: hsl (300,100%,25.1%);} sử dụng giá trị HSL để thiết lập màu.
Nhận xét: Cả ba định dạng đều thiết lập cùng một màu tím, tuy nhiên, cách biểu diễn màu sử dụng các hệ thống màu khác nhau. RGB sử dụng giá trị đỏ (Red), xanh lá cây (Green) và xanh dương (Blue), mã màu HEX sử dụng mã hexa và HSL sử dụng giá trị màu (Hue), độ bão hòa (Saturation) và độ sáng (Lightness).

1. HỆ THỐNG MÀU CỦA CSS

Hoạt động 1 (trang 83): Cùng thảo luận và tìm hiểu hệ màu RGB hỗ trợ bởi HTML và CSS.

Gợi ý trả lời:

HTML và CSS hỗ trợ hệ màu theo mẫu RGB(R-Red, G-Green, B-Blue). Mỗi màu là một tổ hợp gồm ba giá trị (r, g, b), trong đó mỗi giá trị này là số nguyên nằm trong khoảng từ 0 đến 255, tức là một số 8 bit. Tổng số màu cho phép là 28 x 28 x 28 = 224 = 16.777.216 màu.

CÂU HỎI

Câu hỏi 1 (trang 84): Các màu cơ bản red, yellow, green, blue, magentam cyan được thể hiện bằng hàm hsl như thế nào?

Gợi ý trả lời:

Red (đỏ): HSL(0, 100%, 50%)
Yellow (vàng): HSL(60, 100%, 50%)
Green (xanh lá cây): HSL(120, 100%, 50%)
Blue (xanh dương): HSL(240, 100%, 50%)
Magenta (đỏ tím): HSL(300, 100%, 50%)
Cyan (xanh lam): HSL(180, 100%, 50%)
Câu hỏi 2 (trang 84): Trong hệ màu rgb có bao nhiêu màu thuộc màu xám?

Gợi ý trả lời:

Có 256 màu thuộc màu xám. Các màu này có tham số RGB là rgb(x,x,x) với x chạy từ 0 đến 255.

2. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ

Hoạt động 2 (trang ):84 Cùng thảo luận về cách thiết lập màu trong các mẫu CSS và trả lời các câu hỏi sau:
1. Cách thiết lập định dạng màu chữ trong CSS như thế nào?
2. Cách thiết lập màu nền cho các phần tử CSS như thế nào?

Gợi ý trả lời:

- Để thiết lập định dạng màu chữ trong CSS, sử dụng thuộc tính "color". Có thể áp dụng giá trị màu bằng tên màu (ví dụ: "red", "blue"), mã hex (ví dụ: "#FF0000" cho màu đỏ) hoặc giá trị RGB (ví dụ: "rgb(255, 0, 0)" cho màu đỏ).
- Để thiết lập màu nền cho các phần tử CSS, sử dụng thuộc tính "background-color". Tương tự như màu chữ, có thể áp dụng giá trị màu bằng tên màu, mã hex hoặc giá trị RGB.

CÂU HỎI

Câu hỏi 1 (trang 85): Sửa lại CSS trong ví dụ trên, định dạng màu nền và khung viền cho cụm từ Tim Berners-Lee với màu khác biệt.

Gợi ý trả lời:

Kết quả hiển thị:

Câu hỏi 2 (trang 85): Sửa lại CSS trên, thay đổi định dạng khung viền cho phần tử p. Em hãy kiểm tra xem tính chất này có kế thừa cho các phần tử con không.

Gợi ý trả lời:

Vậy: Tính chất định dạng khung viền không có tính kế thừa.

3. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ

Hoạt động 3 (trang ):84 Quan sát, trao đổi và thảo luận về 4 trường hợp bộ chọn là tổ hợp các phần tử, nêu ý nghĩa và sự khác biệt giữa các trường hợp này: E F, E > F, E + F và E ~ F.

Gợi ý trả lời:

- E F (Descendant selector): Chọn tất cả các phần tử F nằm bên trong phần tử E, bất kể cấp độ lồng nhau của chúng. Ví dụ: div p sẽ chọn tất cả các phần tử <p> nằm trong các phần tử <div>.
- E > F (Child selector): Chọn các phần tử F là con trực tiếp của phần tử E. Điều này chỉ chọn các phần tử F nằm trực tiếp bên trong phần tử E, không bao gồm các phần tử F ở các cấp độ lồng nhau sâu hơn. Ví dụ: ul > li sẽ chọn tất cả các phần tử <li> là con trực tiếp của phần tử <ul>.
- E + F (Adjacent sibling selector): Chọn các phần tử F ngay sau phần tử E và cùng cấp với E. Điều này chỉ chọn phần tử F đầu tiên sau phần tử E. Ví dụ: h2 + p sẽ chọn phần tử <p> đầu tiên ngay sau một phần tử <h2>.
- E ~ F (General sibling selector): Chọn tất cả các phần tử F cùng cấp với phần tử E, ngay sau và lồng nhau. Điều này tương tự như trường hợp E + F, nhưng khác biệt là E ~ F có thể chọn nhiều phần tử F, không chỉ phần tử đầu tiên. Ví dụ: h3 ~ p sẽ chọn tất cả các phần tử <p> cùng cấp với phần tử <h3>.

CÂU HỎI

Câu hỏi 1 (trang 87): Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng p > strong thì kết quả sẽ như thế nào?

Gợi ý trả lời:

Kết quả vẫn như cũ. Dòng chữ "Tim Berners-Lee" vẫn có màu đỏ.
Mã HTML sau khi sửa:

Câu hỏi 2 (trang 87): Trong ví dụ ở Hình 15.7 nếu thay mẫu em ~ strong bằng em + strong thì kết quả sẽ như thế nào?

Gợi ý trả lời:

- Dòng chữ "Tim Berners-Lee" vẫn có màu đỏ.
- Chữ CERN chuyển sang màu đen.
Mã HTML sau khi sửa:

Câu hỏi 3 (trang 87): Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng p strong thì kết quả sẽ như thế nào?

Gợi ý trả lời:

Kết quả vẫn như cũ. Dòng chữ "Tim Berners-Lee" vẫn có màu đỏ.
Mã HTML sau khi thay đổi:

LUYỆN TẬP

Luyện tập 1 (trang 88): Thiết lập hệ màu cơ bản (17 màu của CSS2.1) theo bộ ba tham số R, G, B.

Gợi ý trả lời:

- Đen: RGB(0, 0, 0)
- Trắng: RGB(255, 255, 255)
- Đỏ: RGB(255, 0, 0)
- Xanh lá cây: RGB(0, 128, 0)
- Xanh da trời: RGB(0, 0, 255)
- Xanh lam: RGB(0, 0, 128)
- Vàng: RGB(255, 255, 0)
- Cam: RGB(255, 165, 0)
- Hồng: RGB(255, 192, 203)
- Tím: RGB(128, 0, 128)
- Xanh dương: RGB(0, 0, 139)
- Xám: RGB(128, 128, 128)
- Xám đậm: RGB(169, 169, 169)
- Xám nhạt: RGB(211, 211, 211)
- Nâu: RGB(165, 42, 42)
- Xanh oliv: RGB(128, 128, 0)
- Xanh lá cây đậm: RGB(0, 100, 0)

Luyện tập 2 (trang 88): Khi nào các mẫu định dạng E F và E > F có tác dụng như nhau?

Gợi ý trả lời:

Các mẫu E F và E > F có tác dụng như nhau khi F là phần tử con trực tiếp của E.

VẬN DỤNG

Vận dụng 1 (trang 88): Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát như sau:
a) E1 E2 E3.
b) E1 > E2 > E3.

Gợi ý trả lời:

a) Mẫu định dạng E1 E2 E3: Đây là một mẫu kết hợp (descendant selector) trong CSS, áp dụng cho các phần tử E3 nằm trong phần tử E2, và phần tử E2 nằm trong phần tử E1. Mẫu này không yêu cầu E2 và E3 là con trực tiếp của E1, mà có thể nằm bất kỳ đâu trong cây phân cấp của E1.
Ví dụ:

Trong ví dụ trên, mẫu định dạng .container .parent .child span áp dụng cho phần tử <span> nằm trong phần tử có lớp "child", nằm trong phần tử có lớp "parent", và nằm trong phần tử có lớp "container". Điều này cho phép chúng ta định dạng các phần tử <span> trong một cây phân cấp phức tạp.
b) Mẫu định dạng E1 > E2 > E3: Đây là một mẫu kết hợp (child combinator) trong CSS, áp dụng cho các phần tử E3 là con trực tiếp của E2, và E2 là con trực tiếp của E1. Mẫu này yêu cầu E2 và E3 nằm trực tiếp trong E1.
Ví dụ:

Trong ví dụ trên, mẫu định dạng .parent > .child > span áp dụng cho phần tử <span> là con trực tiếp của phần tử có lớp "child", và phần tử có lớp "child" là con trực tiếp của phần tử có lớp "parent". Điều này cho phép chúng ta định dạng các phần tử <span> chỉ khi chúng nằm trực tiếp trong các phần tử <li> và <ul>, không áp dụng cho các phần tử <span> khác nằm ở cấp độ khác trong cây phân cấp.
Vận dụng 2 (trang 88): Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát như sau:
a) E + F + G.
b) E > F + G

Gợi ý trả lời:

a) Mẫu định dạng E + F + G: Đây là một mẫu kết hợp (adjacent sibling combinator) trong CSS, áp dụng cho các phần tử G là anh em kế tiếp của phần tử F, và phần tử F là anh em kế tiếp của phần tử E. Mẫu này yêu cầu F và G nằm trực tiếp sau E và cùng nằm trong cùng một cấp độ của cây phân cấp.
Ví dụ:

Trong ví dụ trên, mẫu định dạng .container h2 + p + p áp dụng cho các phần tử <p> nằm sau phần tử <h2>, và cùng nằm trực tiếp sau một phần tử <p>. Điều này cho phép chúng ta định dạng các phần tử <p> mà là anh em kế tiếp của phần tử <h2> và nằm trực tiếp sau một phần tử <p>.
b) Mẫu định dạng E > F + G: Đây là một mẫu kết hợp (child combinator và adjacent sibling combinator) trong CSS, áp dụng cho các phần tử G là anh em kế tiếp của phần tử F, và phần tử F là con trực tiếp của phần tử E. Mẫu này yêu cầu F và G nằm trực tiếp sau E và cùng nằm trong cùng một cấp độ của cây phân cấp.
Ví dụ:

Trong ví dụ trên, mẫu định dạng .container > ul + p + ul áp dụng cho các phần tử <ul> nằm trực tiếp sau phần tử <p>, và cùng nằm trực tiếp sau một phần tử <ul> nằm trực tiếp trong phần tử có lớp "container". Điều này cho phép chúng ta áp dụng kiểu CSS cho các phần tử <ul> mà là anh em kế tiếp của một phần tử <p> và nằm trực tiếp sau một phần tử <ul> nằm trực tiếp trong phần tử có lớp "container".

---The end!---

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

CHỦ ĐỀ 7. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

CHỦ ĐỀ 7. ỨNG DỤNG TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI 14 - ĐỊNH DẠNG VĂN BẢN BẰNG CSS (KNTT - CS & ICT)

Bài 14 - Định dạng văn bản bằng CSS (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.79)	Hoạt động 2
Câu hỏi(t.81)	Luyện tập	Vận dụng

Khởi động (trang 76): Quan sát đoạn văn bản được thể hiện trên một trang web trong hình 14.1. Em có nhận xét gì về các định dạng liên quan đến phông chữ của văn bản.

Gợi ý trả lời:

Đoạn văn bản trên sử dụng các phông chữ khác nhau.

1. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Hoạt động 1 (trang 76): Các mẫu định dạng văn bản trong Hình 14.1 đều liên quan đến định dạng kí tự gồm phông chữ, màu chữ và kiểu chữ. Các thuộc tính của CSS liên quan bao gồm định dạng phông chữ (text font), màu chữ (text color) và dòng văn bản (text line). Quan sát và thảo luận để hiểu rõ hơn các mẫu định dạng CSS này.

Gợi ý trả lời:

- Định dạng phông chữ (text font):
+ font-family: Xác định loại phông chữ được sử dụng cho văn bản.
+ font-size: Đặt kích thước của phông chữ.
+ font-style: Xác định kiểu chữ (như font-style: italic).
+ font-weight: Xác định độ đậm của phông chữ (như font-weight: bold).
- Màu chữ (text color):
+ color: Đặt màu cho văn bản.
- Định dạng dòng văn bản (text line):
+ line-height: Xác định khoảng cách giữa các dòng văn bản.
+ text-align: Căn chỉnh văn bản theo chiều ngang (trái, phải, giữa, hoặc canh đều).
+ text-decoration: Xác định trang trí dòng văn bản như gạch chân, gạch ngang, hay gạch trên.
+ text-indent: Thụt lề đầu dòng.

CÂU HỎI

Câu hỏi 1 (trang 79): Giải thích các mẫu định dạng CSS sau:

Gợi ý trả lời:

- Tất cả các tiêu đề <h1> đều có chữ màu đỏ, các dòng căn giữa.
- Tất cả các đoạn văn bản <p> căn đều 2 bên.
Câu hỏi 2 (trang 79): Giả sử mẫu định dạng CSS có định dạng sau:

Hãy kiểm tra tác dụng của CSS này trên một tệp HTML bất kì và đưa ra nhận xét.

Gợi ý trả lời:

Tất cả văn bản phần thân (body) của các trang web đều có màu xanh dương (blue).
Ví dụ:

2. TÍNH KẾ THỪA VÀ CÁCH LỰA CHỌN THEO THỨ TỰ CỦA CSS

Hoạt động 2 (trang 79): Quan sát, tìm hiểu, trao đổi và trả lời các câu hỏi sau:
1. Các mẫu định dạng có tính kế thừa trong mô hình cây HTML không? Nếu một mẫu định dạng thiết lập ở một phần tử HTML thì định dạng đó có áp dụng cho tất cả các phần tử con, cháu của phần tử này không?
2. Nếu có nhiều mẫu CSS cùng được thiết lập cho một phần tử HTML thì trình duyệt sẽ áp dụng các mẫu định dạng CSS này theo thứ tự ưu tiên nào.

Gợi ý trả lời:

1. Các mẫu định dạng trong CSS có tính kế thừa trong mô hình cây HTML. Nếu định dạng CSS áp dụng cho một phần tử HTML nào đó, thì mặc định việc này được kế thừa cho tất cả các phần tử con, cháu.
2. Nếu trong định dạng CSS có nhiều định dạng khác nhau cùng áp dụng cho 1 phần tử thì trình duyệt sẽ chọn định dạng cuối cùng trong danh sách.

CÂU HỎI

Câu hỏi 1 (trang 81): Giả sử có mẫu định dạng sau.

Khi đó toàn bộ văn bản của trang web sẽ mặc định thể hiện với phông có chân, đúng hay sai?

Gợi ý trả lời:

Sai. Toàn bộ văn bản của trang web mặc định sẽ kế thừa từ <body>, và do đó sẽ có phông mặc định sans-serif là phông không chân.
Câu hỏi 2 (trang 81): Giả sử có mẫu định dạng như sau.

Mẫu nào sẽ được áp dụng cho h1, mẫu nào sẽ được áp dụng cho thẻ p.

Gợi ý trả lời:

- Mẫu định dạng:
h1 {text-align: center !important;} sẽ được áp dụng cho các phần tử <h1>.
- Với thẻ p, các mẫu định dạng:
body {font-family: sans-serif;} sẽ được áp dụng.

LUYỆN TẬP

Luyện tập 1 (trang 82): Mỗi phông chữ sau đây thuộc loại nào?

Gợi ý trả lời:

a) Phông có chân. Serif.
b) Phông khoảng cách đều nhau. Monospace.
c) Phông không chân. Sans-serif.
d) Phông kiểu chữ viết tay. Cursive.
e) Phông không chân. Sans-serif.
f) Phông trừu tượng. Fantasy.
g) Phông khoảng cách đều nhau. Monospace.
h) Phông khoảng cách đều nhau. Monospace.
Luyện tập 2 (trang 82): Hãy liệt kê các thuộc tính CSS liên quan đến định dạng đoạn văn bản sau:

Gợi ý trả lời:

Các thuộc tính CSS liên quan đến định dạng đoạn văn bản trên là:
- Dòng đầu tiên sử dụng các định dạng: font-size, color.
- Dòng thứ hai sử dụng các định dạng: text-align, color.
- Hai dòng cuối sử dụng các định dạng: font-family, font-style.

VẬN DỤNG

Vận dụng 1 (trang 82): Tìm hiểu thêm các thuộc tính phông chữ như font-variant và thuộc tính dòng văn bản như letter-space (khoảng cách giữa các kí tự), word-space (khoảng cách các từ) và text-shadow (chữ bóng).

Gợi ý trả lời:

- font-variant: Thuộc tính này được sử dụng để xác định kiểu chữ viết hoa của văn bản. Giá trị phổ biến của thuộc tính này bao gồm:
+ normal: Chữ in thường (mặc định).
+ small caps: Chữ viết hoa nhỏ.
- letter-spacing: Thuộc tính này xác định khoảng cách giữa các kí tự trong một đoạn văn bản. Giá trị của thuộc tính này có thể là số âm (kích thước kí tự thu nhỏ lại) hoặc số dương (kích thước kí tự mở rộng ra). Ví dụ: letter-spacing: 2px.
- word-spacing: Thuộc tính này xác định khoảng cách giữa các từ trong một đoạn văn bản. Giá trị của thuộc tính này cũng có thể là số âm hoặc số dương. Ví dụ: word-spacing: 5px.
- text-shadow: Thuộc tính này cho phép bạn thêm hiệu ứng bóng cho văn bản. Bạn có thể xác định màu sắc của bóng, độ mờ, và vị trí của bóng. Ví dụ: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5).
Vận dụng 2 (trang 82): Với bài đọc thêm Lịch sử CSS (Bài 13), em hãy thiết lập hai tệp CSS khác nhau để định dạng cho trang web mô tả bài đọc thêm này. Hai kiểu định dạng được thiết lập cần khác nhau về phông chữ, cỡ chữ và màu chữ.

Gợi ý trả lời:

- Kiểu 1: