Giải Tin học 12 - Định hướng khoa học máy tính trang 92
Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 92–93
Tóm tắt lý thuyết
Phần này thuộc Bài 16 – Định dạng khung bằng CSS. Có hai ý chính:
- Phân loại phần tử HTML
- Mọi phần tử HTML đều thuộc một trong hai loại: khối (block) hoặc nội tuyến (inline).
- Có thể dùng thuộc tính
displayđể chuyển đổi loại phần tử. Ví dụ trong Hình 16.2,spanvốn là nội tuyến được đặtdisplay: blocknên mỗispanxuống dòng riêng như một khối.
- Các thông số của khung (Hình 16.3) – từ trong ra ngoài:
- Phần nội dung (content) → Vùng đệm (padding) → Khung/đường viền (border) → Lề khung (margin).
width(chiều rộng) vàheight(chiều cao) xác định kích thước phần nội dung.
Bảng 16.2 – Các thuộc tính liên quan đến khung (đều không có tính kế thừa):
| Thuộc tính | Ý nghĩa |
|---|---|
width | Chiều rộng khung, chỉ áp dụng cho phần tử dạng khối |
height | Chiều cao khung, chỉ áp dụng cho phần tử dạng khối |
padding | Vùng đệm, khoảng cách từ vùng text đến đường viền ngoài |
margin | Lề khung, khoảng cách từ đường viền ngoài đến văn bản xung quanh |
border-color | Màu của viền khung |
border-width | Độ dày đường viền |
border-style | Kiểu đường viền: none, solid, dotted, dashed, double, inset, outset, ridge, groove |
border | Gán đồng thời width, style, color. VD: border: 2px solid red; |
Câu 1: Yếu tố quyết định chiều rộng của phần tử nội tuyến
Đề: 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ủa cửa sổ trình duyệt không?
Trả lời:
- Chiều rộng của phần tử nội tuyến (inline) phụ thuộc vào chính nội dung bên trong nó (độ dài đoạn văn bản, kích thước hình ảnh hay phần tử con mà nó chứa).
- Phần tử nội tuyến không nhận thuộc tính
width,heightnên ta không thể ấn định chiều rộng cho nó. Nó tự co giãn vừa khít với nội dung. - Nó không trực tiếp phụ thuộc vào chiều rộng cửa sổ trình duyệt. Khi nội dung quá dài, phần tử chỉ ngắt dòng để chữ chảy xuống dòng tiếp theo, chứ bản thân hộp inline luôn ôm sát nội dung.
Vì sao: bản chất của phần tử nội tuyến là nằm trên cùng dòng văn bản (như , , ), nên kích thước được quyết định bởi nội dung, không phải bởi khung cửa sổ.
Câu 2: Khẳng định về chiều rộng phần tử khối
Đề: 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 cửa sổ trình duyệt" là đúng hay sai?
Trả lời: Sai.
Giải thích:
- Phần tử khối (block) chiếm trọn chiều rộng có sẵn theo mặc định, nên ban đầu trông như phụ thuộc vào cửa sổ trình duyệt.
- Nhưng phần tử khối nhận được thuộc tính
width, nên người lập trình có thể ấn định một chiều rộng cố định (ví dụwidth: 200px;như khốih1ở Hình 16.4). Khi đó chiều rộng do CSS quy định, không còn phụ thuộc cửa sổ trình duyệt. - Ngoài ra chiều rộng tổng thể còn chịu ảnh hưởng của
padding,border,margin.
Vậy từ "chỉ" trong khẳng định là không đúng, vì còn nhiều yếu tố khác chi phối.
Phân tích đoạn mã ví dụ "Lịch sử CSS" (Hình 16.4)
Đây không phải bài tập có câu hỏi, nhưng cô phân tích để em hiểu rõ kết quả hiển thị.
Cách hiểu từng dòng:
h1là phần tử khối nên nhận đủ các thuộc tính:border: 5px ridge blue;→ viền dày 5px, kiểu nổi gờ (ridge), màu xanh.width: 200px;→ ấn định chiều rộng phần nội dung 200px.padding: 10px;→ đệm 10px giữa chữ và viền.margin: 20px;→ lề 20px quanh khung.- Lưu ý: dòng
margin: 20px;viết hai lần, dòng sau ghi đè dòng trước nhưng giá trị giống nhau nên kết quả không đổi. emlà phần tử nội tuyến, chỉ thiết lập đượcborder(viền đôi 2px màu đỏ) chứ không có chiều cao, chiều rộng riêng. Vì vậy ở Hình 16.4b, tên "Håkon Wium Lie" được bao bởi một khung viền đỏ ôm sát chữ.
Điểm cần ghi nhớ: với phần tử khối, khung có đầy đủ tính chất; với phần tử nội tuyến, khung chỉ thiết lập được viền mà không có chiều cao, chiều rộng.