BÀI F11 - ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ <DIV>
(CTST - CS & ICT)

BÀI F11 - ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ <DIV> (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.

Khởi động (trang 162 sách ict, trang 129 sách cs)
 Theo em nên dùng thẻ gì để trình bày một bảng danh sách tên học sinh trên trang web?
Gợi ý trả lời
 Theo em, nên dùng thẻ <table< để trình bày bảng danh sách tên học sinh trên trang web, vì đây là thẻ HTML chuyên dùng để tạo và hiển thị bảng.
Làm (trang 163 sách ict, trang 130 sách cs)
 Viết mã lệnh CSS để định kiểu nền màu vàng nhạt cho các hàng lẻ trong bảng.
Gợi ý trả lời
  tr:nth-child(odd): hàng lẻ trong bảng.
  background-color: thuộc tính màu nền.
  #ffffcc: màu vàng nhạt.
Làm (trang 165 sách ict, trang 132 sách cs)
 Viết mã lệnh CSS để tạo ra 3 vùng A, B, C lần lượt nằm kể nhau theo phương ngang.
Gợi ý trả lời
Code HTML:
Code CSS:
Luyện tập (trang 165 sách ict, trang 132 sách cs)
1. Em hãy trình bày những khai báo vùng chọn và thuộc tính dùng để định kiểu đường viền và màu nền cho bảng.
2. Em hãy trình bày những thuộc tính và giá trị dùng để định kiểu cho thẻ <div> giúp tạo bố cục trang web.
3. Ưu điểm của việc tạo bố cục trang web bằng các thẻ <div> là gì?
Gợi ý trả lời
1. Khai báo vùng chọn và thuộc tính dùng để định kiểu đường viền và màu nền cho bảng.
 - Vùng chọn: Sử dụng các selector như table, th, td, hoặc tr.
 - Thuộc tính định kiểu đường viền và màu nền:
  + border: xác định kiểu và độ dày đường viền.
  + border-collapse: gộp hoặc tách đường viền.
  + background-color: đặt màu nền.
 - Code CSS tham khảo:
2. Những thuộc tính và giá trị dùng để định kiểu cho thẻ <div> giúp tạo bố cục trang web.
 Một số thuộc tính thường dùng:
  - width, height: xác định kích thước vùng.
  - background-color: màu nền.
  - margin, padding: khoảng cách.
  - float hoặc display: sắp xếp vị trí.
  - border: viền.
  - box-sizing: kiểm soát cách tính kích thước.
 Code CSS tham khảo:
3. Ưu điểm của việc tạo bố cục trang web bằng các thẻ <div> là:
  - Dễ dàng tùy biến và định kiểu với CSS.
  - Tạo cấu trúc linh hoạt cho trang web.
  - Giúp tách biệt nội dung và kiểu trình bày.
  - Hỗ trợ thiết kế giao diện phản hồi (responsive).
Vận dụng (trang 169 sách ict, trang 136 sách cs)
 Em hãy thực hiện các yêu cầu dưới đây.
1. Chỉnh sửa trang chủ của kỉ yếu (tệp index.html và tệp layout.css) sao cho bố cục gồm 3 vùng:
  Vùng 1: Dùng để chứa thanh điều hướng nằm ngang (đã tạo ở bài học trước).
  Vùng 2: Dùng để hiển thị nội dung, cụ thể trang chủ có nội dung giới thiệu về lớp.
  Vùng 3: Dùng để làm vùng chân trang.
  Hình 11 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.
2. Chỉnh sửa trang web thanhvienlop.html (đã thực hiện ở những bài học trước) sao cho bố cục cũng gồm 3 phần như trang chủ của trang web index.html. Trong đó, đặt bảng thành viên lớp vào vùng 2 và sử dụng CSS để định kiểu cho bảng này.
  Hình 12 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.
Gợi ý trả lời
1. Chỉnh sửa trang chủ của kỉ yếu (tệp index.html và tệp layout.css):
Code HTML tham khảo:
Code CSS tham khảo:
2. Chỉnh sửa trang web thanhvienlop.html tương tự như index.html:
Code HTML tham khảo:
html1
html2
Code CSS tham khảo:
css1
css2

---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Ố
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 F10 - ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH
(CTST - CS & ICT)

BÀI F10 - ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH (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.

Khởi động (trang 156 sách ict, trang 123 sách cs)
 Điều gì sẽ xảy ra khi nháy chọn siêu liên kết bất kì của trang web?
Gợi ý trả lời
 Khi nháy chọn một siêu liên kết (thẻ <a>), trình duyệt sẽ điều hướng đến địa chỉ được chỉ định trong thuộc tính href. Đó có thể là:
  - Một trang web khác,
  - Một tệp tin,
  - Một vị trí khác trong cùng trang,
  - Hoặc một hành động như tải xuống,...
Làm (trang 158 sách ict, trang 125 sách cs)
 Viết mã lệnh CSS để khi người dùng di chuyển con trỏ chuột đến siêu liên kết sẽ phóng to cỡ chữ và có màu nền bao quanh (màu sắc tuỳ ý).
Gợi ý trả lời
 Mã lệnh CSS:
 Giải thích:
  :hover là trạng thái khi di chuột qua liên kết.
  Các thuộc tính như font-size, background-color dùng để tạo hiệu ứng nổi bật.
Làm (trang 159 sách ict, trang 126 sách cs)
 Em hãy thay đổi lần lượt các giá trị của thuộc tính list-style-position, đồng thời thay đổi độ rộng của trang web để xem kết quả hiển thị.
Gợi ý trả lời
 1. list-style-position là gì?
 Thuộc tính list-style-position xác định vị trí của dấu đầu dòng (bullet hoặc số thứ tự) trong danh sách.
  outside (mặc định): Dấu đầu dòng nằm bên ngoài nội dung phần tử <li>.
  inside: Dấu đầu dòng nằm bên trong khối nội dung của phần tử <li>.
 2. Ví dụ HTML + CSS
 3. Thay đổi độ rộng để quan sát
 Thử sửa width: 300px; thành các giá trị như 500px, 200px, v.v. để thấy rõ:
  - Ở chế độ inside, khi dòng bị dài và xuống hàng, dấu đầu dòng nằm trong vùng chữ.
  - Ở chế độ outside, dấu đầu dòng vẫn nằm bên trái ngoài vùng nội dung, không bị đẩy vào.
Luyện tập (trang 160 sách ict, trang 127 sách cs)
1. Thảo luận với bạn và cho biết các trạng thái của siêu liên kết khi có sự tương tác của người dùng. Trình bày cách định kiểu CSS ứng với mỗi trạng thái đó.
2. Em hãy cho biết cách định kiểu cho các mục trong danh sách trong CSS.
Gợi ý trả lời
1. Các trạng thái của siêu liên kết và cách định kiểu:
 Ví dụ:
  a:link { color: blue; }
  a:visited { color: purple; }
  a:hover { background-color: yellow; }
  a:active { color: red; }
2. Cách định kiểu cho các mục trong danh sách trong CSS:
 Có 2 loại danh sách trong HTML:
  - Danh sách có thứ tự: <ol>
  - Danh sách không thứ tự: <ul<
  - Mỗi mục: <li<
 Cách định kiểu CSS:
 Ghi chú: có thể dùng list-style-position: inside hoặc outside để điều chỉnh vị trí dấu đầu dòng.
Vận dụng (trang 161 sách ict, trang 128 sách cs)
 Em hãy thực hiện các yêu cầu dưới đây.
1. Trong tệp portfolio.html, định kiểu riêng cho các mục trong danh sách Các hoạt động đã tham gia như sau:
  a) Đánh số đầu dòng cho mỗi mục.
  b) Mỗi mục được đóng khung và màu sắc tuỳ ý.
2. Tạo một tệp HTML mới, trong đó bao gồm một thanh trình đơn mới theo các yêu cầu sau:
  a) Thanh trình đơn gồm các mục sau: Trang chủ, Học tập, Phong trào và Liên lạc.
  b) Mỗi mục là một siêu liên kết đến một tệp HTML tương ứng.
  c) Thanh trình đơn nằm bên trái trang web, theo phương dọc.
  d) Định kiểu màu sắc tuỳ ý khi người dùng tương tác với thanh trình đơn.
Gợi ý: Có thể sử dụng các phần tử như bảng hoặc khung.
Gợi ý trả lời
1. Định kiểu danh sách "Các hoạt động đã tham gia" trong portfolio.html:
  a) Đánh số đầu dòng cho mỗi mục.
  b) Đóng khung và màu sắc cho mỗi mục:
2. Tạo một tệp HTML mới và thực hiện hết các yêu cầu a) b) c) d):
Code HTML:
Code CSS:
 Thanh trình đơn nằm bên trái vì dạng khối dọc (display: block), mỗi mục cách nhau bằng đường kẻ và đổi màu khi di chuột qua.

---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Ố
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 F9 - MỘT SỐ KĨ THUẬT ĐỊNH KIỂU BẰNG VÙNG CHỌN TRONG CSS (CTST - CS & ICT)

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.

Khởi động (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.
Làm (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.
Làm (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:
Luyện tậ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:
Vận dụng (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íchCá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
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Ố
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 F8 - MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS (CTST - CS & ICT)

BÀI F8 - MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA 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.

Khởi động (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)
Làm (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
Làm (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
Làm (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:
Làm (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.
Luyện tập (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%)
Vận dụng (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Ố
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:
Kho học liệu tin học 10
Kho học liệu tin học 11
Kho học liệu tin học 12

Tổng số lượt xem

Chăm chỉ chiến thắng tài năng
khi tài năng không chịu chăm chỉ.

- Tim Notke -

Bản quyền
Liên hệ
Chat Zalo
Chat Facebook