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

BÀI F9 - MỘT SỐ KĨ THUẬT ĐỊNH KIỂU BẰNG VÙNG CHỌN TRONG CSS (CTST - CS & ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). 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.

(trang 150 sách ict, trang 117 sách cs)

Theo em, khi định kiểu cho các đề mục h1, việc viết mã lệnh CSS cho thuộc tính style trong từng thẻ <h1> gặp phải những hạn chế nào?

Gợi ý trả lời

- Phải lặp đi lặp lại cùng đoạn mã CSS cho mỗi thẻ.
- Gây khó khăn khi chỉnh sửa – thay đổi 1 thuộc tính cần sửa nhiều nơi.
- Làm mã HTML dài, rối và khó bảo trì.
- Không tận dụng được sức mạnh tái sử dụng của CSS.

(trang 151 sách ict, trang 118 sách cs)

Em hãy trình bày lợi ích khi định kiểu CSS bằng cách khai báo vùng chọn.

Gợi ý trả lời

Lợi ích khi định kiểu CSS bằng cách khai báo vùng chọn là:
- Giúp tách riêng phần nội dung và phần định dạng.
- Cho phép tái sử dụng mã CSS, tiết kiệm thời gian.
- Tăng tính linh hoạt, dễ sửa đổi, cập nhật toàn bộ nhanh chóng.
- Giúp mã HTML ngắn gọn, rõ ràng hơn.

(trang 153 sách ict, trang 120 sách cs)

Theo em, điểm khác biệt giữa khai báo vùng chọn là tên thẻ và khai báo vùng chọn là tên lớp là gì?

Gợi ý trả lời

Điểm khác biệt giữa khai báo vùng chọn là tên thẻ và khai báo vùng chọn là tên lớp:

(trang 153 sách ict, trang 120 sách cs)

1. Em hãy cho biết khái niệm vùng chọn CSS.
2. Theo em, có những kĩ thuật nào để khai báo vùng chọn CSS cơ bản?

Gợi ý trả lời

1. Khái niệm vùng chọn CSS.
Vùng chọn CSS là phần xác định các phần tử HTML nào sẽ được áp dụng quy tắc định dạng CSS.
2. Những kĩ thuật dùng để khai báo vùng chọn CSS cơ bản:

(trang 155 sách ict, trang 122 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
1. Định kiểu màu sắc tuỳ ý cho phần nền và phần văn bản của các danh sách Sở thích và Các hoạt động đã tham gia bằng vùng chọn tên lớp.
2. Thay đổi định kiểu cho đề mục Lịch sinh hoạt hằng tuần với các thuộc tính tuỳ ý bằng vùng chọn id.
3. Định kiểu với màu sắc tuỳ ý để làm nổi bật một số ô trong bảng Lịch sinh hoạt hằng tuần bằng vùng chọn id hoặc tên lớp.

Gợi ý trả lời

1. Định kiểu màu sắc bằng vùng chọn tên lớp:

Ghi chú: .so-thich và .hoat-dong là tên lớp đặt cho các phần danh sách tương ứng.
2. Thay đổi định kiểu đề mục Lịch sinh hoạt hằng tuần bằng id:

3. Làm nổi bật một số ô trong bảng Lịch sinh hoạt hằng tuần bằng vùng chọn id hoặc tên lớp.
Giả sử bảng có cấu trúc như sau:

Định kiểu bằng lớp noibat:

---The end!---

CÙNG CHUYÊN MỤC:

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

Bài A1. Giới thiệu Trí tuệ nhân tạo
Bài A2. Trí tuệ nhân tạo và cuộc sống
Bài A3(ict). Thực hành kết nối thiết bị số với máy tính
Bài A4(ict). Thực hành kết nối thiết bị số với máy tính (tiếp theo)

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

Bài B1. Thiết bị và giao thức mạng
Bài B2. Các chức năng mạng của hệ điều hành
Bài B3. Thực hành kết nối và sử dụng mạng trên thiết bị thông minh
Bài B4(cs). Vai trò của các thiết bị mạng
Bài B5(cs). Đường truyền hữu tuyến và vô tuyến
Bài B6(cs). Thiết kế mạng nội bộ
Bài B7(cs). Thực hành thiết kế mạng nội bộ

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

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

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

Bài E1(ict). Tạo trang web, thiết lập giao diện và xem trước trang web
Bài E2(ict). Tạo, hiệu chỉnh trang web và thiết kế thanh điều hướng
Bài E3(ict). Tạo văn bản, chèn hình ảnh và tạo chân trang
Bài E4(ict). Sử dụng Content Blocks, Buttun, Divider
Bài E5(ict). Nhúng mã và tạo băng chuyền hình ảnh
Bài E6(ict). Chèn YouTube, Calendar, Drive và Collapsible group
Bài E7(ict). Sử dụng Map, Form và các thiết lập trang web
Bài E8(ict). Hoàn thiện và xuất bản trang web

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

Bài F1. HTML và trang web
Bài F2. Tạo và định dạng trang web với các thẻ HTML
Bài F3. Tạo bảng và khung trong trang web với HTML
Bài F4. Thêm dữ liệu đa phương tiện vào trang web
Bài F5. Tạo biểu mẫu trong trang web
Bài F6. Dự án tạo trang web
Bài F7. Giới thiệu CSS
Bài F8. Một số thuộc tính cơ bản của CSS
Bài F9. Một số thuộc tính định kiểu bằng vùng chọn trong CSS
Bài F10. Định kiểu CSS cho siêu liên kết và danh sách
Bài F11. Định kiểu CSS cho bảng và phần tử div
Bài F12. Định kiểu CSS cho biểu mẫu
Bài F13. Dự án tạo trang web (tiếp theo)
Bài F14(cs). Học máy
Bài F15(cs). Khoa học dữ liệu
Bài F16(cs). Máy tính, thuật toán và Khoa học dữ liệu
Bài F17(cs). Hoạt động trải nghiệm về Khoa học dữ liệu
Bài F18(cs). Kĩ thuật mô phỏng
Bài F19(cs). Sử dụng phần mềm mô phỏng

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

Bài G1. Nhóm nghề dịch vụ thuộc ngành Công nghệ thông tin
Bài G2. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài G3. Một số nghề ứng dụng tin học và một số ngành thuộc lĩnh vực Công nghệ thông tin

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

☞ Kiểm tra tin học 12 - Chân trời sáng tạo
☞ Lý thuyết tin học 12 - Chân trời sáng tạo
☞ Thực hành tin học 12 - Chân trời sáng tạo
☞ Gợi ý trả lời tin học 12 - Chân trời sáng tạo
☞ Trắc nghiệm tin học 12 - Chân trời sáng tạo
☞ Bài giảng điện tử tin học 12 - Chân trời sáng tạo

BÀI F8 - MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS (CTST - CS & ICT)

(trang 141 sách ict, trang 108 sách cs)

Đối với nội dung là văn bản trong trang web, em có thể thực hiện những định kiểu như thế nào? Hãy nêu những đặc điểm có thể định kiểu của văn bản.

Gợi ý trả lời

Những đặc điểm có thể định kiểu của văn bản trong trang web:
- Màu sắc chữ (color)
- Kích thước chữ (font-size)
- Kiểu chữ (font-family)
- Kiểu chữ nghiêng, in đậm, gạch chân (font-style, font-weight, text-decoration)
- Canh lề (text-align)
- Viết hoa thường (text-transform)
- Khoảng cách dòng, chữ (line-height, letter-spacing)

(trang 142 sách ict, trang 109 sách cs)

Viết mã lệnh CSS để định kiểu cho những thành tích đạt được còn lại trong mục Các hoạt động đã tham gia với những giá trị khác cho các thuộc tính.

Gợi ý trả lời

(trang 143 sách ict, trang 110 sách cs)

Viết mã lệnh CSS để định kiểu cho Các hoạt động đã tham gia thành chữ in hoa và khoảng cách giữa các kí tự là 2 pixels.

Gợi ý trả lời

(trang 144 sách ict, trang 111 sách cs)

Em hãy định kiểu độ trong suốt của nền là 0.3 và quan sát kết quả.

Gợi ý trả lời

Định kiểu độ trong suốt của nền là 0.3:

Nếu có ảnh nền thì câu lệnh như bên dưới:

(trang 146 sách ict, trang 113 sách cs)

Theo em, thay đổi các giá trị nào của vùng đệm thì phần văn bản nằm sát cạnh dưới của đường viền?

Gợi ý trả lời

Theo em, giảm hoặc đặt padding-bottom = 0px thì phần văn bản nằm sát cạnh dưới của đường viền.

(trang 146 sách ict, trang 113 sách cs)

1. Em hãy kể tên một số thuộc tính dùng để định kiểu phông chữ, văn bản, nền, đường viền, lề và vùng đệm.
2. Thảo luận với bạn và nêu một số đơn vị có thể được dùng để định kiểu kích thước cho những thành phần trong trang web.
3. Theo em, có những cách mô tả màu sắc nào trong mã lệnh CSS?

Gợi ý trả lời

1. Một số thuộc tính dùng để định kiểu phông chữ, văn bản, nền, đường viền, lề và vùng đệm:

2. Một số đơn vị có thể được dùng để định kiểu kích thước cho những thành phần trong trang web.
- px (pixel): đơn vị phổ biến nhất.
- pt (point): dùng trong in ấn.
- %: phần trăm so với thành phần chứa nó.
- em, rem: liên quan đến cỡ chữ mặc định.
3. Những cách mô tả màu sắc trong mã lệnh CSS:
- Tên màu: red, blue, green,...
- Mã hex: #FF0000, #00FF00
- RGB: rgb(255, 0, 0)
- RGBA (có độ trong suốt): rgba(255, 0, 0, 0.5)
- HSL: hsl(0, 100%, 50%)

(trang 148+149 sách ict, trang 115+116 sách cs)

1. Em hãy định kiểu cho các thông tin cá nhân bằng phông chữ Georgia, họ tên có kích thước 24 pt, các thông tin còn lại có kích thước 20 pt.
2. Thực hiện tăng hoặc giảm tuỳ ý độ trong suốt của ảnh nền ở mục Giới thiệu chung để được kết quả như Hình 9.

3. Đối với mỗi ảnh trong mục Nội dung yêu thích, hãy định kiểu bo tròn 4 góc của ảnh để được kết quả như Hình 10.
4. Em hãy tìm hiểu thêm những thuộc tính và giá trị khác có thể dùng để định kiểu cho những thành phần web trong bài học.

Gợi ý trả lời

1. Định kiểu cho các thông tin cá nhân:

2. Thay đổi độ trong suốt của ảnh nền ở mục Giới thiệu chung:

3. Định kiểu ảnh bo tròn 4 góc:

4. Những thuộc tính và giá trị khác có thể dùng để định kiểu cho những thành phần web trong bài học:
- box-shadow: tạo bóng cho phần tử.
- transition: tạo hiệu ứng chuyển động mượt.
- text-shadow: tạo bóng cho chữ.
- display, position, z-index: điều khiển bố cục.
- overflow, visibility, cursor: điều khiển hành vi phần tử.

---The end!---

CÙNG CHUYÊN MỤC:

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

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

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

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

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

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

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

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

BÀI F7 - GIỚI THIỆU CSS (CTST - CS & ICT)

(trang 134 sách ict, trang 101 sách cs)

Trong trang web portfolio.html đã tạo ở những bài học trước, em hãy trình bày cách bổ sung mã lệnh để các đề mục đánh dấu bằng thẻ <h1> được tô màu xanh.
Giả sử em muốn thay đổi màu sắc khác và đổ bóng để các đề mục nổi bật hơn. Có thuộc tính nào đáp ứng yêu cầu này không?

Gợi ý trả lời

Cách bổ sung mã CSS để đề mục <h1> có màu xanh trong portfolio.html:
- Dùng thuộc tính style trực tiếp trong thẻ HTML:
<h1 style="color: green;">Giới thiệu bản thân</h1>
- Hoặc dùng trong phần <style>:

Nếu muốn thay màu và đổ bóng cho đề mục thì sử dụng thuộc tính text-shadow. Ví dụ:

(trang 135 sách ict, trang 102 sách cs)

Em hãy trình bày một số lợi ích của CSS trong việc xây dựng các trang web.

Gợi ý trả lời

Một số lợi ích của CSS trong việc xây dựng các trang web:
- Giúp tách biệt nội dung và định dạng ⇒ dễ bảo trì.
- Tăng tính thống nhất và đồng bộ giữa các trang.
- Tiết kiệm thời gian, dễ tái sử dụng mã CSS.
- Giúp trang web đẹp mắt và chuyên nghiệp hơn.
- Hỗ trợ thiết kế giao diện đáp ứng nhiều thiết bị.

(trang 136 sách ict, trang 103 sách cs)

1. Em hãy định kiểu cho kích thước phông chữ của các phần tử <h1> trong tệp portfolio.html là 60 pixels. Gợi ý: Sử dụng thuộc tính font-size với giá trị là 60px.
2. Em hãy thay đổi màu cho riêng để mục Giới thiệu chung từ màu xanh sang một màu sắc tuỳ ý.

Gợi ý trả lời

1. Định kiểu <h1> có kích thước 60px:

2. Đổi màu phần “Giới thiệu chung”:
- Gán lớp (class) cho phần đó:
<h2 class="gioithieu">Giới thiệu chung</h2>
- Trong CSS viết mã lệnh:
.gioithieu {
color: darkblue;
}

(trang 137 sách ict, trang 104 sách cs)

1. Theo em, HTML và CSS khác nhau ở điểm nào?
2. Em hãy mô tả các cách chèn mã lệnh CSS vào trang web.
3. Giả sử trong tệp .css, mã lệnh được viết là h1 { color: red; }, còn trong tệp .html, thẻ <h1> được viết là <h1 style="color: blue">. Khi hiển thị, đề mục h1 này sẽ có màu gì?

Gợi ý trả lời

1. Điểm khác nhau giữa HTML và CSS:
- HTML (HyperText Markup Language): dùng để xây dựng cấu trúc nội dung của trang web. Ví dụ như tạo tiêu đề, đoạn văn, bảng, hình ảnh, liên kết, ...
- CSS (Cascading Style Sheets): dùng để định dạng giao diện và trình bày của trang web như màu sắc, kích thước, kiểu chữ, vị trí, khoảng cách, v.v.
2. Cách chèn mã lệnh CSS vào trang web:
Có 3 cách chèn CSS vào trang web:
- Internal CSS (CSS nội bộ): viết trong thẻ <style< đặt trong phần <head< của tài liệu HTML.

- External CSS (CSS ngoài): viết trong một file .css riêng và liên kết vào HTML bằng thẻ <link>.

- Inline CSS (CSS nội tuyến): viết trực tiếp trong thẻ HTML bằng thuộc tính style.
<h1 style="color: blue;">Tiêu đề</h1>
3. Khi hiển thị, đề mục h1 sẽ có màu xanh (blue). Vì CSS nội dòng (inline) có độ ưu tiên cao nhất.

(trang 140 sách ict, trang 107 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
1. Chèn mã lệnh CSS để định kiểu cho tên của mình trong trang web portfolio.html với màu sắc, kích thước, hiệu ứng độ bóng và khoảng cách của các kí tự tuỳ ý sao cho nổi bật và đẹp mắt.
2. Chèn mã lệnh CSS để tô màu xanh cho hàng tiêu đề của bảng trong Nhiệm vụ 2 ở THỰC HÀNH đồng thời thay đổi màu chữ thành màu trắng.
3. Chèn mã lệnh CSS để định kiểu cho các mục <li> của các danh sách <ul> sao cho: Các mục được đánh dấu đầu dòng bằng biểu tượng đĩa tròn; phần nội dung của mỗi mục được tô nền vàng nhạt và đóng khung viền vàng đậm, bo tròn 4 góc.
Gợi ý: Sử dụng thuộc tính list-style-type với giá trị circle để thay đổi biểu tượng đánh dấu đầu dòng; thuộc tính background-color và border lần lượt cho màu nền và viển của mỗi mục; thuộc tính border-radius với giá trị 10px để bo tròn 4 góc của khung. Ngoài ra, có thể thêm thuộc tính padding với giá trị 10px để tạo khoảng trống bao quanh phần văn bản nằm trong khung.
Hình 4 là một ví dụ kết quả sau khi định kiểu bằng mã lệnh CSS.

Gợi ý trả lời

1. Chèn CSS để định kiểu cho tên của mình:

2. Tô màu hàng tiêu đề bảng:

3. Định dạng <li> trong danh sách <ul>:

---The end!---

CÙNG CHUYÊN MỤC:

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

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

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

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

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

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

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

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

BÀI F5 - TẠO BIỂU MẪU TRONG TRANG WEB (CTST - CS & ICT)

(trang 127 sách ict, trang 94 sách cs)

Khi truy xuất trang web, người dùng không chỉ xem nội dung mà còn muốn tương tác với trang web, chẳng hạn nhập vào nội dung mới. Em hãy nêu một số tình huống mà em thường tương tác với trang web và mô tả cụ thể các thao tác này.

Gợi ý trả lời

Một số tình huống mà em thường tương tác với trang web:
- Đăng nhập vào tài khoản học tập: nhập tên đăng nhập, mật khẩu và nhấn nút “Đăng nhập”.
- Gửi ý kiến phản hồi: nhập họ tên, email, nội dung phản hồi, rồi nhấn “Gửi”.
- Thực hiện khảo sát: chọn đáp án trắc nghiệm, điền nhận xét và nhấn “Gửi”.

(trang 127 sách ict, trang 94 sách cs)

Em hãy kể tên một số biểu mẫu phổ biến trên các trang web.

Gợi ý trả lời

Một số biểu mẫu phổ biến trên các trang web:
- Biểu mẫu đăng nhập
- Biểu mẫu đăng ký tài khoản
- Biểu mẫu liên hệ/ý kiến phản hồi
- Biểu mẫu khảo sát, kiểm tra, đăng ký thông tin

(trang 130 sách ict, trang 97 sách cs)

Em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần sau:
a) Hộp văn bản để người dùng nhập địa chỉ email.
b) Hộp kiểm để người dùng chọn thêm một câu lạc bộ.
c) Nút nhấn để xoá dữ liệu hiện có trên biểu mẫu.

Gợi ý trả lời

a) Hộp văn bản nhập email:
<label for="email">Email:</label>
<input type="email" id="email" name="email">
b) Hộp kiểm chọn thêm một câu lạc bộ:
<label><input type="checkbox" name="clb" value="cntt"> Câu lạc bộ Tin học</label>
c) Nút nhấn xoá dữ liệu biểu mẫu:
<input type="reset" value="Xoá dữ liệu">

(trang 130 sách ict, trang 97 sách cs)

1. Em hãy nêu khái niệm biểu mẫu web và một số ví dụ biểu mẫu thông dụng.
2. Thảo luận với bạn và kể tên một số thành phần nhập liệu trên biểu mẫu web và thẻ HTML tương ứng để tạo các thành phần đó.
3. Theo em, tên, giá trị và ý nghĩa của những thuộc tính trong thẻ <input> là gì?

Gợi ý trả lời

1. Khái niệm biểu mẫu web và ví dụ:
- Biểu mẫu web là vùng trên trang web cho phép người dùng nhập dữ liệu hoặc tương tác với trang web.
- Ví dụ: biểu mẫu đăng ký, biểu mẫu khảo sát, biểu mẫu phản hồi...
2. Một số thành phần nhập liệu trên biểu mẫu web và thẻ HTML tương ứng:

3. Tên, giá trị và ý nghĩa của các thuộc tính trong thẻ <input<:

(trang 131 sách ict, trang 98 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
1. Bổ sung mã lệnh HTML vào tệp login.html để thêm các thành phần nhập liệu sau:
a) Hộp kiểm có nhãn Ghi nhớ cho lần đăng nhập sau.
b) Đường liên kết Quên mật khẩu? để điều hướng đến trang web recovery.html.
c) Thay đổi kiểu chữ và màu sắc các thành phần của biểu mẫu trong tệp login.html vừa tạo.
2. Tạo biểu mẫu web để người dùng là học sinh làm bài kiểm tra với các yêu cầu sau:
a) Trang web thongtin.html có biểu mẫu gồm 3 hộp văn bản nhập họ tên, lớp, số thứ tự trong lớp và nút nhấn để chuyển đến trang web cauhoi.html.
b) Trang web cauhoi.html có biểu mẫu gồm 3 câu hỏi trắc nghiệm, mỗi câu có 4 phương án lựa chọn, một câu hỏi tự luận và nút nhấn để chọn tệp bài làm tự luận trên máy tính.
c) Tìm hiểu cách tạo hộp danh sách chọn lớp để thay thế cho hộp văn bản nhập lớp.
Gợi ý:
Sử dụng thẻ <input> và chỉ định giá trị number cho thuộc tính type để tạo hộp văn bản nhập số thứ tự. Để chuyển đến trang web cauhoi.html, em chèn thêm thuộc tính action vào thẻ <form>: <form action="cauhoi.html">.
Sử dụng thẻ <input> và chỉ định giá trị file cho thuộc tính type để tạo nút nhấn chọn tệp trên máy tính.
Sử dụng thẻ <select> và <option> để tạo hộp danh sách chọn lớp.

Gợi ý trả lời

1. Bổ sung mã lệnh HTML vào tệp login.html:
a) Hộp kiểm “Ghi nhớ”
<label><input type="checkbox" name="remember"> Ghi nhớ cho lần đăng nhập sau</label>
b) Đường liên kết "Quên mật khẩu?"
<a href="recovery.html">Quên mật khẩu?</a>
c) Đổi kiểu chữ và màu sắc bằng CSS: