Trắc nghiệm Tin học 12 Bài 16: Định dạng khung
Phần 1. 15 câu Trắc nghiệm Tin học 10 Bài 16: Định dạng khung
I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.
Câu 1: Khi đặt tên cho ID và class, điều nào không đúng?
A. Tên phải phân biệt chữ hoa và chữ thường
B. Tên bắt đầu bằng số
C. Không chứa dấu cách và các ký tự đặc biệt
D. Phải có ít nhất một ký tự không phải là số
Hướng dẫn giải
Đáp án: B
Giải thích: Tên ID và class không được bắt đầu bằng số.
Câu 2: Bộ chọn CSS với ID được viết như thế nào?
A. .idname {thuộc tính: giá trị;}
B. #idname {thuộc tính: giá trị;}
C. id=idname {thuộc tính: giá trị;}
D. .id {thuộc tính: giá trị;}
Hướng dẫn giải
Đáp án: B
Giải thích: Bộ chọn CSS với ID được viết dưới dạng #idname {thuộc tính: giá trị;}.
Câu 3: Trong HTML, các phần tử bảng được tạo bằng thẻ nào?
A. <div>
B. <p>
C. <table>
D. <span>
Hướng dẫn giải
Đáp án: C
Giải thích: Các phần tử bảng trong HTML được tạo bằng thẻ <table>.
Câu 4: Để định dạng ô tiêu đề trong bảng HTML, ta sử dụng thẻ nào?
A. <td>
B. <th>
C. <tr>
D. <caption>
Hướng dẫn giải
Đáp án: B
Giải thích: Thẻ <th> được sử dụng để định dạng ô tiêu đề trong bảng HTML.
Câu 5: Phần tử có thể thuộc nhiều class bằng cách nào?
A. Dùng dấu phẩy giữa các tên class
B. Dùng dấu chấm giữa các tên class
C. Đặt các tên class cách nhau bởi dấu cách
D. Không thể có nhiều class
Hướng dẫn giải
Đáp án: C
Giải thích: Một phần tử có thể thuộc nhiều class bằng cách đặt các tên class cách nhau bởi dấu cách.
Câu 6: Phần tử khối trong HTML thường có đặc điểm gì?
A. Luôn nằm trong một phần tử khác
B. Không có chiều rộng cố định
C. Bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web
D. Luôn là phần tử inline
Hướng dẫn giải
Đáp án: C
Giải thích: Phần tử khối (block level) thường bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web.
Câu 7: Thuộc tính display: none; trong CSS có tác dụng gì?
A. Chuyển phần tử thành phần tử inline
B. Chuyển phần tử thành phần tử block
C. Ẩn phần tử mà không hiển thị trên trang web
D. Chuyển phần tử thành phần tử nội tuyến
Hướng dẫn giải
Đáp án: C
Giải thích: Thuộc tính display: none; sẽ làm ẩn phần tử này trên trang web, không hiển thị cho người dùng.
Câu 8: Các thuộc tính khung trong CSS không áp dụng được cho loại phần tử nào?
A. Phần tử khối
B. Phần tử nội tuyến
C. Phần tử block
D. Phần tử với ID cụ thể
Hướng dẫn giải
Đáp án: B
Giải thích: Các thuộc tính khung chỉ có thể thiết lập cho phần tử nội tuyến mà không có các thông số chiều cao và chiều rộng.
Câu 9: Để định dạng một nhóm phần tử có cùng ý nghĩa, ta nên sử dụng bộ chọn nào?
A. ID
B. Class
C. Inline
D. Block
Hướng dẫn giải
Đáp án: B
Giải thích: Sử dụng bộ chọn class để định dạng chung cho các phần tử có cùng ý nghĩa.
Câu 10: Mỗi phần tử HTML có thể có bao nhiêu ID?
A. Nhiều ID
B. Một ID
C. Không có ID
D. Tùy thuộc vào phần tử
Hướng dẫn giải
Đáp án: B
Giải thích: Mỗi phần tử HTML chỉ có thể có một ID duy nhất trong một trang web.
II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai
Câu 1: Đánh dấu Đúng (Đ) hoặc Sai (S) cho mỗi ý sau:
a) Phần tử khối thường bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web.
b) Phần tử nội tuyến có thể chứa các phần tử khối.
c) Thuộc tính display: none; làm ẩn phần tử trên trang web.
d) Tất cả các phần tử HTML đều thuộc loại phần tử khối.
Hướng dẫn giải
a) Đúng – Phần tử khối bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web.
b) Sai – Phần tử nội tuyến không thể chứa các phần tử khối.
c) Đúng – Thuộc tính display: none; làm ẩn phần tử, không hiển thị trên trang web.
d) Sai – Phần tử HTML có thể là phần tử khối hoặc phần tử nội tuyến.
Câu 2: Đánh dấu Đúng (Đ) hoặc Sai (S) cho mỗi ý sau:
a) Phần tử khối có thể thiết lập khung với đầy đủ tính chất như chiều cao và chiều rộng.
b) Phần tử nội tuyến có thể thiết lập chiều cao và chiều rộng của khung.
c) Các thuộc tính liên quan đến khung có tính kế thừa.
d) Bộ chọn lớp (class) được sử dụng để định dạng chung cho nhóm phần tử có cùng ý nghĩa.
Hướng dẫn giải
a) Đúng – Phần tử khối có thể thiết lập khung với đầy đủ tính chất, bao gồm chiều cao và chiều rộng.
b) Sai – Phần tử nội tuyến không thể thiết lập chiều cao và chiều rộng của khung.
c) Sai – Các thuộc tính liên quan đến khung không có tính kế thừa.
d) Đúng – Bộ chọn lớp (class) được sử dụng để định dạng chung cho nhóm phần tử có cùng ý nghĩa.
III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3
Câu 1: Phân biệt giữa phần tử khối và phần tử nội tuyến trong HTML.
Hướng dẫn giải
Đáp án: Phần tử khối (block) bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web, còn phần tử nội tuyến (inline) nằm bên trong một phần tử khác mà không ngắt dòng.
Giải thích: Phần tử khối chiếm toàn bộ chiều ngang trang và thường được sử dụng cho các thành phần lớn như đoạn văn hay div. Phần tử nội tuyến không ngắt dòng và chỉ chiếm không gian cần thiết, phù hợp cho các phần tử như span hay a.
Câu 2: Làm thế nào để thay đổi loại phần tử HTML từ khối sang nội tuyến?
Hướng dẫn giải
Đáp án: Sử dụng thuộc tính CSS display với giá trị inline.
Giải thích: Thuộc tính display trong CSS điều khiển cách một phần tử được hiển thị. Để chuyển đổi phần tử từ khối sang nội tuyến, đặt display: inline;.
Câu 3: Mã định danh (id) và lớp (class) khác nhau như thế nào trong CSS?
Hướng dẫn giải
Đáp án: Mã định danh (id) là duy nhất cho mỗi phần tử, trong khi lớp (class) có thể được áp dụng cho nhiều phần tử.
Giải thích: ID được sử dụng để định dạng duy nhất cho một phần tử cụ thể, với cú pháp #idname. Class được sử dụng cho nhóm phần tử có ý nghĩa chung, với cú pháp .classname. Một phần tử có thể có nhiều class nhưng chỉ có một id duy nhất.
Phần 2. Lý thuyết Tin học 10 Bài 16: Định dạng khung
1. Phân loại phần tử khối và nội tuyến
Các thẻ (hay phần tử) HTML được chia làm hai loại: khối (block level) và nội tuyến (inline).
– Phần tử khối thường bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web. Ví dụ, dòng chữ “Thư Bác Hồ gửi học sinh” được thể hiện ở dạng khối.
– Phần tử nội tuyến là các phần tử nhúng bên trong một phần tử khác. Ví dụ, cụm từ Việt Nam là một phần tử nội tuyến, được nhúng trong phần tử p.
Mặc định, các phần tử HTML sẽ thuộc một trong hai loại này, như được trình bày trong Bảng 16.1.
Chúng ta có thể thay đổi loại phần tử HTML bằng thuộc tính display. Các giá trị của thuộc tính này bao gồm block, inline, none. Giá trị none sẽ làm ẩn (không hiển thị) phần tử này trên trang web
Kết quả áp dụng mẫu CSS trên được minh hoạ trong Hình 16.2.
2. Thiết lập định dạng khung bằng css
Cần phân biệt hai loại phần tử HTML:
– Phần tử khối: Khung được xác định với đầy đủ tính chất.
– Phần tử nội tuyến: Khung chỉ có thể thiết lập mà không có các thông số chiều cao và chiều rộng.
Các thuộc tính liên quan đến khung của một phần tử HTML được mô tả trong
Bảng 16.2. Lưu ý các thuộc tính này đều không có tính kế thừa.
3. Một số bộ chọn đặc biệt của CSS
a) Thiết lập bộ chọn là một lớp các phần tử có ý nghĩa gần giống nhau:
Cấu trúc chung của định dạng CSS liên quan đến lớp như sau:
.class {thuộc tính : giá trị;}
b) Thiết lập bộ chọn riêng cho từng phần tử riêng biệt có mã định danh id:
CSS cho phép thiết lập các mẫu định dạng với các phần tử có id tương ứng như sau:
#idname {thuộc tính : giá trị ;}
Ví dụ một số mẫu định dạng ID như sau:
#home {color : red;} /*chữ màu đỏ cho phần tử với id = “home”*/
p#home {font-size: 150
c) Thiết lập bộ chọn thuộc tỉnh CSS:
Một tính chất quan trọng khác của CSS là có thể thiết lập bộ chọn là thuộc tính. Các định dạng này sẽ được thiết lập và áp dụng cho các phần tử nếu được gắn với thuộc tính cụ thể nào đó
Lưu ý: Khi đặt tên cho id và class:
– Tên của id và class phân biệt chữ in hoa, in thường.
– Tên bắt buộc phải có ít nhất một kí tự không là số, không bắt đầu bằng số, không chứa dấu cách và các kí tự đặc biệt khác.
– Một phần tử có thể thuộc nhiều lớp khác nhau. Để khai báo, chúng ta đặt các tên lớp cách nhau bởi dấu cách
Có thể thiết lập các mẫu định dạng với bộ chọn là class, ID hoặc thuộc tính.
4. Thực hành
Nhiệm vụ: Tạo trang web
Yêu cầu: Tạo trang web mô tả bảng 16 tên màu cơ bản CSS như Hình 16.5. Gợi ý: Bài thực hành có thể thực hiện theo hai bước:
Bước 1. Thiết lập bảng với nội dung như trong Hình 16.5 nhưng chưa định dạng.
Bước 2. Viết bổ sung các mẫu CSS để định dạng khung đúng như Hình 16.5.
Hướng dẫn:
– Bước 1. Thiết lập trang web theo nội dung như Hình 16.5. Sử dụng các thẻ <tables … </table> để thiết lập bảng. Tên bảng được thiết lập bằng thẻ <caption). Các hàng thiết lập bằng thẻ <tr>…</tr> và ô của bảng thiết lập bằng thẻ <tr><tr>. Riêng các ô tiêu đề (hàng thứ nhất) sẽ sử dụng thẻ <th>. Lưu ý các ô cuối của mỗi hàng cần được thiết lập màu nền theo đúng thông số màu đã ghi tại cột 1 hoặc cột 2.
– Bước 2. Thiết lập mẫu CSS để tạo khuôn khung, viền cho bảng.
Xem thêm các bài trắc nghiệm Tin học 12 Kết nối tri thức hay, chi tiết khác:
Trắc nghiệm Bài 15: Tạo màu cho chữ và nền
Trắc nghiệm Bài 16: Định dạng khung
Trắc nghiệm Bài 17: Các mức ưu tiên của bộ chọn
Trắc nghiệm Bài 18: Thực hành tổng hợp thiết kế trang web
Trắc nghiệm Bài 19: Dịch vụ sửa chữa và bảo trì máy tính
Trắc nghiệm Bài 20: Nhóm nghề quản trị thuộc ngành Công nghệ thông tin