Giải Tin học 12 - Định hướng khoa học máy tính trang 96
Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 96–97
Hai trang này thuộc bài thực hành về tạo bảng bằng HTML kết hợp định dạng CSS, sau đó là phần Luyện tập và Vận dụng. Mình tóm tắt lý thuyết rồi giải chi tiết từng câu nhé.
Tóm tắt lý thuyết
Phần này hướng dẫn tạo lại "Bảng tên màu CSS" (Hình 16.5) gồm 16 màu cơ bản với 4 cột: Tên màu, mã #hex, mã #rgb(r,g,b) và ô Thể hiện màu.
Các thẻ tạo bảng:
: tạo bảng....
: tạo tiêu đề cho bảng.... : tạo một hàng (table row).... : tạo một ô dữ liệu (table data).... : tạo ô tiêu đề (table header), chữ in đậm và căn giữa mặc định....
Lưu ý quan trọng: ô cuối mỗi hàng (cột Thể hiện) được tô màu nền bằng thuộc tính nội tuyến:
Bước 2 dùng khối để định dạng khung, viền, độ rộng cột, màu nền ô tiêu đề và tiêu đề bảng. Vài điểm cần nhớ:
border: 4px solid magenta;viền dày 4px, nét liền, màu hồng cánh sen.td { width: 25%; }chia đều 4 cột mỗi cột chiếm 25%.th { background-color: rgb(255,255,0); }ô tiêu đề nền vàng.captionđược phóng to chữfont-size: 200%, in đậm, có viền xanh lá.
LUYỆN TẬP
Bài 1
Đề: 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ì?
Trả lời: Có, hoàn toàn ẩn được. Có hai cách phổ biến:
| Lệnh CSS | Tác dụng |
|---|---|
display: none; | Ẩn hẳn phần tử, không chiếm chỗ trên trang (các phần tử khác dồn lại lấp chỗ trống). |
visibility: hidden; | Ẩn phần tử nhưng vẫn giữ nguyên khoảng trống của nó trên trang. |
Ví dụ:
p { display: none; }
Giải thích lý do: cả hai đều làm phần tử biến mất khỏi tầm nhìn, nhưng khác nhau ở chỗ có chiếm chỗ hay không. Nếu muốn xóa hẳn khỏi bố cục thì dùng display: none;.
Bài 2
Đề: Hãy giải thích ý nghĩa định dạng sau:
.test .test_more {background-color: red;}
Trả lời: Đây là bộ chọn hậu duệ (descendant selector). Điểm mấu chốt là giữa .test và .test_more có khoảng trắng.
Ý nghĩa: định dạng nền màu đỏ cho mọi phần tử có lớp (class) test_more nằm bên trong (là con, cháu... ở bất kỳ cấp nào) của một phần tử có lớp test.
Ví dụ minh họa:
Đoạn này sẽ có nền đỏ
Đoạn này KHÔNG có nền đỏ vì không nằm trong .test
Giải thích lý do: nếu viết liền không khoảng trắng .test.test_more thì nghĩa hoàn toàn khác — đó là phần tử mang cả hai lớp cùng lúc. Khoảng trắng chính là dấu hiệu của quan hệ "nằm bên trong".
VẬN DỤNG
Bài 1
Đề: Trang web có rất nhiều thẻ p, trong đó ba đoạn quan trọng nhất là P1, P2, P3. Làm sao định dạng P1 khác biệt, còn P2 và P3 có cùng kiểu (cũng khác biệt), các đoạn còn lại giống nhau?
Trả lời: Đây đúng là tình huống dùng lớp (class) trong CSS. Cách giải quyết:
Bước 1 – Định dạng chung cho mọi đoạn bằng bộ chọn thẻ p:
p { color: black; font-size: 16px; }
Bước 2 – Tạo một lớp riêng cho P1 và một lớp riêng cho P2, P3:
.p1 { color: red; font-weight: bold; } /* dành riêng cho P1 */
.nhom23 { color: blue; font-style: italic; } /* dùng chung cho P2 và P3 */
Bước 3 – Gán lớp trong HTML:
Đoạn thường...
Đây là P1
Đây là P2
Đây là P3
Đoạn thường...
Giải thích lý do:
- Bộ chọn thẻ
páp dụng cho tất cả nên các đoạn còn lại tự động giống nhau. - P1 mang lớp riêng
.p1nên khác biệt hoàn toàn. - P2 và P3 dùng chung một lớp
.nhom23nên giống nhau và khác với phần còn lại. Một lớp có thể gán cho nhiều phần tử nên rất tiện cho nhóm P2, P3.
Bài 2
Đề: Có thể thiết lập định dạng cho khung với viền trên, dưới, trái, phải khác nhau không? Hãy trình bày cách làm bằng CSS.
Trả lời: Có. CSS cho phép định dạng riêng từng cạnh viền bằng các thuộc tính:
| Thuộc tính | Cạnh tác động |
|---|---|
border-top | viền trên |
border-bottom | viền dưới |
border-left | viền trái |
border-right | viền phải |
Mỗi thuộc tính nhận ba giá trị: độ dày, kiểu nét (solid, dashed, dotted...) và màu.
Ví dụ một khung có bốn cạnh khác nhau hoàn toàn:
div {
border-top: 5px solid red;
border-bottom: 2px dashed blue;
border-left: 3px dotted green;
border-right: 4px double black;
}
Ngoài ra còn có thể tách nhỏ hơn nữa bằng border-top-width, border-top-style, border-top-color... cho từng thuộc tính của từng cạnh.
Giải thích lý do: thuộc tính border viết gọn áp dụng cho cả bốn cạnh giống nhau, nhưng khi cần mỗi cạnh một kiểu thì ta tách ra theo từng cạnh như trên. Đây là cách thường dùng để tạo các hiệu ứng trang trí, ví dụ chỉ gạch chân dưới tiêu đề bằng border-bottom.
