Câu 3: Thuộc tính CSS `display: inline-block;` kết hợp đặc điểm của phần tử khối và phần tử nội tuyến như thế nào?

• A. Hiển thị trên một dòng mới và không thể thiết lập chiều rộng.
• B. Hiển thị trên cùng dòng và có thể thiết lập chiều cao nhưng không thể chiều rộng.
• C. Hiển thị trên cùng dòng và có thể thiết lập cả chiều cao lẫn chiều rộng.
• D. Hiển thị trên một dòng mới và luôn chiếm toàn bộ chiều rộng trang web.

Câu 4: Để tạo khoảng cách giữa đường viền của khung và nội dung bên trong phần tử, ta sử dụng thuộc tính CSS nào?

• A. margin
• B. border
• C. width
• D. padding

Câu 5: Giả sử bạn có một phần tử div với `id=

• A. #container { border: 2px solid red; }
• B. .container { border: 2px solid red; }
• C. div { border: 2px solid red; }
• D. container { border: 2px solid red; }

Câu 6: Thuộc tính CSS `margin` được sử dụng để làm gì?

• A. Tạo đường viền xung quanh phần tử.
• B. Tạo khoảng cách giữa khung của phần tử với các phần tử khác.
• C. Thay đổi màu nền của phần tử.
• D. Thay đổi kích thước chữ trong phần tử.

Câu 7: Điều gì xảy ra khi bạn đặt thuộc tính `display: none;` cho một phần tử?

• A. Phần tử trở thành phần tử nội tuyến.
• B. Phần tử trở thành phần tử khối.
• C. Phần tử bị ẩn hoàn toàn khỏi trang web và không chiếm không gian.
• D. Phần tử trở nên trong suốt nhưng vẫn chiếm không gian.

Câu 8: Trong HTML, thẻ nào thường được dùng để tạo cấu trúc khung chính cho bố cục trang web?

• A.
• B.
• C.
• D.
  

  Câu 9: Để bo tròn góc của khung, ta sử dụng thuộc tính CSS nào?

  • A. border-style
  • B. border-width
  • C. border-color
  • D. border-radius

  Câu 10: Xét đoạn mã CSS sau: `#box { border-width: 3px; padding: 10px; margin: 20px; }`. Tổng chiều rộng thực tế mà phần tử có id "box" chiếm trên trang web (không tính nội dung bên trong) được tính như thế nào?

  • A. 3px (chỉ border)
  • B. 66px (border trái + phải + padding trái + phải + margin trái + phải)
  • C. 33px (border + padding + margin)
  • D. Không thể xác định nếu không biết chiều rộng nội dung

  Câu 11: Trong CSS, giá trị "dotted", "dashed", "solid" là các giá trị có thể của thuộc tính nào?

  • A. border-width
  • B. border-color
  • C. border-style
  • D. padding-style

  Câu 12: Điều gì khác biệt chính giữa việc sử dụng ID và Class trong CSS để định dạng khung?

  • A. ID dùng cho phần tử nội tuyến, Class dùng cho phần tử khối.
  • B. ID có độ ưu tiên thấp hơn Class trong CSS.
  • C. Class chỉ dùng để định dạng đường viền, ID dùng cho các thuộc tính khung khác.
  • D. ID dùng để định dạng một phần tử duy nhất, Class dùng để định dạng nhóm nhiều phần tử.

  Câu 13: Khi thiết kế web đáp ứng (responsive web design), thuộc tính nào liên quan đến khung thường được điều chỉnh để phù hợp với các kích thước màn hình khác nhau?

  • A. border-style
  • B. width và padding
  • C. border-color
  • D. margin-top

  Câu 14: Cho đoạn code HTML: `

  A. CSS ngoài dòng (external CSS)

  B. CSS nhúng (embedded CSS)

  C. CSS nội tuyến (inline CSS)

  D. CSS liên kết (linked CSS)

  Câu 15: Nếu bạn chỉ muốn thiết lập đường viền phía dưới cho một phần tử, bạn sử dụng thuộc tính CSS nào?

  • A. border-bottom
  • B. border-side
  • C. border-edge
  • D. border-vertical

  Câu 16: Để loại bỏ hoàn toàn đường viền của một phần tử, bạn đặt giá trị nào cho thuộc tính `border-style`?

  • A. hidden
  • B. none
  • C. transparent
  • D. invisible

  Câu 17: Trong mô hình hộp (box model), thứ tự các lớp từ trong ra ngoài là gì?

  • A. Margin, Border, Padding, Content
  • B. Border, Margin, Padding, Content
  • C. Content, Padding, Border, Margin
  • D. Content, Border, Padding, Margin

  Câu 18: Thuộc tính `outline` trong CSS khác với `border` như thế nào?

  • A. `outline` nằm bên trong `padding`, `border` nằm ngoài.
  • B. `outline` ảnh hưởng đến kích thước hộp, `border` thì không.
  • C. `outline` có thể bo tròn góc, `border` thì không.
  • D. `outline` không chiếm không gian trong mô hình hộp, `border` thì có.

  Câu 19: Tại sao nên sử dụng CSS Class thay vì ID để định dạng khung cho nhiều phần tử có cấu trúc tương tự?

  • A. Class có thể áp dụng cho nhiều phần tử, ID chỉ dùng cho một phần tử duy nhất.
  • B. Class có độ ưu tiên cao hơn ID, dễ dàng ghi đè định dạng.
  • C. ID giúp trang web tải nhanh hơn khi định dạng nhiều khung.
  • D. Class hỗ trợ nhiều thuộc tính định dạng khung hơn ID.

  Câu 20: Trong bảng HTML, thẻ nào được sử dụng để tạo đường viền xung quanh toàn bộ bảng?

  • A.
  C.
  

  B.

  D.

  Câu 21: Cho CSS: `.box { width: 100%; max-width: 500px; }`. Điều này có ý nghĩa gì về chiều rộng khung của phần tử có class "box"? A. Chiều rộng luôn cố định 500px. B. Chiều rộng tối đa 500px, có thể nhỏ hơn nếu phần tử cha hẹp hơn. C. Chiều rộng luôn chiếm 100% màn hình. D. Chiều rộng là 100px hoặc 500px tùy thuộc vào nội dung. Câu 22: Khi kiểm tra phần tử bằng công cụ Inspect của trình duyệt, bạn có thể xem thông tin chi tiết về mô hình hộp của khung ở đâu? A. Tab "Elements" > "Styles" B. Tab "Console" C. Tab "Sources" D. Tab "Elements" > "Computed" hoặc "Layout" Câu 23: Để tạo hiệu ứng đổ bóng cho khung, ta sử dụng thuộc tính CSS nào? A. border-shadow B. box-shadow C. text-shadow D. frame-shadow Câu 24: Trong CSS, đơn vị đo chiều dài nào sau đây thường được sử dụng để định kích thước khung linh hoạt theo kích thước phông chữ của phần tử cha? A. px (pixel) B. cm (centimeter) C. em D. pt (point) Câu 25: Nếu bạn muốn đường viền khung chỉ hiển thị khi người dùng di chuột qua phần tử, bạn có thể sử dụng CSS selector nào? A. :active B. :visited C. :focus D. :hover Câu 26: Thuộc tính CSS `box-sizing: border-box;` có tác dụng gì đối với kích thước khung? A. Padding và border được tính vào tổng chiều rộng và chiều cao của phần tử. B. Margin được tính vào tổng chiều rộng và chiều cao của phần tử. C. Chỉ border được tính vào tổng chiều rộng và chiều cao của phần tử. D. Không có tác dụng thay đổi cách tính kích thước khung. Câu 27: Trong ngữ cảnh định dạng khung, "reset CSS" thường được sử dụng để làm gì? A. Tăng tốc độ tải trang web. B. Loại bỏ các định dạng mặc định của trình duyệt để có nền tảng thống nhất. C. Tự động tạo khung cho tất cả các phần tử HTML. D. Thay đổi màu sắc mặc định của đường viền khung. Câu 28: Xét một phần tử có `padding: 2em; border: 1px solid black;` và nội dung văn bản. Nếu kích thước phông chữ của phần tử là 16px, khoảng cách giữa văn bản và đường viền khung là bao nhiêu pixel? A. 1px B. 2px C. 32px D. 16px Câu 29: Khi thiết kế giao diện người dùng (UI), việc sử dụng khung có vai trò quan trọng nào? A. Phân chia và nhóm các phần nội dung, tạo cấu trúc rõ ràng. B. Tăng tốc độ xử lý của trình duyệt. C. Cải thiện thứ hạng tìm kiếm trên Google. D. Giảm dung lượng trang web. Câu 30: Trong CSS, thuộc tính `clip-path` có thể được sử dụng để làm gì với khung của một phần tử? A. Thay đổi màu sắc đường viền khung theo hiệu ứng gradient. B. Tạo hiệu ứng hoạt hình cho đường viền khung. C. Làm cho đường viền khung trở nên trong suốt. D. Tạo hình dạng khung không phải hình chữ nhật (ví dụ: hình tròn, đa giác). 1 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 1: Trong CSS, thuộc tính nào sau đây được sử dụng để xác định kiểu đường viền của khung? border-width border-style border-color border-radius Câu hỏi kiểm tra kiến thức cơ bản về thuộc tính CSS dùng để thiết lập kiểu đường viền khung. 2 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 2: Phần tử HTML nào dưới đây mặc định là phần tử khối? <div> <span> <a> <img> Câu hỏi kiểm tra sự hiểu biết về các loại phần tử HTML cơ bản và thuộc tính hiển thị mặc định của chúng. 3 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 3: Thuộc tính CSS `display: inline-block;` kết hợp đặc điểm của phần tử khối và phần tử nội tuyến như thế nào? Hiển thị trên một dòng mới và không thể thiết lập chiều rộng. Hiển thị trên cùng dòng và có thể thiết lập chiều cao nhưng không thể chiều rộng. Hiển thị trên cùng dòng và có thể thiết lập cả chiều cao lẫn chiều rộng. Hiển thị trên một dòng mới và luôn chiếm toàn bộ chiều rộng trang web. Câu hỏi yêu cầu phân tích và tổng hợp kiến thức về thuộc tính `display: inline-block`, kết hợp đặc điểm của cả hai loại phần tử. 4 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 4: Để tạo khoảng cách giữa đường viền của khung và nội dung bên trong phần tử, ta sử dụng thuộc tính CSS nào? margin border width padding Câu hỏi kiểm tra kiến thức về thuộc tính `padding` và vai trò của nó trong mô hình hộp (box model). 5 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 5: Giả sử bạn có một phần tử div với `id="container"`. Để thiết lập đường viền màu đỏ, nét liền, dày 2px cho phần tử này bằng CSS, bạn viết bộ chọn và thuộc tính nào? #container { border: 2px solid red; } .container { border: 2px solid red; } div { border: 2px solid red; } container { border: 2px solid red; } Câu hỏi yêu cầu áp dụng kiến thức về bộ chọn ID và thuộc tính `border` để giải quyết một tình huống cụ thể. 6 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 6: Thuộc tính CSS `margin` được sử dụng để làm gì? Tạo đường viền xung quanh phần tử. Tạo khoảng cách giữa khung của phần tử với các phần tử khác. Thay đổi màu nền của phần tử. Thay đổi kích thước chữ trong phần tử. Câu hỏi kiểm tra sự hiểu biết về thuộc tính `margin` và vai trò của nó trong việc tạo khoảng cách bên ngoài khung. 7 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 7: Điều gì xảy ra khi bạn đặt thuộc tính `display: none;` cho một phần tử? Phần tử trở thành phần tử nội tuyến. Phần tử trở thành phần tử khối. Phần tử bị ẩn hoàn toàn khỏi trang web và không chiếm không gian. Phần tử trở nên trong suốt nhưng vẫn chiếm không gian. Câu hỏi kiểm tra kiến thức về thuộc tính `display: none;` và tác động của nó đến hiển thị phần tử. 8 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 8: Trong HTML, thẻ nào thường được dùng để tạo cấu trúc khung chính cho bố cục trang web? <div> <span> <p> <table> Câu hỏi kiểm tra kiến thức về thẻ HTML phổ biến dùng để tạo khung bố cục trang web. 9 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 9: Để bo tròn góc của khung, ta sử dụng thuộc tính CSS nào? border-style border-width border-color border-radius Câu hỏi kiểm tra kiến thức về thuộc tính CSS dùng để tạo hiệu ứng bo tròn góc khung. 10 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 10: Xét đoạn mã CSS sau: `#box { border-width: 3px; padding: 10px; margin: 20px; }`. Tổng chiều rộng thực tế mà phần tử có id 'box' chiếm trên trang web (không tính nội dung bên trong) được tính như thế nào? 3px (chỉ border) 66px (border trái + phải + padding trái + phải + margin trái + phải) 33px (border + padding + margin) Không thể xác định nếu không biết chiều rộng nội dung Câu hỏi yêu cầu vận dụng kiến thức về mô hình hộp để tính toán kích thước tổng cộng của khung, bao gồm border, padding và margin. 11 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 11: Trong CSS, giá trị 'dotted', 'dashed', 'solid' là các giá trị có thể của thuộc tính nào? border-width border-color border-style padding-style Câu hỏi kiểm tra kiến thức về các giá trị phổ biến của thuộc tính `border-style`. 12 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 12: Điều gì khác biệt chính giữa việc sử dụng ID và Class trong CSS để định dạng khung? ID dùng cho phần tử nội tuyến, Class dùng cho phần tử khối. ID có độ ưu tiên thấp hơn Class trong CSS. Class chỉ dùng để định dạng đường viền, ID dùng cho các thuộc tính khung khác. ID dùng để định dạng một phần tử duy nhất, Class dùng để định dạng nhóm nhiều phần tử. Câu hỏi yêu cầu so sánh và đối chiếu sự khác biệt về mục đích sử dụng của bộ chọn ID và Class trong CSS. 13 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 13: Khi thiết kế web đáp ứng (responsive web design), thuộc tính nào liên quan đến khung thường được điều chỉnh để phù hợp với các kích thước màn hình khác nhau? border-style width và padding border-color margin-top Câu hỏi liên hệ kiến thức về định dạng khung với khái niệm thiết kế web đáp ứng, tập trung vào thuộc tính kích thước. 14 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 14: Cho đoạn code HTML: ` Nội dung `. Định dạng khung này được gọi là gì? CSS ngoài dòng (external CSS) CSS nhúng (embedded CSS) CSS nội tuyến (inline CSS) CSS liên kết (linked CSS) Câu hỏi kiểm tra nhận biết về định dạng CSS inline và cách nó được áp dụng trực tiếp trong HTML. 15 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 15: Nếu bạn chỉ muốn thiết lập đường viền phía dưới cho một phần tử, bạn sử dụng thuộc tính CSS nào? border-bottom border-side border-edge border-vertical Câu hỏi kiểm tra kiến thức về các thuộc tính CSS cụ thể cho từng cạnh của khung. 16 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 16: Để loại bỏ hoàn toàn đường viền của một phần tử, bạn đặt giá trị nào cho thuộc tính `border-style`? hidden none transparent invisible Câu hỏi kiểm tra kiến thức về giá trị đặc biệt của `border-style` để loại bỏ đường viền. 17 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 17: Trong mô hình hộp (box model), thứ tự các lớp từ trong ra ngoài là gì? Margin, Border, Padding, Content Border, Margin, Padding, Content Content, Padding, Border, Margin Content, Border, Padding, Margin Câu hỏi kiểm tra sự hiểu biết về thứ tự các thành phần trong mô hình hộp CSS. 18 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 18: Thuộc tính `outline` trong CSS khác với `border` như thế nào? `outline` nằm bên trong `padding`, `border` nằm ngoài. `outline` ảnh hưởng đến kích thước hộp, `border` thì không. `outline` có thể bo tròn góc, `border` thì không. `outline` không chiếm không gian trong mô hình hộp, `border` thì có. Câu hỏi yêu cầu so sánh và phân biệt giữa hai thuộc tính định dạng khung tương tự nhưng có chức năng khác nhau. 19 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 19: Tại sao nên sử dụng CSS Class thay vì ID để định dạng khung cho nhiều phần tử có cấu trúc tương tự? Class có thể áp dụng cho nhiều phần tử, ID chỉ dùng cho một phần tử duy nhất. Class có độ ưu tiên cao hơn ID, dễ dàng ghi đè định dạng. ID giúp trang web tải nhanh hơn khi định dạng nhiều khung. Class hỗ trợ nhiều thuộc tính định dạng khung hơn ID. Câu hỏi kiểm tra hiểu biết về best practices khi sử dụng ID và Class cho mục đích tái sử dụng định dạng. 20 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 20: Trong bảng HTML, thẻ nào được sử dụng để tạo đường viền xung quanh toàn bộ bảng? <td> <tr> <table> <th> Câu hỏi kiểm tra kiến thức về cấu trúc bảng HTML và cách định dạng khung cho bảng. 21 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 21: Cho CSS: `.box { width: 100%; max-width: 500px; }`. Điều này có ý nghĩa gì về chiều rộng khung của phần tử có class 'box'? Chiều rộng luôn cố định 500px. Chiều rộng tối đa 500px, có thể nhỏ hơn nếu phần tử cha hẹp hơn. Chiều rộng luôn chiếm 100% màn hình. Chiều rộng là 100px hoặc 500px tùy thuộc vào nội dung. Câu hỏi yêu cầu phân tích sự kết hợp giữa `width: 100%` và `max-width` để hiểu cách khung thích ứng với kích thước cha. 22 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 22: Khi kiểm tra phần tử bằng công cụ Inspect của trình duyệt, bạn có thể xem thông tin chi tiết về mô hình hộp của khung ở đâu? Tab 'Elements' > 'Styles' Tab 'Console' Tab 'Sources' Tab 'Elements' > 'Computed' hoặc 'Layout' Câu hỏi kiểm tra kỹ năng sử dụng công cụ phát triển trình duyệt để phân tích định dạng khung. 23 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 23: Để tạo hiệu ứng đổ bóng cho khung, ta sử dụng thuộc tính CSS nào? border-shadow box-shadow text-shadow frame-shadow Câu hỏi kiểm tra kiến thức về thuộc tính CSS nâng cao để tạo hiệu ứng hình ảnh cho khung. 24 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 24: Trong CSS, đơn vị đo chiều dài nào sau đây thường được sử dụng để định kích thước khung linh hoạt theo kích thước phông chữ của phần tử cha? px (pixel) cm (centimeter) em pt (point) Câu hỏi kiểm tra kiến thức về các đơn vị đo lường CSS và tính linh hoạt của đơn vị `em`. 25 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 25: Nếu bạn muốn đường viền khung chỉ hiển thị khi người dùng di chuột qua phần tử, bạn có thể sử dụng CSS selector nào? :active :visited :focus :hover Câu hỏi kiểm tra kiến thức về CSS selectors trạng thái (pseudo-classes) và ứng dụng trong định dạng khung. 26 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 26: Thuộc tính CSS `box-sizing: border-box;` có tác dụng gì đối với kích thước khung? Padding và border được tính vào tổng chiều rộng và chiều cao của phần tử. Margin được tính vào tổng chiều rộng và chiều cao của phần tử. Chỉ border được tính vào tổng chiều rộng và chiều cao của phần tử. Không có tác dụng thay đổi cách tính kích thước khung. Câu hỏi kiểm tra kiến thức về thuộc tính `box-sizing` và ảnh hưởng của nó đến cách tính toán kích thước khung. 27 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 27: Trong ngữ cảnh định dạng khung, 'reset CSS' thường được sử dụng để làm gì? Tăng tốc độ tải trang web. Loại bỏ các định dạng mặc định của trình duyệt để có nền tảng thống nhất. Tự động tạo khung cho tất cả các phần tử HTML. Thay đổi màu sắc mặc định của đường viền khung. Câu hỏi kiểm tra kiến thức về khái niệm 'reset CSS' và mục đích sử dụng trong việc chuẩn hóa định dạng. 28 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 28: Xét một phần tử có `padding: 2em; border: 1px solid black;` và nội dung văn bản. Nếu kích thước phông chữ của phần tử là 16px, khoảng cách giữa văn bản và đường viền khung là bao nhiêu pixel? 1px 2px 32px 16px Câu hỏi yêu cầu áp dụng kiến thức về đơn vị `em` và `padding` để tính toán khoảng cách cụ thể. 29 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 29: Khi thiết kế giao diện người dùng (UI), việc sử dụng khung có vai trò quan trọng nào? Phân chia và nhóm các phần nội dung, tạo cấu trúc rõ ràng. Tăng tốc độ xử lý của trình duyệt. Cải thiện thứ hạng tìm kiếm trên Google. Giảm dung lượng trang web. Câu hỏi kiểm tra hiểu biết về vai trò của khung trong thiết kế giao diện và tổ chức nội dung. 30 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 1 Câu 30: Trong CSS, thuộc tính `clip-path` có thể được sử dụng để làm gì với khung của một phần tử? Thay đổi màu sắc đường viền khung theo hiệu ứng gradient. Tạo hiệu ứng hoạt hình cho đường viền khung. Làm cho đường viền khung trở nên trong suốt. Tạo hình dạng khung không phải hình chữ nhật (ví dụ: hình tròn, đa giác). Xem kết quả Bạn ơi!!! Để xem được kết quả bạn vui lòng làm nhiệm vụ nhỏ xíu này nha LƯU Ý: Không sử dụng VPN hoặc 1.1.1.1 khi vượt link Nhận kết quả Xảy ra lỗi Bước 1: Mở tab mới, truy cập Google.com Bước 2: Tìm kiếm từ khóa: vận chuyển văn phòng giá rẻ Đổi nhiệm vụ Bước 3: Trong kết quả tìm kiếm Google, hãy tìm website giống dưới hình: (Nếu trang 1 không có hãy tìm ở trang 2, 3, 4... nhé ) Bước 4: Cuộn xuống cuối bài viết rồi bấm vào nút GIỐNG HÌNH DƯỚI và chờ 1 lát để lấy mã: Câu hỏi kiểm tra kiến thức về thuộc tính CSS nâng cao `clip-path` và khả năng tạo hình dạng khung phức tạp. By Wordpress Quiz plugin 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 02 Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 02 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay. Câu 1: Trong HTML, thẻ ` ` và thẻ `` đại diện cho hai loại phần tử khác nhau về cách hiển thị. Điểm khác biệt chính giữa phần tử `div` và `span` là gì? A. ` ` là phần tử khối, bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn, trong khi `` là phần tử nội tuyến, không tạo dòng mới và chỉ chiếm không gian cần thiết. B. ` ` chỉ được sử dụng để chứa văn bản, còn `` chứa được cả văn bản và hình ảnh. C. ` ` có thể định dạng được chiều cao và chiều rộng, còn `` thì không. D. ` ` là phần tử cũ, ít được sử dụng trong HTML5, thay vào đó người ta dùng ``. Câu 2: Thuộc tính CSS `display` có nhiều giá trị khác nhau. Giá trị nào sau đây của thuộc tính `display` sẽ khiến một phần tử biến mất hoàn toàn khỏi trang web, không chiếm bất kỳ không gian nào, và không hiển thị? A. `inline` B. `block` C. `hidden` D. `none` Câu 3: Xét đoạn mã CSS sau: `#tieude { color: blue; } .chude { font-size: 16px; }`. Bộ chọn nào đang được sử dụng để định dạng cho phần tử có `id` là `tieude`? A. `.chude` B. `#tieude` C. `tieude` D. Không có bộ chọn nào định dạng cho phần tử `id` `tieude` Câu 4: Khi nào thì việc sử dụng bộ chọn `class` trong CSS được ưu tiên hơn so với bộ chọn `id`? A. Khi chỉ có một phần tử duy nhất trên trang cần được định dạng. B. Khi cần định dạng một phần tử cụ thể và duy nhất, không có phần tử nào khác có cùng định dạng. C. Khi muốn áp dụng cùng một kiểu định dạng cho nhiều phần tử khác nhau trên trang web. D. Bộ chọn `id` luôn được ưu tiên hơn và nên được sử dụng trong mọi trường hợp. Câu 5: Giả sử bạn có một đoạn văn bản và bạn muốn một vài từ trong đoạn văn đó có màu sắc khác biệt nhưng vẫn nằm trên cùng một dòng. Loại phần tử HTML nào phù hợp nhất để bao bọc những từ đó? A. ` ` B. `` Câu 6: Trong CSS, thuộc tính `border` được sử dụng để tạo đường viền xung quanh một phần tử. Để thiết lập đường viền liền nét, màu đỏ, và dày 2 pixel, cú pháp CSS nào sau đây là đúng? A. `border: red 2px;` B. `border-style: solid; border-color: red; border-width: 2px;` C. `border: 2px solid red;` D. `border-width: 2px, border-style: solid, border-color: red;` Câu 7: Xét đoạn mã HTML: ` A. Một class B. Hai class C. Ba class D. Không có class nào Câu 8: Trong HTML, thẻ nào được sử dụng để tạo một hàng trong bảng? A. ` ` C. Câu 9: Thẻ ` ` cho hàng. 9 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 9: Thẻ ` ` và thẻ ` ` đều được sử dụng trong bảng HTML, nhưng chúng có mục đích khác nhau. Mục đích chính của việc sử dụng thẻ ` ` thay vì ` ` là gì? A. ` ` chỉ được sử dụng cho hàng tiêu đề của bảng, còn ` ` cho các hàng dữ liệu. B. ` ` không thể chứa văn bản, chỉ chứa được hình ảnh, còn ` ` thì ngược lại. C. ` ` tạo ra ô có đường viền đậm hơn ` `. D. ` ` thường được dùng cho các ô tiêu đề của bảng hoặc cột, với nội dung mặc định được in đậm và căn giữa, giúp nhấn mạnh tiêu đề. Câu 10: Để tạo khoảng cách giữa đường viền của phần tử và nội dung bên trong phần tử đó, thuộc tính CSS nào được sử dụng? A. `padding` B. `margin` C. `border-spacing` D. `line-height` Câu 11: Bạn muốn tạo một bố cục trang web mà trong đó các phần tử con được sắp xếp theo hàng ngang, và có thể tự động xuống dòng khi không đủ không gian. Thuộc tính `display` với giá trị nào sau đây sẽ phù hợp nhất? A. `block` B. `inline` C. `inline-block` D. `flex` Câu 12: Trong CSS, bộ chọn nào có độ ưu tiên cao nhất khi có xung đột về quy tắc định dạng? A. Bộ chọn class B. Bộ chọn ID C. Bộ chọn phần tử (tag name) D. Bộ chọn phổ quát (*) Câu 13: Bạn cần định dạng tất cả các thẻ ` ` trên trang web có màu chữ xanh lá cây. Quy tắc CSS nào sau đây sẽ thực hiện điều này? A. `p { color: green; }` B. `.p { color: green; }` C. `#p { color: green; }` D. `element.p { color: green; }` Câu 14: Thuộc tính CSS `margin` được sử dụng để làm gì? A. Tạo đường viền xung quanh phần tử. B. Tạo khoảng cách giữa phần tử và các phần tử xung quanh. C. Định dạng màu nền cho phần tử. D. Thay đổi kích thước chữ trong phần tử. Câu 15: Trong CSS, để nhóm nhiều bộ chọn lại với nhau và áp dụng cùng một bộ quy tắc định dạng, bạn sử dụng dấu gì để phân tách các bộ chọn? A. Dấu chấm phẩy (;) B. Dấu cách ( ) C. Dấu phẩy (,) D. Dấu hai chấm (:) Câu 16: Cho đoạn mã HTML sau: ` A. Làm đậm chữ cho tất cả các phần tử có class `container` và `text`. B. Làm đậm chữ cho phần tử có id `container` và tất cả các phần tử có class `text`. C. Không có tác dụng gì vì cú pháp CSS sai. D. Làm đậm chữ cho tất cả các phần tử có class `text` nằm bên trong phần tử có class `container`. Câu 17: Điều gì xảy ra khi bạn thiết lập `display: inline;` cho một phần tử ` `? A. Phần tử ` ` sẽ biến mất khỏi trang. B. Phần tử ` ` sẽ trở thành phần tử khối và chiếm toàn bộ chiều rộng. C. Phần tử ` ` sẽ trở thành phần tử nội tuyến và chỉ chiếm không gian cần thiết cho nội dung của nó, không tạo dòng mới. D. Không có gì thay đổi, ` ` vẫn luôn là phần tử khối. Câu 18: Trong CSS, bạn có thể sử dụng giá trị phần trăm (%) cho thuộc tính `width`. Giá trị phần trăm này được tính dựa trên kích thước của phần tử nào? A. Phần tử cha chứa nó. B. Chính bản thân phần tử đó. C. Kích thước màn hình hiển thị. D. Không có cơ sở nào, phần trăm là giá trị tuyệt đối. Câu 19: Khi đặt tên cho `id` hoặc `class` trong HTML và CSS, quy tắc nào sau đây là đúng? A. Tên có thể bắt đầu bằng chữ số. B. Tên nên bắt đầu bằng chữ cái và chỉ chứa chữ cái, chữ số, dấu gạch ngang (-) và dấu gạch dưới (_). C. Tên có thể chứa dấu cách. D. Tên phân biệt chữ hoa và chữ thường, ví dụ `.Text` và `.text` là khác nhau. Câu 20: Cho đoạn mã HTML: ` Tên Tuổi An 20 `. Đoạn mã này sẽ tạo ra một bảng có bao nhiêu hàng dữ liệu (không tính hàng tiêu đề)? A. Một hàng B. Hai hàng C. Ba hàng D. Không có hàng dữ liệu nào Câu 21: Nếu bạn muốn tạo khoảng cách giữa các ô trong một bảng HTML, thuộc tính CSS nào bạn sẽ sử dụng? A. `padding` B. `margin` C. `border-collapse` D. `border-spacing` Câu 22: Thuộc tính CSS `float` thường được sử dụng để làm gì trong bố cục trang web? A. Ẩn một phần tử khỏi trang. B. Đặt một phần tử nổi về bên trái hoặc bên phải và cho phép các phần tử khác bao quanh nó. C. Thay đổi màu sắc của phần tử. D. Tạo hiệu ứng động cho phần tử. Câu 23: Trong CSS, giá trị `inherit` của một thuộc tính có nghĩa là gì? A. Thiết lập thuộc tính về giá trị mặc định. B. Ngăn chặn thuộc tính được áp dụng cho phần tử. C. Phần tử sẽ kế thừa giá trị của thuộc tính đó từ phần tử cha gần nhất của nó. D. Không có ý nghĩa gì, giá trị `inherit` không tồn tại trong CSS. Câu 24: Bạn muốn đảm bảo rằng một phần tử luôn ở một vị trí cố định trên màn hình, ngay cả khi người dùng cuộn trang. Thuộc tính `position` với giá trị nào sẽ giúp bạn đạt được điều này? A. `relative` B. `fixed` C. `absolute` D. `static` Câu 25: Sự khác biệt chính giữa `position: relative;` và `position: absolute;` trong CSS là gì? A. `relative` tạo vị trí cố định, `absolute` tạo vị trí tương đối. B. `absolute` không thể di chuyển phần tử, `relative` có thể. C. `relative` định vị dựa trên phần tử gốc, `absolute` dựa trên phần tử cha. D. `relative` định vị phần tử tương đối so với vị trí ban đầu của nó trong luồng tài liệu, trong khi `absolute` định vị phần tử tương đối so với phần tử tổ tiên đã được định vị gần nhất (hoặc viewport nếu không có).` Câu 26: Trong CSS, thuộc tính `z-index` có tác dụng gì? A. Thay đổi kích thước phần tử theo chiều dọc. B. Thay đổi độ trong suốt của phần tử. C. Xác định thứ tự xếp chồng của các phần tử khi chúng chồng lên nhau. D. Không có tác dụng cụ thể, đây là thuộc tính không còn được sử dụng. Câu 27: Cho CSS: `#box1 { width: 100px; padding: 20px; border: 1px solid black; }`. Tổng chiều rộng thực tế mà phần tử có `id= A. 100px B. 142px C. 120px D. 101px Câu 28: Bạn muốn tạo một danh sách các mục mà không có dấu chấm đầu dòng. Thuộc tính CSS nào bạn sẽ sử dụng cho thẻ ` ` hoặc ` `? A. `text-decoration: none;` B. `display: none;` C. `list-style-type: none;` D. `list-style-image: none;` Câu 29: Trong HTML, thuộc tính `id` của một phần tử phải như thế nào trong phạm vi một trang web? A. Có thể trùng lặp nếu các phần tử có cùng chức năng. B. Không cần thiết phải duy nhất, có thể sử dụng lại nhiều lần. C. Phải duy nhất trong phạm vi một phần của trang, nhưng có thể lặp lại ở phần khác. D. Phải hoàn toàn duy nhất, mỗi `id` chỉ được sử dụng cho một phần tử duy nhất trên toàn bộ trang HTML. Câu 30: Để thay đổi phông chữ của tất cả các phần tử văn bản trên trang web, bạn nên định nghĩa quy tắc CSS ở đâu? A. Trong bộ chọn `body` hoặc `html`. B. Trong bộ chọn `p` (đoạn văn). C. Trong bộ chọn `span` (văn bản nội tuyến). D. Chỉ có thể thay đổi phông chữ cho từng phần tử riêng lẻ. 1 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 1: Trong HTML, thẻ ` ` và thẻ `` đại diện cho hai loại phần tử khác nhau về cách hiển thị. Điểm khác biệt chính giữa phần tử `div` và `span` là gì? `<div>` là phần tử khối, bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn, trong khi `<span>` là phần tử nội tuyến, không tạo dòng mới và chỉ chiếm không gian cần thiết. `<div>` chỉ được sử dụng để chứa văn bản, còn `<span>` chứa được cả văn bản và hình ảnh. `<div>` có thể định dạng được chiều cao và chiều rộng, còn `<span>` thì không. `<div>` là phần tử cũ, ít được sử dụng trong HTML5, thay vào đó người ta dùng `<span>`. Câu hỏi kiểm tra sự phân biệt cơ bản giữa phần tử khối (`div`) và phần tử nội tuyến (`span`), tập trung vào cách chúng chiếm không gian và ngắt dòng. 2 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 2: Thuộc tính CSS `display` có nhiều giá trị khác nhau. Giá trị nào sau đây của thuộc tính `display` sẽ khiến một phần tử biến mất hoàn toàn khỏi trang web, không chiếm bất kỳ không gian nào, và không hiển thị? `inline` `block` `hidden` `none` Câu hỏi tập trung vào thuộc tính `display: none`, một giá trị quan trọng để ẩn phần tử hoàn toàn, khác với các cách ẩn khác (ví dụ: `visibility: hidden`). 3 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 3: Xét đoạn mã CSS sau: `#tieude { color: blue; } .chude { font-size: 16px; }`. Bộ chọn nào đang được sử dụng để định dạng cho phần tử có `id` là `tieude`? `.chude` `#tieude` `tieude` Không có bộ chọn nào định dạng cho phần tử `id` `tieude` Câu hỏi kiểm tra nhận biết cú pháp bộ chọn ID trong CSS, sử dụng ký tự `#`. 4 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 4: Khi nào thì việc sử dụng bộ chọn `class` trong CSS được ưu tiên hơn so với bộ chọn `id`? Khi chỉ có một phần tử duy nhất trên trang cần được định dạng. Khi cần định dạng một phần tử cụ thể và duy nhất, không có phần tử nào khác có cùng định dạng. Khi muốn áp dụng cùng một kiểu định dạng cho nhiều phần tử khác nhau trên trang web. Bộ chọn `id` luôn được ưu tiên hơn và nên được sử dụng trong mọi trường hợp. Câu hỏi kiểm tra sự hiểu biết về mục đích sử dụng của class so với ID, nhấn mạnh tính tái sử dụng và áp dụng cho nhiều phần tử của class. 5 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 5: Giả sử bạn có một đoạn văn bản và bạn muốn một vài từ trong đoạn văn đó có màu sắc khác biệt nhưng vẫn nằm trên cùng một dòng. Loại phần tử HTML nào phù hợp nhất để bao bọc những từ đó? Câu hỏi tình huống về việc chọn phần tử phù hợp cho định dạng nội tuyến, dẫn đến việc sử dụng `` thay vì `div` hay `p`. 6 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 6: Trong CSS, thuộc tính `border` được sử dụng để tạo đường viền xung quanh một phần tử. Để thiết lập đường viền liền nét, màu đỏ, và dày 2 pixel, cú pháp CSS nào sau đây là đúng? `border: red 2px;` `border-style: solid; border-color: red; border-width: 2px;` `border: 2px solid red;` `border-width: 2px, border-style: solid, border-color: red;` Câu hỏi kiểm tra cú pháp thuộc tính `border` và các giá trị phổ biến của nó (`solid`, color, width`). 7 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 7: Xét đoạn mã HTML: ` Đây là đoạn văn bản. `. Phần tử ` ` này đang được gán bao nhiêu `class`? Một class Hai class Ba class Không có class nào Câu hỏi kiểm tra khả năng nhận biết nhiều class được gán cho một phần tử HTML, phân tách bằng dấu cách. 8 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 8: Trong HTML, thẻ nào được sử dụng để tạo một hàng trong bảng? Câu hỏi kiểm tra kiến thức cơ bản về cấu trúc bảng HTML, cụ thể là thẻ ` ` và thẻ ` ` đều được sử dụng trong bảng HTML, nhưng chúng có mục đích khác nhau. Mục đích chính của việc sử dụng thẻ ` ` thay vì ` ` là gì? `<th>` chỉ được sử dụng cho hàng tiêu đề của bảng, còn `<td>` cho các hàng dữ liệu. `<th>` không thể chứa văn bản, chỉ chứa được hình ảnh, còn `<td>` thì ngược lại. `<th>` tạo ra ô có đường viền đậm hơn `<td>`. `<th>` thường được dùng cho các ô tiêu đề của bảng hoặc cột, với nội dung mặc định được in đậm và căn giữa, giúp nhấn mạnh tiêu đề. Câu hỏi phân biệt mục đích sử dụng của ` ` (tiêu đề ô) và ` ` (dữ liệu ô) trong bảng, liên quan đến ngữ nghĩa và hiển thị mặc định. 10 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 10: Để tạo khoảng cách giữa đường viền của phần tử và nội dung bên trong phần tử đó, thuộc tính CSS nào được sử dụng? `padding` `margin` `border-spacing` `line-height` Câu hỏi kiểm tra kiến thức về thuộc tính `padding` trong CSS box model, dùng để tạo khoảng cách bên trong. 11 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 11: Bạn muốn tạo một bố cục trang web mà trong đó các phần tử con được sắp xếp theo hàng ngang, và có thể tự động xuống dòng khi không đủ không gian. Thuộc tính `display` với giá trị nào sau đây sẽ phù hợp nhất? `block` `inline` `inline-block` `flex` Câu hỏi về ứng dụng `display: inline-block` để tạo bố cục hàng ngang linh hoạt, tự xuống dòng. 12 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 12: Trong CSS, bộ chọn nào có độ ưu tiên cao nhất khi có xung đột về quy tắc định dạng? Bộ chọn class Bộ chọn ID Bộ chọn phần tử (tag name) Bộ chọn phổ quát (*) Câu hỏi kiểm tra hiểu biết về độ ưu tiên bộ chọn CSS, ID selector có độ ưu tiên cao hơn class và element selectors. 13 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 13: Bạn cần định dạng tất cả các thẻ ` ` trên trang web có màu chữ xanh lá cây. Quy tắc CSS nào sau đây sẽ thực hiện điều này? `p { color: green; }` `.p { color: green; }` `#p { color: green; }` `element.p { color: green; }` Câu hỏi về bộ chọn phần tử (tag name) trong CSS, chọn tất cả các thẻ ` `. 14 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 14: Thuộc tính CSS `margin` được sử dụng để làm gì? Tạo đường viền xung quanh phần tử. Tạo khoảng cách giữa phần tử và các phần tử xung quanh. Định dạng màu nền cho phần tử. Thay đổi kích thước chữ trong phần tử. Câu hỏi về chức năng của thuộc tính `margin` trong CSS box model, tạo khoảng cách bên ngoài phần tử. 15 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 15: Trong CSS, để nhóm nhiều bộ chọn lại với nhau và áp dụng cùng một bộ quy tắc định dạng, bạn sử dụng dấu gì để phân tách các bộ chọn? Dấu chấm phẩy (;) Dấu cách ( ) Dấu phẩy (,) Dấu hai chấm (:) Câu hỏi về cú pháp nhóm bộ chọn trong CSS, sử dụng dấu phẩy. 16 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 16: Cho đoạn mã HTML sau: ` Nội dung 1 Nội dung 2 `. Quy tắc CSS ` .container .text { font-weight: bold; } ` có tác dụng gì? Làm đậm chữ cho tất cả các phần tử có class `container` và `text`. Làm đậm chữ cho phần tử có id `container` và tất cả các phần tử có class `text`. Không có tác dụng gì vì cú pháp CSS sai. Làm đậm chữ cho tất cả các phần tử có class `text` nằm bên trong phần tử có class `container`. Câu hỏi về bộ chọn con cháu (descendant selector) trong CSS, chọn các phần tử `.text` nằm bên trong `.container`. 17 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 17: Điều gì xảy ra khi bạn thiết lập `display: inline;` cho một phần tử ` `? Phần tử `<div>` sẽ biến mất khỏi trang. Phần tử `<div>` sẽ trở thành phần tử khối và chiếm toàn bộ chiều rộng. Phần tử `<div>` sẽ trở thành phần tử nội tuyến và chỉ chiếm không gian cần thiết cho nội dung của nó, không tạo dòng mới. Không có gì thay đổi, `<div>` vẫn luôn là phần tử khối. Câu hỏi về thay đổi kiểu hiển thị mặc định của `div` từ block sang inline. 18 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 18: Trong CSS, bạn có thể sử dụng giá trị phần trăm (%) cho thuộc tính `width`. Giá trị phần trăm này được tính dựa trên kích thước của phần tử nào? Phần tử cha chứa nó. Chính bản thân phần tử đó. Kích thước màn hình hiển thị. Không có cơ sở nào, phần trăm là giá trị tuyệt đối. Câu hỏi về đơn vị phần trăm trong CSS và cách nó tham chiếu đến kích thước phần tử cha. 19 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 19: Khi đặt tên cho `id` hoặc `class` trong HTML và CSS, quy tắc nào sau đây là đúng? Tên có thể bắt đầu bằng chữ số. Tên nên bắt đầu bằng chữ cái và chỉ chứa chữ cái, chữ số, dấu gạch ngang (-) và dấu gạch dưới (_). Tên có thể chứa dấu cách. Tên phân biệt chữ hoa và chữ thường, ví dụ `.Text` và `.text` là khác nhau. Câu hỏi về quy tắc đặt tên ID và class, chú trọng tính hợp lệ và khuyến nghị. 20 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 20: Cho đoạn mã HTML: ` Tên Tuổi An 20 `. Đoạn mã này sẽ tạo ra một bảng có bao nhiêu hàng dữ liệu (không tính hàng tiêu đề)? Một hàng Hai hàng Ba hàng Không có hàng dữ liệu nào Câu hỏi kiểm tra khả năng đọc và hiểu cấu trúc bảng HTML để xác định số hàng dữ liệu. 21 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 21: Nếu bạn muốn tạo khoảng cách giữa các ô trong một bảng HTML, thuộc tính CSS nào bạn sẽ sử dụng? `padding` `margin` `border-collapse` `border-spacing` Câu hỏi về thuộc tính CSS `border-spacing` dành riêng cho bảng, để tạo khoảng cách giữa các ô. 22 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 22: Thuộc tính CSS `float` thường được sử dụng để làm gì trong bố cục trang web? Ẩn một phần tử khỏi trang. Đặt một phần tử nổi về bên trái hoặc bên phải và cho phép các phần tử khác bao quanh nó. Thay đổi màu sắc của phần tử. Tạo hiệu ứng động cho phần tử. Câu hỏi về mục đích sử dụng thuộc tính `float` trong CSS layout, thường để tạo bố cục cột và cho phép văn bản bao quanh. 23 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 23: Trong CSS, giá trị `inherit` của một thuộc tính có nghĩa là gì? Thiết lập thuộc tính về giá trị mặc định. Ngăn chặn thuộc tính được áp dụng cho phần tử. Phần tử sẽ kế thừa giá trị của thuộc tính đó từ phần tử cha gần nhất của nó. Không có ý nghĩa gì, giá trị `inherit` không tồn tại trong CSS. Câu hỏi về giá trị `inherit` trong CSS, cho phép thuộc tính kế thừa giá trị từ phần tử cha. 24 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 24: Bạn muốn đảm bảo rằng một phần tử luôn ở một vị trí cố định trên màn hình, ngay cả khi người dùng cuộn trang. Thuộc tính `position` với giá trị nào sẽ giúp bạn đạt được điều này? `relative` `fixed` `absolute` `static` Câu hỏi về thuộc tính `position: fixed` trong CSS, tạo vị trí cố định trên viewport. 25 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 25: Sự khác biệt chính giữa `position: relative;` và `position: absolute;` trong CSS là gì? `relative` tạo vị trí cố định, `absolute` tạo vị trí tương đối. `absolute` không thể di chuyển phần tử, `relative` có thể. `relative` định vị dựa trên phần tử gốc, `absolute` dựa trên phần tử cha. `relative` định vị phần tử tương đối so với vị trí ban đầu của nó trong luồng tài liệu, trong khi `absolute` định vị phần tử tương đối so với phần tử tổ tiên đã được định vị gần nhất (hoặc viewport nếu không có).` Câu hỏi so sánh `position: relative` và `position: absolute`, nhấn mạnh cách `absolute` loại bỏ phần tử khỏi luồng tài liệu và định vị tương đối với tổ tiên định vị. 26 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 26: Trong CSS, thuộc tính `z-index` có tác dụng gì? Thay đổi kích thước phần tử theo chiều dọc. Thay đổi độ trong suốt của phần tử. Xác định thứ tự xếp chồng của các phần tử khi chúng chồng lên nhau. Không có tác dụng cụ thể, đây là thuộc tính không còn được sử dụng. Câu hỏi về thuộc tính `z-index` trong CSS, điều khiển thứ tự xếp chồng của các phần tử. 27 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 27: Cho CSS: `#box1 { width: 100px; padding: 20px; border: 1px solid black; }`. Tổng chiều rộng thực tế mà phần tử có `id="box1"` chiếm trên trang web là bao nhiêu? 100px 142px 120px 101px Câu hỏi về box model, tính toán tổng chiều rộng bao gồm width, padding và border. 28 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 28: Bạn muốn tạo một danh sách các mục mà không có dấu chấm đầu dòng. Thuộc tính CSS nào bạn sẽ sử dụng cho thẻ ` ` hoặc ` `? `text-decoration: none;` `display: none;` `list-style-type: none;` `list-style-image: none;` Câu hỏi về thuộc tính `list-style-type: none` trong CSS, loại bỏ dấu đầu dòng mặc định của danh sách. 29 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 29: Trong HTML, thuộc tính `id` của một phần tử phải như thế nào trong phạm vi một trang web? Có thể trùng lặp nếu các phần tử có cùng chức năng. Không cần thiết phải duy nhất, có thể sử dụng lại nhiều lần. Phải duy nhất trong phạm vi một phần của trang, nhưng có thể lặp lại ở phần khác. Phải hoàn toàn duy nhất, mỗi `id` chỉ được sử dụng cho một phần tử duy nhất trên toàn bộ trang HTML. Câu hỏi về tính duy nhất của ID trong HTML, mỗi ID chỉ được sử dụng một lần trên một trang. 30 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 2 Câu 30: Để thay đổi phông chữ của tất cả các phần tử văn bản trên trang web, bạn nên định nghĩa quy tắc CSS ở đâu? Trong bộ chọn `body` hoặc `html`. Trong bộ chọn `p` (đoạn văn). Trong bộ chọn `span` (văn bản nội tuyến). Chỉ có thể thay đổi phông chữ cho từng phần tử riêng lẻ. Xem kết quả Bạn ơi!!! Để xem được kết quả bạn vui lòng làm nhiệm vụ nhỏ xíu này nha LƯU Ý: Không sử dụng VPN hoặc 1.1.1.1 khi vượt link Nhận kết quả Xảy ra lỗi Bước 1: Mở tab mới, truy cập Google.com Bước 2: Tìm kiếm từ khóa: vận chuyển văn phòng giá rẻ Đổi nhiệm vụ Bước 3: Trong kết quả tìm kiếm Google, hãy tìm website giống dưới hình: (Nếu trang 1 không có hãy tìm ở trang 2, 3, 4... nhé ) Bước 4: Cuộn xuống cuối bài viết rồi bấm vào nút GIỐNG HÌNH DƯỚI và chờ 1 lát để lấy mã: Câu hỏi về phạm vi áp dụng CSS và vị trí định nghĩa quy tắc chung, bộ chọn `body` hoặc `html` là phù hợp nhất. By Wordpress Quiz plugin 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 03 Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 03 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay. Câu 1: Trong HTML và CSS, sự khác biệt cơ bản về hành vi hiển thị mặc định giữa phần tử khối (block-level) và phần tử nội tuyến (inline-level) là gì? A. Phần tử khối chỉ chiếm không gian vừa đủ nội dung, còn phần tử nội tuyến luôn chiếm toàn bộ chiều rộng. B. Phần tử khối cho phép đặt nội dung bên cạnh nó trên cùng một dòng, còn phần tử nội tuyến thì không. C. Phần tử khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn, còn phần tử nội tuyến nằm trên cùng một dòng với các phần tử khác và chỉ chiếm không gian cần thiết. D. Phần tử khối không thể chứa phần tử nội tuyến, còn phần tử nội tuyến có thể chứa phần tử khối. Câu 2: Bạn muốn tạo một đoạn văn bản riêng biệt, luôn bắt đầu trên một dòng mới và có thể thiết lập chiều rộng cố định. Loại phần tử HTML nào thường có hành vi mặc định phù hợp nhất với yêu cầu này? A. Phần tử khối (block-level) B. Phần tử nội tuyến (inline-level) C. Phần tử inline-block D. Không có loại phần tử mặc định nào có hành vi này. Câu 3: Thuộc tính CSS `display` được sử dụng để làm gì? A. Chỉ định màu nền cho phần tử. B. Thiết lập khoảng cách lề ngoài (margin) cho phần tử. C. Đặt đường viền (border) cho phần tử. D. Kiểm soát cách một phần tử HTML được hiển thị (ví dụ: khối, nội tuyến, ẩn). Câu 4: Bạn có một phần tử `` (mặc định là inline) và muốn nó hiển thị trên một dòng riêng, giống như một đoạn văn bản ` `, nhưng vẫn giữ nguyên thẻ ``. Bạn sẽ sử dụng thuộc tính CSS `display` với giá trị nào? A. block B. inline C. none D. inline-block Câu 5: Để làm ẩn hoàn toàn một phần tử HTML khỏi trang web, không chiếm không gian và không hiển thị, bạn sử dụng thuộc tính CSS `display` với giá trị nào? A. hidden B. none C. invisible D. collapse Câu 6: Bạn muốn định dạng một nhóm các phần tử ` ` trên trang web có cùng một kiểu dáng (ví dụ: màu nền, đường viền). Bộ chọn CSS nào là phù hợp nhất để áp dụng kiểu dáng chung cho nhóm này? A. Bộ chọn ID B. Bộ chọn phần tử (`div`) C. Bộ chọn Class D. Bộ chọn thuộc tính Câu 7: Mã định danh (ID) trong HTML được sử dụng để làm gì? A. Định dạng chung cho nhiều phần tử. B. Xác định loại nội dung của phần tử. C. Nhóm các phần tử có cùng hành vi. D. Xác định duy nhất một phần tử cụ thể trên trang web. Câu 8: Quy tắc đặt tên cho ID và Class trong CSS/HTML là gì? A. Có thể bắt đầu bằng số hoặc dấu gạch ngang. B. Không được bắt đầu bằng số hoặc dấu gạch ngang. C. Bắt buộc phải chứa ít nhất một dấu gạch dưới (_). D. Phải viết hoa toàn bộ. Câu 9: Cú pháp chính xác để tạo một bộ chọn CSS nhắm mục tiêu đến một phần tử có ID là "header" là gì? A. #header { ... } B. .header { ... } C. id="header" { ... } D. element#header { ... } Câu 10: Cú pháp chính xác để tạo một bộ chọn CSS nhắm mục tiêu đến tất cả các phần tử có Class là "highlight" là gì? A. #highlight { ... } B. class="highlight" { ... } C. .highlight { ... } D. element.highlight { ... } Câu 11: Một phần tử HTML có thể được áp dụng nhiều Class cùng lúc được không? Nếu có, làm thế nào? A. Không, mỗi phần tử chỉ có thể có một Class duy nhất. B. Có, bằng cách sử dụng dấu phẩy để phân tách các tên Class trong thuộc tính `class="class1,class2"`. C. Có, bằng cách sử dụng dấu chấm để phân tách các tên Class trong thuộc tính `class="class1.class2"`. D. Có, bằng cách liệt kê các tên Class cách nhau bởi dấu cách trong thuộc tính `class="class1 class2"`. Câu 12: Bạn có một phần tử ` ` với `id="intro"` và `class="text large"`. CSS nào sau đây sẽ áp dụng cho phần tử này? A. .intro { color: blue; } B. p#text { color: red; } C. #large { color: green; } D. Tất cả các CSS sau đều có thể áp dụng: `#intro { color: blue; }`, `.text { font-size: large; }`, `.large { font-weight: bold; }`. Câu 13: Trong cấu trúc bảng HTML, thẻ ` ` được sử dụng để làm gì? A. Tạo một hàng (row) trong bảng. B. Định nghĩa toàn bộ cấu trúc bảng. C. Tạo một ô dữ liệu (cell) trong bảng. D. Định nghĩa tiêu đề cho bảng. Câu 14: Thẻ HTML nào được sử dụng để định nghĩa một hàng (row) trong bảng? A. B. C. D. Câu 15: Thẻ HTML nào được sử dụng để định nghĩa một ô dữ liệu (cell) thông thường trong bảng? A. B. D. Câu 17: Xem đoạn mã HTML sau: ` Nội dung 1 Nội dung 2`. Nếu bạn áp dụng CSS `.box { border: 1px solid black; }`, kết quả hiển thị sẽ như thế nào? A. Cả hai phần tử `div` và `span` sẽ có đường viền màu đen. B. Chỉ phần tử `div` có đường viền màu đen. C. Chỉ phần tử `span` có đường viền màu đen. D. Không có phần tử nào có đường viền vì `div` và `span` là hai loại khác nhau. Câu 18: Giả sử bạn có CSS như sau: `#myElement { color: red; }`. Nếu bạn áp dụng ID "myElement" cho một phần tử ``, màu chữ của phần tử đó sẽ là gì? A. Màu đen (mặc định). B. Màu xanh dương (blue). C. Màu đỏ (red). D. Không có màu nào được áp dụng vì `span` là inline. Câu 19: Bạn muốn tạo một khung viền (border) xung quanh một đoạn văn bản ` `. Thuộc tính CSS nào sau đây liên quan đến việc thiết lập khung? A. border B. outline C. frame D. box-shadow Câu 20: Xem xét đoạn HTML: ` Đoạn văn. `. Nếu bạn áp dụng CSS `.container { display: inline; }`, điều gì có khả năng xảy ra với phần tử ` ` bên trong? A. Phần tử ` ` sẽ tự động chuyển thành inline. B. Phần tử ` ` vẫn giữ hành vi mặc định là block, nhưng phần tử `div` chứa nó sẽ hiển thị như inline. C. Phần tử ` ` sẽ bị ẩn đi. D. Trang web sẽ báo lỗi cú pháp CSS. Câu 21: Bạn muốn tạo một hộp (box) có chiều rộng và chiều cao cố định, và các hộp này có thể nằm cạnh nhau trên cùng một dòng nếu có đủ không gian, nhưng vẫn có thể thiết lập lề trên/dưới (margin-top/bottom). Bạn nên sử dụng giá trị nào cho thuộc tính `display`? A. block B. inline C. none D. inline-block Câu 22: Điều nào sau đây là SAI khi nói về phần tử nội tuyến (inline-level)? A. Chúng không bắt đầu trên một dòng mới. B. Chúng chỉ chiếm không gian vừa đủ nội dung của chúng. C. Bạn có thể thiết lập chiều rộng (`width`) và chiều cao (`height`) cố định cho chúng một cách hiệu quả. D. Các thuộc tính lề trên/dưới (margin-top/bottom) và đệm trên/dưới (padding-top/bottom) có thể có hành vi không mong muốn hoặc không áp dụng được đầy đủ. Câu 23: Bạn có một danh sách các mục (` ` trong thẻ ` `) và muốn mỗi mục hiển thị thành một cột trong một hàng duy nhất thay vì mỗi mục trên một dòng riêng. Bạn có thể sử dụng thuộc tính `display` với giá trị nào cho các phần tử ` `? A. block B. none C. table-cell D. inline-block Câu 24: Giả sử bạn có một phần tử `Submit`. CSS nào sau đây sẽ làm thay đổi màu nền của nút này thành xanh lá cây? A. #submitBtn { background-color: green; } B. .submitBtn { background-color: green; } C. button[id="submitBtn"] { background-color: green; } D. element#submitBtn { background-color: green; } Câu 25: Trong một bảng HTML, thẻ ` C. D. Câu 16: Thẻ HTML nào được sử dụng để định nghĩa một ô tiêu đề (header cell) trong bảng, thường được trình duyệt hiển thị với định dạng in đậm và căn giữa mặc định? A. B. C. ` được sử dụng để làm gì? A. Định nghĩa chân trang của bảng. B. Nhóm các hàng tiêu đề của bảng. C. Cung cấp tiêu đề hoặc mô tả cho bảng. D. Định nghĩa phần thân của bảng. Câu 26: Bạn có một phần tử ``. Bạn muốn áp dụng các kiểu dáng từ cả hai lớp "responsive-img" và "small". CSS nào sau đây sẽ nhắm mục tiêu chính xác đến phần tử này? A. .responsive-img, .small { ... } B. .responsive-img.small { ... } C. #responsive-img #small { ... } D. img .responsive-img .small { ... } Câu 27: Tại sao việc áp dụng thuộc tính `width: 200px;` cho một phần tử `` (mặc định là inline) trong CSS thường không có hiệu quả hiển thị như mong đợi? A. Phần tử inline theo mặc định chỉ chiếm không gian cần thiết cho nội dung và bỏ qua các thiết lập `width` và `height` cố định. B. Thẻ `` không hỗ trợ thuộc tính `width` trong CSS. C. Bạn cần sử dụng thuộc tính `size` thay vì `width` cho phần tử ``. D. Chỉ các phần tử block mới có thể nhận thuộc tính `width`. Câu 28: Xem xét đoạn mã HTML: ` Tiêu đề Nội dung. `. CSS nào sau đây sẽ chỉ áp dụng màu xanh cho đoạn văn bản có class "content" nằm bên trong phần tử có id "main"? A. .content { color: blue; } B. #main { color: blue; } C. div p { color: blue; } D. #main .content { color: blue; } Câu 29: Bạn muốn tạo một đường viền màu đỏ, nét liền, dày 2 pixel xung quanh một hình ảnh. Thuộc tính CSS `border` đầy đủ sẽ là gì? A. border: 2px solid red; B. border-width: 2px; border-style: solid; border-color: red; C. border: red solid 2px; D. border-color: red; border-style: solid; border-thickness: 2px; Câu 30: Điều gì xảy ra khi bạn đặt thuộc tính `display: inline-block;` cho một phần tử `` (mặc định là inline)? A. Phần tử trở thành block và chiếm toàn bộ chiều rộng. B. Phần tử bị ẩn khỏi trang. C. Phần tử vẫn nằm trên cùng dòng với các phần tử khác (như inline) nhưng bạn có thể thiết lập chiều rộng, chiều cao, lề trên/dưới (như block). D. Hành vi của phần tử không thay đổi vì `` đã là inline. 1 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 1: Trong HTML và CSS, sự khác biệt cơ bản về hành vi hiển thị mặc định giữa phần tử khối (block-level) và phần tử nội tuyến (inline-level) là gì? Phần tử khối chỉ chiếm không gian vừa đủ nội dung, còn phần tử nội tuyến luôn chiếm toàn bộ chiều rộng. Phần tử khối cho phép đặt nội dung bên cạnh nó trên cùng một dòng, còn phần tử nội tuyến thì không. Phần tử khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn, còn phần tử nội tuyến nằm trên cùng một dòng với các phần tử khác và chỉ chiếm không gian cần thiết. Phần tử khối không thể chứa phần tử nội tuyến, còn phần tử nội tuyến có thể chứa phần tử khối. 2 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 2: Bạn muốn tạo một đoạn văn bản riêng biệt, luôn bắt đầu trên một dòng mới và có thể thiết lập chiều rộng cố định. Loại phần tử HTML nào thường có hành vi mặc định phù hợp nhất với yêu cầu này? Phần tử khối (block-level) Phần tử nội tuyến (inline-level) Phần tử inline-block Không có loại phần tử mặc định nào có hành vi này. 3 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 3: Thuộc tính CSS `display` được sử dụng để làm gì? Chỉ định màu nền cho phần tử. Thiết lập khoảng cách lề ngoài (margin) cho phần tử. Đặt đường viền (border) cho phần tử. Kiểm soát cách một phần tử HTML được hiển thị (ví dụ: khối, nội tuyến, ẩn). 4 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 4: Bạn có một phần tử `` (mặc định là inline) và muốn nó hiển thị trên một dòng riêng, giống như một đoạn văn bản ` `, nhưng vẫn giữ nguyên thẻ ``. Bạn sẽ sử dụng thuộc tính CSS `display` với giá trị nào? block inline none inline-block 5 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 5: Để làm ẩn hoàn toàn một phần tử HTML khỏi trang web, không chiếm không gian và không hiển thị, bạn sử dụng thuộc tính CSS `display` với giá trị nào? hidden none invisible collapse 6 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 6: Bạn muốn định dạng một nhóm các phần tử ` ` trên trang web có cùng một kiểu dáng (ví dụ: màu nền, đường viền). Bộ chọn CSS nào là phù hợp nhất để áp dụng kiểu dáng chung cho nhóm này? Bộ chọn ID Bộ chọn phần tử (`div`) Bộ chọn Class Bộ chọn thuộc tính 7 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 7: Mã định danh (ID) trong HTML được sử dụng để làm gì? Định dạng chung cho nhiều phần tử. Xác định loại nội dung của phần tử. Nhóm các phần tử có cùng hành vi. Xác định duy nhất một phần tử cụ thể trên trang web. 8 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 8: Quy tắc đặt tên cho ID và Class trong CSS/HTML là gì? Có thể bắt đầu bằng số hoặc dấu gạch ngang. Không được bắt đầu bằng số hoặc dấu gạch ngang. Bắt buộc phải chứa ít nhất một dấu gạch dưới (_). Phải viết hoa toàn bộ. 9 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 9: Cú pháp chính xác để tạo một bộ chọn CSS nhắm mục tiêu đến một phần tử có ID là 'header' là gì? #header { ... } .header { ... } id='header' { ... } element#header { ... } 10 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 10: Cú pháp chính xác để tạo một bộ chọn CSS nhắm mục tiêu đến tất cả các phần tử có Class là 'highlight' là gì? #highlight { ... } class='highlight' { ... } .highlight { ... } element.highlight { ... } 11 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 11: Một phần tử HTML có thể được áp dụng nhiều Class cùng lúc được không? Nếu có, làm thế nào? Không, mỗi phần tử chỉ có thể có một Class duy nhất. Có, bằng cách sử dụng dấu phẩy để phân tách các tên Class trong thuộc tính `class='class1,class2'`. Có, bằng cách sử dụng dấu chấm để phân tách các tên Class trong thuộc tính `class='class1.class2'`. Có, bằng cách liệt kê các tên Class cách nhau bởi dấu cách trong thuộc tính `class='class1 class2'`. 12 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 12: Bạn có một phần tử ` ` với `id='intro'` và `class='text large'`. CSS nào sau đây sẽ áp dụng cho phần tử này? .intro { color: blue; } p#text { color: red; } #large { color: green; } Tất cả các CSS sau đều có thể áp dụng: `#intro { color: blue; }`, `.text { font-size: large; }`, `.large { font-weight: bold; }`. 13 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 13: Trong cấu trúc bảng HTML, thẻ ` ` được sử dụng để làm gì? Tạo một hàng (row) trong bảng. Định nghĩa toàn bộ cấu trúc bảng. Tạo một ô dữ liệu (cell) trong bảng. Định nghĩa tiêu đề cho bảng. 14 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 14: Thẻ HTML nào được sử dụng để định nghĩa một hàng (row) trong bảng? <tr> <td> <th> <table> 15 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 15: Thẻ HTML nào được sử dụng để định nghĩa một ô dữ liệu (cell) thông thường trong bảng? <tr> <th> <td> <caption> 16 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 16: Thẻ HTML nào được sử dụng để định nghĩa một ô tiêu đề (header cell) trong bảng, thường được trình duyệt hiển thị với định dạng in đậm và căn giữa mặc định? <td> <th> <tr> <thead> 17 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 17: Xem đoạn mã HTML sau: ` Nội dung 1 Nội dung 2`. Nếu bạn áp dụng CSS `.box { border: 1px solid black; }`, kết quả hiển thị sẽ như thế nào? Cả hai phần tử `div` và `span` sẽ có đường viền màu đen. Chỉ phần tử `div` có đường viền màu đen. Chỉ phần tử `span` có đường viền màu đen. Không có phần tử nào có đường viền vì `div` và `span` là hai loại khác nhau. 18 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 18: Giả sử bạn có CSS như sau: `#myElement { color: red; }`. Nếu bạn áp dụng ID 'myElement' cho một phần tử ``, màu chữ của phần tử đó sẽ là gì? Màu đen (mặc định). Màu xanh dương (blue). Màu đỏ (red). Không có màu nào được áp dụng vì `span` là inline. 19 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 19: Bạn muốn tạo một khung viền (border) xung quanh một đoạn văn bản ` `. Thuộc tính CSS nào sau đây liên quan đến việc thiết lập khung? border outline frame box-shadow 20 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 20: Xem xét đoạn HTML: ` Đoạn văn. `. Nếu bạn áp dụng CSS `.container { display: inline; }`, điều gì có khả năng xảy ra với phần tử ` ` bên trong? Phần tử `<p>` sẽ tự động chuyển thành inline. Phần tử `<p>` vẫn giữ hành vi mặc định là block, nhưng phần tử `div` chứa nó sẽ hiển thị như inline. Phần tử `<p>` sẽ bị ẩn đi. Trang web sẽ báo lỗi cú pháp CSS. 21 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 21: Bạn muốn tạo một hộp (box) có chiều rộng và chiều cao cố định, và các hộp này có thể nằm cạnh nhau trên cùng một dòng nếu có đủ không gian, nhưng vẫn có thể thiết lập lề trên/dưới (margin-top/bottom). Bạn nên sử dụng giá trị nào cho thuộc tính `display`? block inline none inline-block 22 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 22: Điều nào sau đây là SAI khi nói về phần tử nội tuyến (inline-level)? Chúng không bắt đầu trên một dòng mới. Chúng chỉ chiếm không gian vừa đủ nội dung của chúng. Bạn có thể thiết lập chiều rộng (`width`) và chiều cao (`height`) cố định cho chúng một cách hiệu quả. Các thuộc tính lề trên/dưới (margin-top/bottom) và đệm trên/dưới (padding-top/bottom) có thể có hành vi không mong muốn hoặc không áp dụng được đầy đủ. 23 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 23: Bạn có một danh sách các mục (` ` trong thẻ ` `) và muốn mỗi mục hiển thị thành một cột trong một hàng duy nhất thay vì mỗi mục trên một dòng riêng. Bạn có thể sử dụng thuộc tính `display` với giá trị nào cho các phần tử ` `? block none table-cell inline-block 24 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 24: Giả sử bạn có một phần tử `Submit`. CSS nào sau đây sẽ làm thay đổi màu nền của nút này thành xanh lá cây? #submitBtn { background-color: green; } .submitBtn { background-color: green; } button[id='submitBtn'] { background-color: green; } element#submitBtn { background-color: green; } 25 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 25: Trong một bảng HTML, thẻ ` ` được sử dụng để làm gì? Định nghĩa chân trang của bảng. Nhóm các hàng tiêu đề của bảng. Cung cấp tiêu đề hoặc mô tả cho bảng. Định nghĩa phần thân của bảng. 26 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 26: Bạn có một phần tử ``. Bạn muốn áp dụng các kiểu dáng từ cả hai lớp 'responsive-img' và 'small'. CSS nào sau đây sẽ nhắm mục tiêu chính xác đến phần tử này? .responsive-img, .small { ... } .responsive-img.small { ... } #responsive-img #small { ... } img .responsive-img .small { ... } 27 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 27: Tại sao việc áp dụng thuộc tính `width: 200px;` cho một phần tử `` (mặc định là inline) trong CSS thường không có hiệu quả hiển thị như mong đợi? Phần tử inline theo mặc định chỉ chiếm không gian cần thiết cho nội dung và bỏ qua các thiết lập `width` và `height` cố định. Thẻ `<a>` không hỗ trợ thuộc tính `width` trong CSS. Bạn cần sử dụng thuộc tính `size` thay vì `width` cho phần tử `<a>`. Chỉ các phần tử block mới có thể nhận thuộc tính `width`. 28 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 28: Xem xét đoạn mã HTML: ` Tiêu đề Nội dung. `. CSS nào sau đây sẽ chỉ áp dụng màu xanh cho đoạn văn bản có class 'content' nằm bên trong phần tử có id 'main'? .content { color: blue; } #main { color: blue; } div p { color: blue; } #main .content { color: blue; } 29 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 29: Bạn muốn tạo một đường viền màu đỏ, nét liền, dày 2 pixel xung quanh một hình ảnh. Thuộc tính CSS `border` đầy đủ sẽ là gì? border: 2px solid red; border-width: 2px; border-style: solid; border-color: red; border: red solid 2px; border-color: red; border-style: solid; border-thickness: 2px; 30 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 3 Câu 30: Điều gì xảy ra khi bạn đặt thuộc tính `display: inline-block;` cho một phần tử `` (mặc định là inline)? Phần tử trở thành block và chiếm toàn bộ chiều rộng. Phần tử bị ẩn khỏi trang. Phần tử vẫn nằm trên cùng dòng với các phần tử khác (như inline) nhưng bạn có thể thiết lập chiều rộng, chiều cao, lề trên/dưới (như block). Hành vi của phần tử không thay đổi vì `<img>` đã là inline. Xem kết quả Bạn ơi!!! Để xem được kết quả bạn vui lòng làm nhiệm vụ nhỏ xíu này nha LƯU Ý: Không sử dụng VPN hoặc 1.1.1.1 khi vượt link Nhận kết quả Xảy ra lỗi Bước 1: Mở tab mới, truy cập Google.com Bước 2: Tìm kiếm từ khóa: vận chuyển văn phòng giá rẻ Đổi nhiệm vụ Bước 3: Trong kết quả tìm kiếm Google, hãy tìm website giống dưới hình: (Nếu trang 1 không có hãy tìm ở trang 2, 3, 4... nhé ) Bước 4: Cuộn xuống cuối bài viết rồi bấm vào nút GIỐNG HÌNH DƯỚI và chờ 1 lát để lấy mã: By Wordpress Quiz plugin 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 04 Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 04 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay. Câu 1: Trong mô hình hộp CSS (CSS Box Model), thành phần nào nằm ngoài cùng, tạo khoảng trống giữa các phần tử và không bao gồm đường viền hay đệm? A. Content (Nội dung) B. Padding (Đệm) C. Border (Đường viền) D. Margin (Lề ngoài) Câu 2: Giả sử bạn có một phần tử `div` với CSS sau: `width: 200px; padding: 10px; border: 5px solid black; margin: 15px;`. Theo mô hình hộp mặc định (`box-sizing: content-box;`), tổng chiều rộng mà phần tử này chiếm trên trang là bao nhiêu? A. 200px B. 220px C. 250px D. 280px Câu 3: Thuộc tính CSS `display: inline-block;` mang lại đặc điểm kết hợp nào cho một phần tử? A. Phần tử nằm trên cùng một dòng với các phần tử inline khác nhưng vẫn có thể thiết lập chiều rộng, chiều cao, lề trên/dưới. B. Phần tử luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có thể, nhưng không thể thiết lập chiều cao. C. Phần tử bị ẩn hoàn toàn khỏi trang và không chiếm bất kỳ không gian nào. D. Phần tử nằm trên cùng một dòng và chỉ chiếm không gian vừa đủ nội dung, không thể thiết lập chiều rộng hay chiều cao rõ ràng. Câu 4: Bạn muốn ẩn một phần tử khỏi trang web sao cho nó không còn chiếm bất kỳ không gian nào trong bố cục. Thuộc tính CSS nào phù hợp nhất để đạt được điều này? A. visibility: hidden; B. display: none; C. opacity: 0; D. height: 0; overflow: hidden; Câu 5: Sự khác biệt cơ bản nhất giữa bộ chọn ID và bộ chọn Class trong CSS là gì? A. Bộ chọn ID dùng cho các phần tử HTML5 mới, còn Class dùng cho các phần tử cũ hơn. B. Bộ chọn ID có độ ưu tiên thấp hơn Class khi áp dụng CSS. C. Một ID chỉ được sử dụng cho một phần tử duy nhất trên trang, trong khi một Class có thể được áp dụng cho nhiều phần tử. D. Bộ chọn ID chỉ có thể định dạng màu sắc và phông chữ, còn Class có thể định dạng bố cục. Câu 6: Bạn có đoạn HTML sau: ` Nội dung `. Để áp dụng kiểu CSS chỉ khi phần tử `div` có cả hai class `box` và `primary`, bạn sẽ sử dụng bộ chọn CSS nào? A. .box .primary B. .box, .primary C. #box.primary D. .box.primary Câu 7: Khi sử dụng thuộc tính `margin` trong CSS, giá trị âm có ý nghĩa gì? A. Luôn gây ra lỗi hiển thị. B. Làm cho phần tử chồng lấn lên các phần tử liền kề. C. Làm tăng khoảng trống giữa các phần tử. D. Chỉ có tác dụng khi sử dụng thuộc tính `position: absolute;`. Câu 8: Thuộc tính CSS `box-sizing: border-box;` thay đổi cách tính kích thước của phần tử như thế nào? A. Chiều rộng và chiều cao đã đặt sẽ bao gồm cả padding và border, nội dung sẽ co lại cho vừa. B. Chiều rộng và chiều cao đã đặt chỉ áp dụng cho nội dung, padding và border được thêm vào bên ngoài. C. Padding được tính vào kích thước, nhưng border thì không. D. Border được tính vào kích thước, nhưng padding thì không. Câu 9: Bạn muốn tạo một đường viền chỉ ở phía dưới của một phần tử `div` với độ dày 2px, kiểu nét đứt và màu xanh lam. Đoạn CSS nào sau đây thực hiện đúng yêu cầu đó? A. border: 2px dashed blue; B. border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: blue; C. border-bottom: 2px dashed blue; D. border-style: dashed; border-color: blue; border-width: 2px; Câu 10: Trong HTML, thẻ ` ` dùng để tạo bảng. Để xác định một hàng trong bảng, bạn sử dụng thẻ nào? A. C. Câu 11: Thẻ ` B. D. ` trong cấu trúc bảng HTML thường được sử dụng với mục đích gì về mặt ngữ nghĩa? A. Đại diện cho các ô tiêu đề của cột hoặc hàng. B. Đại diện cho các ô dữ liệu thông thường. C. Xác định phần thân của bảng. D. Xác định phần chân của bảng. Câu 12: Bạn muốn đảm bảo rằng một phần tử `img` không bao giờ vượt quá chiều rộng của phần tử chứa nó, đồng thời vẫn giữ nguyên tỉ lệ khung hình. Thuộc tính CSS nào là quan trọng nhất để sử dụng? A. width: 100%; height: auto; B. height: 100%; width: auto; C. min-width: 100%; D. max-width: 100%; height: auto; Câu 13: Giả sử bạn có một khối `div` với nội dung quá dài so với kích thước cố định của nó. Bạn muốn nội dung thừa bị cắt bớt và không hiển thị. Thuộc tính CSS nào sẽ giúp bạn làm điều này? A. overflow: hidden; B. overflow: scroll; C. overflow: auto; D. text-overflow: ellipsis; Câu 14: Thuộc tính `visibility: hidden;` khác với `display: none;` ở điểm nào? A. `visibility: hidden;` chỉ làm ẩn nội dung, còn `display: none;` làm ẩn cả phần tử và khung. B. `visibility: hidden;` không thể áp dụng cho phần tử inline. C. `visibility: hidden;` ẩn phần tử nhưng vẫn giữ lại không gian mà nó chiếm trong bố cục, còn `display: none;` ẩn phần tử và loại bỏ nó khỏi luồng bố cục. D. `visibility: hidden;` làm cho phần tử trong suốt, còn `display: none;` làm cho nó vô hình. Câu 15: Bạn có một danh sách các mục (` `) bên trong một thẻ ` `. Bạn muốn thêm một đường viền dưới cho mỗi mục danh sách, trừ mục cuối cùng. Bộ chọn CSS kết hợp nào sau đây có thể giúp bạn làm điều này? A. li:last-child { border-bottom: none; } B. li:not(:last-child) { border-bottom: 1px solid grey; } C. ul > li { border-bottom: 1px solid grey; } li:last-child { border-bottom: none; } D. li + li { border-top: 1px solid grey; } Câu 16: Khi hai phần tử khối liền kề theo chiều dọc đều có lề ngoài (`margin`), hiện tượng gì có thể xảy ra với các lề này theo mặc định? A. Các lề dọc có thể gộp lại (margin collapsing), chỉ lấy giá trị lề lớn hơn. B. Các lề ngang có thể gộp lại. C. Các lề luôn được cộng lại tạo ra khoảng trống lớn hơn. D. Lề của phần tử thứ hai sẽ bị bỏ qua. Câu 17: Đơn vị đo nào trong CSS thường được sử dụng để thiết lập kích thước liên quan đến kích thước phông chữ của phần tử gốc (root element - ``), giúp dễ dàng thay đổi kích thước tổng thể của bố cục chỉ bằng cách thay đổi phông chữ gốc? A. px B. em C. % D. rem Câu 18: Bạn muốn tạo một khối `div` có chiều rộng bằng 50% chiều rộng của phần tử chứa nó và chiều cao cố định là 150px. Đoạn CSS nào sau đây thực hiện đúng yêu cầu đó? A. width: 50%; height: 150px; B. width: 50px; height: 150%; C. max-width: 50%; min-height: 150px; D. width: 50vw; height: 150vh; Câu 19: Khi nào bạn nên cân nhắc sử dụng thuộc tính `outline` thay vì `border` trong CSS? A. Khi muốn đường viền được tính vào kích thước của phần tử. B. Khi muốn tạo khoảng trống giữa đường viền và nội dung. C. Khi muốn tạo một đường nét xung quanh phần tử mà không ảnh hưởng đến bố cục (không chiếm không gian). D. Khi muốn tạo đường viền cho các phần tử inline. Câu 20: Bạn có một khối văn bản trong một `div`. Bạn muốn thêm khoảng trống bên trong khối `div` giữa nội dung văn bản và đường viền của `div`. Thuộc tính CSS nào được sử dụng cho mục đích này? A. margin B. padding C. border-spacing D. line-height Câu 21: Cho đoạn CSS sau: `div { margin: 10px 20px 15px; }`. Giá trị `10px`, `20px`, `15px` lần lượt áp dụng cho các lề nào của phần tử `div`? A. Trên, Dưới, Trái/Phải B. Trên/Dưới, Trái, Phải C. Trên, Trái, Phải/Dưới D. Trên, Trái/Phải, Dưới Câu 22: Bạn có một phần tử `span` (mặc định là inline). Nếu bạn áp dụng CSS `width: 100px; height: 50px;` cho phần tử này, điều gì sẽ xảy ra theo mặc định? A. Chiều rộng sẽ là 100px và chiều cao sẽ là 50px. B. Chiều rộng sẽ là 100px, nhưng chiều cao sẽ tự động điều chỉnh theo nội dung. C. Các thuộc tính `width` và `height` sẽ bị bỏ qua vì phần tử inline không nhận kích thước rõ ràng. D. Phần tử sẽ tự động chuyển thành phần tử block và nhận kích thước đã đặt. Câu 23: Để tạo một khoảng trống giữa các ô (` ` hoặc ` `) trong một bảng HTML mà không thêm border-spacing, bạn có thể sử dụng thuộc tính CSS nào trên các ô đó? A. padding B. margin C. border-width D. outline Câu 24: Trong bối cảnh thiết kế đáp ứng (responsive design), tại sao việc sử dụng đơn vị phần trăm (%) cho chiều rộng (`width`) của các khối (block elements) lại phổ biến hơn đơn vị pixel cố định? A. Đơn vị phần trăm tải trang nhanh hơn. B. Chiều rộng theo phần trăm sẽ tự động co giãn theo kích thước của phần tử chứa, giúp bố cục thích ứng với các kích thước màn hình khác nhau. C. Đơn vị phần trăm chỉ hoạt động trên thiết bị di động. D. Đơn vị phần trăm cho phép áp dụng lề âm dễ dàng hơn. Câu 25: Bạn có một phần tử `div` với `width: 300px;`. Nếu bạn thêm `padding: 20px;` và `box-sizing: border-box;`, chiều rộng thực tế của vùng nội dung bên trong `div` là bao nhiêu? A. 260px B. 300px C. 340px D. Không thể xác định nếu không biết border-width. Câu 26: Để tạo hiệu ứng khi người dùng di chuột qua một phần tử, làm thay đổi màu nền và đường viền của nó, bạn sẽ sử dụng bộ chọn giả (pseudo-class) nào kết hợp với bộ chọn của phần tử? A. :active B. :focus C. :visited D. :hover Câu 27: Giả sử bạn có đoạn HTML ` Tiêu đề `. Để áp dụng kiểu CSS chỉ cho thẻ ` ` nằm bên trong thẻ `div` có id là "header", bạn sử dụng bộ chọn nào? A. div h1 B. #header h1 C. .header h1 D. h1#header Câu 28: Thuộc tính CSS `border-radius` được sử dụng để làm gì? A. Làm tròn các góc của phần tử. B. Điều chỉnh khoảng cách giữa các chữ cái trong đường viền. C. Thay đổi kiểu đường viền. D. Tạo bóng cho phần tử. Câu 29: Bạn muốn tạo một đường viền cho một phần tử, nhưng đường viền này không được phép bị cắt bởi bất kỳ nội dung nào tràn ra ngoài phần tử. Thuộc tính nào liên quan đến `overflow` có thể cần xem xét kết hợp với border? A. overflow-border: hidden; B. border-overflow: visible; C. Kết hợp `overflow: hidden;` hoặc `overflow: auto;` trên phần tử chứa nội dung. D. Sử dụng thuộc tính `clip`. Câu 30: Khi bạn áp dụng thuộc tính `border` với một giá trị duy nhất (ví dụ: `border: 1px solid black;`), giá trị này sẽ được áp dụng cho những cạnh nào của phần tử? A. Chỉ cạnh trên và cạnh dưới. B. Chỉ cạnh trái và cạnh phải. C. Chỉ cạnh dưới. D. Tất cả bốn cạnh (trên, dưới, trái, phải). 1 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 1: Trong mô hình hộp CSS (CSS Box Model), thành phần nào nằm ngoài cùng, tạo khoảng trống giữa các phần tử và không bao gồm đường viền hay đệm? Content (Nội dung) Padding (Đệm) Border (Đường viền) Margin (Lề ngoài) 2 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 2: Giả sử bạn có một phần tử `div` với CSS sau: `width: 200px; padding: 10px; border: 5px solid black; margin: 15px;`. Theo mô hình hộp mặc định (`box-sizing: content-box;`), tổng chiều rộng mà phần tử này chiếm trên trang là bao nhiêu? 200px 220px 250px 280px 3 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 3: Thuộc tính CSS `display: inline-block;` mang lại đặc điểm kết hợp nào cho một phần tử? Phần tử nằm trên cùng một dòng với các phần tử inline khác nhưng vẫn có thể thiết lập chiều rộng, chiều cao, lề trên/dưới. Phần tử luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có thể, nhưng không thể thiết lập chiều cao. Phần tử bị ẩn hoàn toàn khỏi trang và không chiếm bất kỳ không gian nào. Phần tử nằm trên cùng một dòng và chỉ chiếm không gian vừa đủ nội dung, không thể thiết lập chiều rộng hay chiều cao rõ ràng. 4 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 4: Bạn muốn ẩn một phần tử khỏi trang web sao cho nó không còn chiếm bất kỳ không gian nào trong bố cục. Thuộc tính CSS nào phù hợp nhất để đạt được điều này? visibility: hidden; display: none; opacity: 0; height: 0; overflow: hidden; 5 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 5: Sự khác biệt cơ bản nhất giữa bộ chọn ID và bộ chọn Class trong CSS là gì? Bộ chọn ID dùng cho các phần tử HTML5 mới, còn Class dùng cho các phần tử cũ hơn. Bộ chọn ID có độ ưu tiên thấp hơn Class khi áp dụng CSS. Một ID chỉ được sử dụng cho một phần tử duy nhất trên trang, trong khi một Class có thể được áp dụng cho nhiều phần tử. Bộ chọn ID chỉ có thể định dạng màu sắc và phông chữ, còn Class có thể định dạng bố cục. 6 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 6: Bạn có đoạn HTML sau: ` Nội dung `. Để áp dụng kiểu CSS chỉ khi phần tử `div` có cả hai class `box` và `primary`, bạn sẽ sử dụng bộ chọn CSS nào? .box .primary .box, .primary #box.primary .box.primary 7 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 7: Khi sử dụng thuộc tính `margin` trong CSS, giá trị âm có ý nghĩa gì? Luôn gây ra lỗi hiển thị. Làm cho phần tử chồng lấn lên các phần tử liền kề. Làm tăng khoảng trống giữa các phần tử. Chỉ có tác dụng khi sử dụng thuộc tính `position: absolute;`. 8 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 8: Thuộc tính CSS `box-sizing: border-box;` thay đổi cách tính kích thước của phần tử như thế nào? Chiều rộng và chiều cao đã đặt sẽ bao gồm cả padding và border, nội dung sẽ co lại cho vừa. Chiều rộng và chiều cao đã đặt chỉ áp dụng cho nội dung, padding và border được thêm vào bên ngoài. Padding được tính vào kích thước, nhưng border thì không. Border được tính vào kích thước, nhưng padding thì không. 9 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 9: Bạn muốn tạo một đường viền chỉ ở phía dưới của một phần tử `div` với độ dày 2px, kiểu nét đứt và màu xanh lam. Đoạn CSS nào sau đây thực hiện đúng yêu cầu đó? border: 2px dashed blue; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: blue; border-bottom: 2px dashed blue; border-style: dashed; border-color: blue; border-width: 2px; 10 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 10: Trong HTML, thẻ ` ` dùng để tạo bảng. Để xác định một *hàng* trong bảng, bạn sử dụng thẻ nào? <td> <tr> <th> <tbody> 11 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 11: Thẻ ` ` trong cấu trúc bảng HTML thường được sử dụng với mục đích gì về mặt ngữ nghĩa? Đại diện cho các ô tiêu đề của cột hoặc hàng. Đại diện cho các ô dữ liệu thông thường. Xác định phần thân của bảng. Xác định phần chân của bảng. 12 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 12: Bạn muốn đảm bảo rằng một phần tử `img` không bao giờ vượt quá chiều rộng của phần tử chứa nó, đồng thời vẫn giữ nguyên tỉ lệ khung hình. Thuộc tính CSS nào là quan trọng nhất để sử dụng? width: 100%; height: auto; height: 100%; width: auto; min-width: 100%; max-width: 100%; height: auto; 13 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 13: Giả sử bạn có một khối `div` với nội dung quá dài so với kích thước cố định của nó. Bạn muốn nội dung thừa bị cắt bớt và không hiển thị. Thuộc tính CSS nào sẽ giúp bạn làm điều này? overflow: hidden; overflow: scroll; overflow: auto; text-overflow: ellipsis; 14 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 14: Thuộc tính `visibility: hidden;` khác với `display: none;` ở điểm nào? `visibility: hidden;` chỉ làm ẩn nội dung, còn `display: none;` làm ẩn cả phần tử và khung. `visibility: hidden;` không thể áp dụng cho phần tử inline. `visibility: hidden;` ẩn phần tử nhưng vẫn giữ lại không gian mà nó chiếm trong bố cục, còn `display: none;` ẩn phần tử và loại bỏ nó khỏi luồng bố cục. `visibility: hidden;` làm cho phần tử trong suốt, còn `display: none;` làm cho nó vô hình. 15 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 15: Bạn có một danh sách các mục (` `) bên trong một thẻ ` `. Bạn muốn thêm một đường viền dưới cho *mỗi* mục danh sách, trừ mục cuối cùng. Bộ chọn CSS kết hợp nào sau đây có thể giúp bạn làm điều này? li:last-child { border-bottom: none; } li:not(:last-child) { border-bottom: 1px solid grey; } ul > li { border-bottom: 1px solid grey; } li:last-child { border-bottom: none; } li + li { border-top: 1px solid grey; } 16 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 16: Khi hai phần tử khối liền kề theo chiều dọc đều có lề ngoài (`margin`), hiện tượng gì có thể xảy ra với các lề này theo mặc định? Các lề dọc có thể gộp lại (margin collapsing), chỉ lấy giá trị lề lớn hơn. Các lề ngang có thể gộp lại. Các lề luôn được cộng lại tạo ra khoảng trống lớn hơn. Lề của phần tử thứ hai sẽ bị bỏ qua. 17 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 17: Đơn vị đo nào trong CSS thường được sử dụng để thiết lập kích thước liên quan đến kích thước phông chữ của phần tử gốc (root element - ``), giúp dễ dàng thay đổi kích thước tổng thể của bố cục chỉ bằng cách thay đổi phông chữ gốc? px em % rem 18 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 18: Bạn muốn tạo một khối `div` có chiều rộng bằng 50% chiều rộng của phần tử chứa nó và chiều cao cố định là 150px. Đoạn CSS nào sau đây thực hiện đúng yêu cầu đó? width: 50%; height: 150px; width: 50px; height: 150%; max-width: 50%; min-height: 150px; width: 50vw; height: 150vh; 19 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 19: Khi nào bạn nên cân nhắc sử dụng thuộc tính `outline` thay vì `border` trong CSS? Khi muốn đường viền được tính vào kích thước của phần tử. Khi muốn tạo khoảng trống giữa đường viền và nội dung. Khi muốn tạo một đường nét xung quanh phần tử mà không ảnh hưởng đến bố cục (không chiếm không gian). Khi muốn tạo đường viền cho các phần tử inline. 20 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 20: Bạn có một khối văn bản trong một `div`. Bạn muốn thêm khoảng trống bên trong khối `div` giữa nội dung văn bản và đường viền của `div`. Thuộc tính CSS nào được sử dụng cho mục đích này? margin padding border-spacing line-height 21 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 21: Cho đoạn CSS sau: `div { margin: 10px 20px 15px; }`. Giá trị `10px`, `20px`, `15px` lần lượt áp dụng cho các lề nào của phần tử `div`? Trên, Dưới, Trái/Phải Trên/Dưới, Trái, Phải Trên, Trái, Phải/Dưới Trên, Trái/Phải, Dưới 22 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 22: Bạn có một phần tử `span` (mặc định là inline). Nếu bạn áp dụng CSS `width: 100px; height: 50px;` cho phần tử này, điều gì sẽ xảy ra theo mặc định? Chiều rộng sẽ là 100px và chiều cao sẽ là 50px. Chiều rộng sẽ là 100px, nhưng chiều cao sẽ tự động điều chỉnh theo nội dung. Các thuộc tính `width` và `height` sẽ bị bỏ qua vì phần tử inline không nhận kích thước rõ ràng. Phần tử sẽ tự động chuyển thành phần tử block và nhận kích thước đã đặt. 23 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 23: Để tạo một khoảng trống giữa các ô (` ` hoặc ` `) trong một bảng HTML mà không thêm border-spacing, bạn có thể sử dụng thuộc tính CSS nào trên các ô đó? padding margin border-width outline 24 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 24: Trong bối cảnh thiết kế đáp ứng (responsive design), tại sao việc sử dụng đơn vị phần trăm (%) cho chiều rộng (`width`) của các khối (block elements) lại phổ biến hơn đơn vị pixel cố định? Đơn vị phần trăm tải trang nhanh hơn. Chiều rộng theo phần trăm sẽ tự động co giãn theo kích thước của phần tử chứa, giúp bố cục thích ứng với các kích thước màn hình khác nhau. Đơn vị phần trăm chỉ hoạt động trên thiết bị di động. Đơn vị phần trăm cho phép áp dụng lề âm dễ dàng hơn. 25 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 25: Bạn có một phần tử `div` với `width: 300px;`. Nếu bạn thêm `padding: 20px;` và `box-sizing: border-box;`, chiều rộng thực tế của vùng nội dung bên trong `div` là bao nhiêu? 260px 300px 340px Không thể xác định nếu không biết border-width. 26 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 26: Để tạo hiệu ứng khi người dùng di chuột qua một phần tử, làm thay đổi màu nền và đường viền của nó, bạn sẽ sử dụng bộ chọn giả (pseudo-class) nào kết hợp với bộ chọn của phần tử? :active :focus :visited :hover 27 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 27: Giả sử bạn có đoạn HTML ` Tiêu đề `. Để áp dụng kiểu CSS chỉ cho thẻ ` ` nằm bên trong thẻ `div` có id là 'header', bạn sử dụng bộ chọn nào? div h1 #header h1 .header h1 h1#header 28 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 28: Thuộc tính CSS `border-radius` được sử dụng để làm gì? Làm tròn các góc của phần tử. Điều chỉnh khoảng cách giữa các chữ cái trong đường viền. Thay đổi kiểu đường viền. Tạo bóng cho phần tử. 29 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 29: Bạn muốn tạo một đường viền cho một phần tử, nhưng đường viền này không được phép bị cắt bởi bất kỳ nội dung nào tràn ra ngoài phần tử. Thuộc tính nào liên quan đến `overflow` có thể cần xem xét kết hợp với border? overflow-border: hidden; border-overflow: visible; Kết hợp `overflow: hidden;` hoặc `overflow: auto;` trên phần tử chứa nội dung. Sử dụng thuộc tính `clip`. 30 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 4 Câu 30: Khi bạn áp dụng thuộc tính `border` với một giá trị duy nhất (ví dụ: `border: 1px solid black;`), giá trị này sẽ được áp dụng cho những cạnh nào của phần tử? Chỉ cạnh trên và cạnh dưới. Chỉ cạnh trái và cạnh phải. Chỉ cạnh dưới. Tất cả bốn cạnh (trên, dưới, trái, phải). Xem kết quả Bạn ơi!!! Để xem được kết quả bạn vui lòng làm nhiệm vụ nhỏ xíu này nha LƯU Ý: Không sử dụng VPN hoặc 1.1.1.1 khi vượt link Nhận kết quả Xảy ra lỗi Bước 1: Mở tab mới, truy cập Google.com Bước 2: Tìm kiếm từ khóa: vận chuyển văn phòng giá rẻ Đổi nhiệm vụ Bước 3: Trong kết quả tìm kiếm Google, hãy tìm website giống dưới hình: (Nếu trang 1 không có hãy tìm ở trang 2, 3, 4... nhé ) Bước 4: Cuộn xuống cuối bài viết rồi bấm vào nút GIỐNG HÌNH DƯỚI và chờ 1 lát để lấy mã: By Wordpress Quiz plugin 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Trắc nghiệm Công nghệ 10 Kết nối tri thức Bài 21: Phương pháp, phương tiện hỗ trợ thiết kế kĩ thuật Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 05 Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 05 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay. Câu 1: Mô hình hộp (CSS Box Model) trong thiết kế web mô tả cấu trúc của một phần tử HTML dưới dạng các lớp lồng nhau. Thứ tự các lớp từ ngoài vào trong là gì? A. Border, Padding, Margin, Content B. Content, Padding, Border, Margin C. Padding, Border, Margin, Content D. Margin, Border, Padding, Content Câu 2: Cho đoạn mã CSS sau: ```css div { margin: 10px 20px 15px 5px; } ``` Lề ngoài (margin) của phần tử `div` sẽ được áp dụng như thế nào? A. Tất cả các cạnh đều là 10px. B. Lề trên 10px, lề dưới 20px, lề trái 15px, lề phải 5px. C. Lề trên 10px, lề phải 20px, lề dưới 15px, lề trái 5px. D. Lề trên và dưới 10px, lề trái và phải 20px. Câu 3: Thuộc tính CSS nào được sử dụng để tạo khoảng trống bên trong đường viền (border) của một phần tử, giữa đường viền và nội dung? A. margin B. padding C. border-spacing D. outline Câu 4: Cho một phần tử `div` có chiều rộng nội dung (content width) là 200px. Nếu CSS áp dụng là `padding: 10px; border: 5px solid black; margin: 15px; box-sizing: content-box;`, thì tổng chiều rộng thực tế của phần tử `div` trên trang (bao gồm margin) là bao nhiêu? A. 200px B. 230px C. 240px D. 270px Câu 5: Tiếp tục từ Câu 4, nếu CSS áp dụng là `padding: 10px; border: 5px solid black; margin: 15px; box-sizing: border-box; width: 200px;`, thì tổng chiều rộng thực tế của phần tử `div` trên trang (bao gồm margin) là bao nhiêu? A. 200px B. 230px C. 240px D. 270px Câu 6: Hiện tượng gộp lề (margin collapsing) xảy ra khi lề trên (margin-top) và lề dưới (margin-bottom) của hai phần tử khối liền kề gặp nhau. Lề gộp lại sẽ có giá trị bằng: A. Giá trị lớn hơn giữa hai lề. B. Tổng giá trị của hai lề. C. Giá trị nhỏ hơn giữa hai lề. D. Hiệu giá trị của hai lề. Câu 7: Phần tử có thuộc tính `display: block;` trong CSS thường có đặc điểm bố cục như thế nào? A. Chỉ chiếm không gian vừa đủ nội dung và không ngắt dòng. B. Cho phép các phần tử khác nằm cạnh nó trên cùng một dòng. C. Luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn. D. Không thể thiết lập chiều rộng và chiều cao cố định. Câu 8: Phần tử có thuộc tính `display: inline;` trong CSS có đặc điểm bố cục nào sau đây? A. Luôn bắt đầu trên một dòng mới. B. Có thể thiết lập chiều rộng và chiều cao tùy ý. C. Tự động chiếm toàn bộ chiều rộng của phần tử cha. D. Nằm trên cùng một dòng với các phần tử nội tuyến khác và chỉ chiếm không gian cần thiết. Câu 9: Bạn muốn hiển thị nhiều hình ảnh nhỏ (là phần tử ``, mặc định là `inline`) trên cùng một dòng, nhưng mỗi hình ảnh cần có lề trên/dưới và một chiều rộng/chiều cao cố định. Bạn nên sử dụng giá trị nào cho thuộc tính `display`? A. inline-block B. block C. inline D. none Câu 10: Sự khác biệt chính giữa `display: none;` và `visibility: hidden;` trong CSS là gì? A. `display: none;` chỉ ẩn nội dung, còn `visibility: hidden;` ẩn cả nội dung và phần tử. B. `display: none;` loại bỏ hoàn toàn phần tử khỏi luồng bố cục, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian của nó trên trang. C. `visibility: hidden;` làm cho phần tử trong suốt, còn `display: none;` làm cho nó không hiển thị. D. Không có sự khác biệt đáng kể giữa hai thuộc tính này. Câu 11: Để định dạng duy nhất cho một phần tử HTML cụ thể trên trang web, bộ chọn CSS nào là phù hợp nhất? A. Bộ chọn ID (ví dụ: `#myElement`) B. Bộ chọn Class (ví dụ: `.myClass`) C. Bộ chọn phần tử (ví dụ: `div`) D. Bộ chọn thuộc tính (ví dụ: `[type= Câu 12: Bạn muốn áp dụng cùng một kiểu định dạng (ví dụ: khung viền màu xanh, lề trong 5px) cho nhiều phần tử `div` và `p` khác nhau trên trang mà không cần viết lại CSS cho từng loại phần tử. Bạn nên sử dụng bộ chọn nào? A. Bộ chọn ID B. Bộ chọn Class C. Bộ chọn phần tử theo tên (`div, p`) D. Bộ chọn hậu duệ (`div p`) Câu 13: Một phần tử HTML có thể có bao nhiêu lớp (class)? A. Chỉ một lớp duy nhất. B. Tối đa ba lớp. C. Nhiều lớp, cách nhau bằng dấu cách. D. Nhiều lớp, cách nhau bằng dấu phẩy. Câu 14: Để căn giữa một phần tử khối (ví dụ: `div`) nằm ngang trong phần tử cha của nó, phương pháp phổ biến nhất sử dụng thuộc tính `margin` là gì? A. margin: center; B. margin: auto 0; C. margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; D. margin: 0 auto; Câu 15: Cho đoạn mã HTML và CSS sau: ```html A. Màu đen (black) B. Màu đỏ (red) C. Không có đường viền. D. Màu mặc định của trình duyệt. Câu 16: Khi nào bạn nên sử dụng thuộc tính `outline` thay vì `border` trong CSS? A. Khi muốn đường viền hiển thị bên trong padding. B. Khi muốn đường viền là một phần của kích thước phần tử theo `box-sizing: content-box;`. C. Khi muốn tạo một đường viền không chiếm không gian trong bố cục trang và không ảnh hưởng đến kích thước tổng thể của phần tử. D. Khi muốn đường viền có bán kính bo tròn (border-radius). Câu 17: Thuộc tính `border-radius` trong CSS dùng để làm gì? A. Bo tròn các góc của đường viền. B. Thiết lập khoảng cách giữa các ô trong bảng. C. Tạo bóng cho phần tử. D. Định dạng kiểu đường viền (nét liền, nét đứt...). Câu 18: Cho đoạn mã CSS sau: ```css p { padding: 10px; } .highlight { padding: 20px; } #intro { padding: 5px; } ``` Nếu một phần tử ` ` có cả `class= A. 10px (từ bộ chọn phần tử) B. 20px (từ bộ chọn class) C. 5px (từ bộ chọn ID) D. Tổng của tất cả các giá trị: 10px + 20px + 5px = 35px. Câu 19: Điều gì xảy ra khi bạn áp dụng `width: 50%;` cho một phần tử `div`? A. Chiều rộng của div sẽ là 50px. B. Chiều rộng của div sẽ bằng 50% chiều rộng của phần tử cha chứa nó. C. Chiều rộng của div sẽ bằng 50% chiều rộng màn hình. D. Thuộc tính `width` sẽ không có tác dụng vì div là phần tử khối. Câu 20: Cho đoạn mã HTML và CSS: ```html A. Hiển thị trên cùng dòng với các phần tử nội tuyến khác, có khung viền và kích thước 100px x 50px. B. Hiển thị trên một dòng mới, có khung viền và kích thước 100px x 50px. C. Hiển thị trên cùng dòng nhưng thuộc tính width/height sẽ bị bỏ qua. D. Không hiển thị do `span` mặc định là `inline`. Câu 21: Bạn muốn tạo một khoảng trống giữa hai phần tử khối liền kề theo chiều dọc. Thuộc tính nào trong Box Model được sử dụng cho mục đích này? A. padding-top hoặc padding-bottom B. border-top hoặc border-bottom C. margin-top hoặc margin-bottom D. height Câu 22: Để loại bỏ hoàn toàn đường viền (border) của một phần tử, bạn có thể sử dụng thuộc tính `border-style` với giá trị nào? A. border-style: none; B. border: 0; C. border-width: 0; D. Cả A, B, C đều có thể loại bỏ hoặc làm cho đường viền không hiển thị. Câu 23: Trong một bảng HTML (` `), thuộc tính CSS nào giúp kiểm soát khoảng cách giữa các ô (cells)? A. border-spacing B. padding C. margin D. cell-spacing Câu 24: Thuộc tính `border-collapse: collapse;` áp dụng cho phần tử ` ` có tác dụng gì? A. Gộp lề của các ô trong bảng. B. Gộp các đường viền liền kề giữa các ô và hàng/cột thành một đường viền duy nhất. C. Ẩn tất cả các đường viền trong bảng. D. Làm cho đường viền của bảng co lại theo nội dung. Câu 25: Bạn muốn đặt lề trên và dưới là 10px, còn lề trái và phải là 20px cho một phần tử. Cách viết tắt đúng cho thuộc tính `padding` là gì? A. padding: 10px 20px; B. padding: 10px 20px 10px 20px; C. padding: 10px 10px 20px 20px; D. padding: 20px 10px; Câu 26: Giả sử bạn có một phần tử `div` với nội dung là một đoạn văn bản. Bạn muốn tạo một khoảng cách 15px giữa đoạn văn bản và đường viền của `div`. Bạn nên sử dụng thuộc tính nào và giá trị bao nhiêu? A. margin: 15px; B. padding: 15px; C. border-width: 15px; D. space: 15px; Câu 27: Thuộc tính CSS nào cho phép bạn kiểm soát kiểu của đường viền (ví dụ: nét liền, nét đứt, nét chấm...)? A. border-width B. border-color C. border-style D. border-format Câu 28: Khi áp dụng lề dọc (margin-top, margin-bottom) cho các phần tử `inline`, kết quả hiển thị trên trình duyệt thường như thế nào? A. Lề dọc thường không có tác dụng. B. Lề dọc được áp dụng đầy đủ, đẩy các dòng văn bản lên/xuống. C. Lề trên có tác dụng nhưng lề dưới thì không. D. Lề dưới có tác dụng nhưng lề trên thì không. Câu 29: Bạn muốn tạo một khung viền màu xám, độ dày 2px, kiểu nét đứt cho một phần tử. Cách viết tắt (shorthand) đúng cho thuộc tính `border` là gì? A. border: gray 2px dashed; B. border: 2px gray dashed; C. border: dashed gray 2px; D. border: 2px dashed gray; Câu 30: Sự khác biệt cơ bản về cách thức hoạt động của `box-sizing: content-box;` (mặc định) và `box-sizing: border-box;` khi thiết lập `width` và `height` là gì? A. `content-box`: `width/height` chỉ áp dụng cho nội dung; `border-box`: `width/height` bao gồm cả padding và border. B. `content-box`: `width/height` bao gồm cả margin; `border-box`: `width/height` chỉ áp dụng cho nội dung. C. `content-box`: `width/height` bao gồm cả padding và border; `border-box`: `width/height` chỉ áp dụng cho nội dung. D. `content-box`: `width/height` không bao gồm gì cả; `border-box`: `width/height` bao gồm tất cả (margin, border, padding, content). 1 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 1: Mô hình hộp (CSS Box Model) trong thiết kế web mô tả cấu trúc của một phần tử HTML dưới dạng các lớp lồng nhau. Thứ tự các lớp từ ngoài vào trong là gì? Border, Padding, Margin, Content Content, Padding, Border, Margin Padding, Border, Margin, Content Margin, Border, Padding, Content 2 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 2: Cho đoạn mã CSS sau: ```css div { margin: 10px 20px 15px 5px; } ``` Lề ngoài (margin) của phần tử `div` sẽ được áp dụng như thế nào? Tất cả các cạnh đều là 10px. Lề trên 10px, lề dưới 20px, lề trái 15px, lề phải 5px. Lề trên 10px, lề phải 20px, lề dưới 15px, lề trái 5px. Lề trên và dưới 10px, lề trái và phải 20px. 3 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 3: Thuộc tính CSS nào được sử dụng để tạo khoảng trống *bên trong* đường viền (border) của một phần tử, giữa đường viền và nội dung? margin padding border-spacing outline 4 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 4: Cho một phần tử `div` có chiều rộng nội dung (content width) là 200px. Nếu CSS áp dụng là `padding: 10px; border: 5px solid black; margin: 15px; box-sizing: content-box;`, thì tổng chiều rộng thực tế của phần tử `div` trên trang (bao gồm margin) là bao nhiêu? 200px 230px 240px 270px 5 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 5: Tiếp tục từ Câu 4, nếu CSS áp dụng là `padding: 10px; border: 5px solid black; margin: 15px; box-sizing: border-box; width: 200px;`, thì tổng chiều rộng thực tế của phần tử `div` trên trang (bao gồm margin) là bao nhiêu? 200px 230px 240px 270px 6 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 6: Hiện tượng gộp lề (margin collapsing) xảy ra khi lề trên (margin-top) và lề dưới (margin-bottom) của hai phần tử khối liền kề gặp nhau. Lề gộp lại sẽ có giá trị bằng: Giá trị lớn hơn giữa hai lề. Tổng giá trị của hai lề. Giá trị nhỏ hơn giữa hai lề. Hiệu giá trị của hai lề. 7 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 7: Phần tử có thuộc tính `display: block;` trong CSS thường có đặc điểm bố cục như thế nào? Chỉ chiếm không gian vừa đủ nội dung và không ngắt dòng. Cho phép các phần tử khác nằm cạnh nó trên cùng một dòng. Luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn. Không thể thiết lập chiều rộng và chiều cao cố định. 8 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 8: Phần tử có thuộc tính `display: inline;` trong CSS có đặc điểm bố cục nào sau đây? Luôn bắt đầu trên một dòng mới. Có thể thiết lập chiều rộng và chiều cao tùy ý. Tự động chiếm toàn bộ chiều rộng của phần tử cha. Nằm trên cùng một dòng với các phần tử nội tuyến khác và chỉ chiếm không gian cần thiết. 9 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 9: Bạn muốn hiển thị nhiều hình ảnh nhỏ (là phần tử ``, mặc định là `inline`) trên cùng một dòng, nhưng mỗi hình ảnh cần có lề trên/dưới và một chiều rộng/chiều cao cố định. Bạn nên sử dụng giá trị nào cho thuộc tính `display`? inline-block block inline none 10 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 10: Sự khác biệt chính giữa `display: none;` và `visibility: hidden;` trong CSS là gì? `display: none;` chỉ ẩn nội dung, còn `visibility: hidden;` ẩn cả nội dung và phần tử. `display: none;` loại bỏ hoàn toàn phần tử khỏi luồng bố cục, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian của nó trên trang. `visibility: hidden;` làm cho phần tử trong suốt, còn `display: none;` làm cho nó không hiển thị. Không có sự khác biệt đáng kể giữa hai thuộc tính này. 11 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 11: Để định dạng duy nhất cho một phần tử HTML cụ thể trên trang web, bộ chọn CSS nào là phù hợp nhất? Bộ chọn ID (ví dụ: `#myElement`) Bộ chọn Class (ví dụ: `.myClass`) Bộ chọn phần tử (ví dụ: `div`) Bộ chọn thuộc tính (ví dụ: `[type="text"]`) 12 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 12: Bạn muốn áp dụng cùng một kiểu định dạng (ví dụ: khung viền màu xanh, lề trong 5px) cho nhiều phần tử `div` và `p` khác nhau trên trang mà không cần viết lại CSS cho từng loại phần tử. Bạn nên sử dụng bộ chọn nào? Bộ chọn ID Bộ chọn Class Bộ chọn phần tử theo tên (`div, p`) Bộ chọn hậu duệ (`div p`) 13 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 13: Một phần tử HTML có thể có bao nhiêu lớp (class)? Chỉ một lớp duy nhất. Tối đa ba lớp. Nhiều lớp, cách nhau bằng dấu cách. Nhiều lớp, cách nhau bằng dấu phẩy. 14 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 14: Để căn giữa một phần tử khối (ví dụ: `div`) nằm ngang trong phần tử cha của nó, phương pháp phổ biến nhất sử dụng thuộc tính `margin` là gì? margin: center; margin: auto 0; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; margin: 0 auto; 15 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 15: Cho đoạn mã HTML và CSS sau: ```html Nội dung ``` ```css .box { border: 1px solid black; } .special-box { border-color: red; } ``` Đường viền của phần tử `div` sẽ có màu gì? Màu đen (black) Màu đỏ (red) Không có đường viền. Màu mặc định của trình duyệt. 16 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 16: Khi nào bạn nên sử dụng thuộc tính `outline` thay vì `border` trong CSS? Khi muốn đường viền hiển thị bên trong padding. Khi muốn đường viền là một phần của kích thước phần tử theo `box-sizing: content-box;`. Khi muốn tạo một đường viền không chiếm không gian trong bố cục trang và không ảnh hưởng đến kích thước tổng thể của phần tử. Khi muốn đường viền có bán kính bo tròn (border-radius). 17 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 17: Thuộc tính `border-radius` trong CSS dùng để làm gì? Bo tròn các góc của đường viền. Thiết lập khoảng cách giữa các ô trong bảng. Tạo bóng cho phần tử. Định dạng kiểu đường viền (nét liền, nét đứt...). 18 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 18: Cho đoạn mã CSS sau: ```css p { padding: 10px; } .highlight { padding: 20px; } #intro { padding: 5px; } ``` Nếu một phần tử ` ` có cả `class="highlight"` và `id="intro"`, thì giá trị `padding` cuối cùng được áp dụng cho phần tử này là bao nhiêu? 10px (từ bộ chọn phần tử) 20px (từ bộ chọn class) 5px (từ bộ chọn ID) Tổng của tất cả các giá trị: 10px + 20px + 5px = 35px. 19 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 19: Điều gì xảy ra khi bạn áp dụng `width: 50%;` cho một phần tử `div`? Chiều rộng của div sẽ là 50px. Chiều rộng của div sẽ bằng 50% chiều rộng của phần tử cha chứa nó. Chiều rộng của div sẽ bằng 50% chiều rộng màn hình. Thuộc tính `width` sẽ không có tác dụng vì div là phần tử khối. 20 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 20: Cho đoạn mã HTML và CSS: ```html Inline Block ``` Phần tử `` này sẽ hiển thị như thế nào? Hiển thị trên cùng dòng với các phần tử nội tuyến khác, có khung viền và kích thước 100px x 50px. Hiển thị trên một dòng mới, có khung viền và kích thước 100px x 50px. Hiển thị trên cùng dòng nhưng thuộc tính width/height sẽ bị bỏ qua. Không hiển thị do `span` mặc định là `inline`. 21 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 21: Bạn muốn tạo một khoảng trống giữa hai phần tử khối liền kề theo chiều dọc. Thuộc tính nào trong Box Model được sử dụng cho mục đích này? padding-top hoặc padding-bottom border-top hoặc border-bottom margin-top hoặc margin-bottom height 22 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 22: Để loại bỏ hoàn toàn đường viền (border) của một phần tử, bạn có thể sử dụng thuộc tính `border-style` với giá trị nào? border-style: none; border: 0; border-width: 0; Cả A, B, C đều có thể loại bỏ hoặc làm cho đường viền không hiển thị. 23 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 23: Trong một bảng HTML (` `), thuộc tính CSS nào giúp kiểm soát khoảng cách giữa các ô (cells)? border-spacing padding margin cell-spacing 24 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 24: Thuộc tính `border-collapse: collapse;` áp dụng cho phần tử ` ` có tác dụng gì? Gộp lề của các ô trong bảng. Gộp các đường viền liền kề giữa các ô và hàng/cột thành một đường viền duy nhất. Ẩn tất cả các đường viền trong bảng. Làm cho đường viền của bảng co lại theo nội dung. 25 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 25: Bạn muốn đặt lề trên và dưới là 10px, còn lề trái và phải là 20px cho một phần tử. Cách viết tắt đúng cho thuộc tính `padding` là gì? padding: 10px 20px; padding: 10px 20px 10px 20px; padding: 10px 10px 20px 20px; padding: 20px 10px; 26 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 26: Giả sử bạn có một phần tử `div` với nội dung là một đoạn văn bản. Bạn muốn tạo một khoảng cách 15px giữa đoạn văn bản và đường viền của `div`. Bạn nên sử dụng thuộc tính nào và giá trị bao nhiêu? margin: 15px; padding: 15px; border-width: 15px; space: 15px; 27 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 27: Thuộc tính CSS nào cho phép bạn kiểm soát kiểu của đường viền (ví dụ: nét liền, nét đứt, nét chấm...)? border-width border-color border-style border-format 28 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 28: Khi áp dụng lề dọc (margin-top, margin-bottom) cho các phần tử `inline`, kết quả hiển thị trên trình duyệt thường như thế nào? Lề dọc thường không có tác dụng. Lề dọc được áp dụng đầy đủ, đẩy các dòng văn bản lên/xuống. Lề trên có tác dụng nhưng lề dưới thì không. Lề dưới có tác dụng nhưng lề trên thì không. 29 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 29: Bạn muốn tạo một khung viền màu xám, độ dày 2px, kiểu nét đứt cho một phần tử. Cách viết tắt (shorthand) đúng cho thuộc tính `border` là gì? border: gray 2px dashed; border: 2px gray dashed; border: dashed gray 2px; border: 2px dashed gray; 30 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 5 Câu 30: Sự khác biệt cơ bản về cách thức hoạt động của `box-sizing: content-box;` (mặc định) và `box-sizing: border-box;` khi thiết lập `width` và `height` là gì? `content-box`: `width/height` chỉ áp dụng cho nội dung; `border-box`: `width/height` bao gồm cả padding và border. `content-box`: `width/height` bao gồm cả margin; `border-box`: `width/height` chỉ áp dụng cho nội dung. `content-box`: `width/height` bao gồm cả padding và border; `border-box`: `width/height` chỉ áp dụng cho nội dung. `content-box`: `width/height` không bao gồm gì cả; `border-box`: `width/height` bao gồm tất cả (margin, border, padding, content). Xem kết quả Bạn ơi!!! Để xem được kết quả bạn vui lòng làm nhiệm vụ nhỏ xíu này nha LƯU Ý: Không sử dụng VPN hoặc 1.1.1.1 khi vượt link Nhận kết quả Xảy ra lỗi Bước 1: Mở tab mới, truy cập Google.com Bước 2: Tìm kiếm từ khóa: vận chuyển văn phòng giá rẻ Đổi nhiệm vụ Bước 3: Trong kết quả tìm kiếm Google, hãy tìm website giống dưới hình: (Nếu trang 1 không có hãy tìm ở trang 2, 3, 4... nhé ) Bước 4: Cuộn xuống cuối bài viết rồi bấm vào nút GIỐNG HÌNH DƯỚI và chờ 1 lát để lấy mã: By Wordpress Quiz plugin 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 06 Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 06 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay. Câu 1: Xét đoạn mã HTML sau: ```html A. Nằm cùng dòng với các phần tử nội tuyến khác (nếu có) và không ngắt dòng. B. Luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn. C. Bị ẩn hoàn toàn khỏi trang web. D. Hiển thị dưới dạng một khối nhưng chỉ chiếm không gian vừa đủ nội dung. Câu 2: Để một phần tử ` ` (mặc định là block) hiển thị trên cùng một dòng với các phần tử khác và chỉ chiếm không gian vừa đủ nội dung của nó, bạn cần áp dụng thuộc tính CSS `display` với giá trị nào? A. block B. inline C. none D. inline-block Câu 3: Bạn muốn tạo một khối vuông có kích thước cố định (ví dụ: 100px x 100px) và muốn các khối này nằm cạnh nhau trên một dòng cho đến khi hết chỗ thì tự động xuống dòng. Bạn nên sử dụng giá trị nào cho thuộc tính `display`? A. inline B. block C. none D. inline-block Câu 4: Thuộc tính CSS `display: none;` khác với `visibility: hidden;` như thế nào? A. `display: none;` ẩn phần tử nhưng vẫn giữ không gian của nó trên layout, còn `visibility: hidden;` loại bỏ hoàn toàn phần tử khỏi layout. B. Cả hai thuộc tính đều ẩn phần tử và loại bỏ không gian của nó khỏi layout. C. `display: none;` ẩn phần tử và loại bỏ không gian của nó khỏi layout, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ không gian của nó. D. Cả hai thuộc tính đều ẩn phần tử nhưng vẫn giữ không gian của nó trên layout. Câu 5: Bạn cần định dạng màu nền cho một tiêu đề duy nhất trên trang web (ví dụ: tiêu đề chính). Bạn nên sử dụng bộ chọn CSS nào để đảm bảo chỉ có tiêu đề đó được áp dụng kiểu? A. Bộ chọn ID (#) B. Bộ chọn Class (.) C. Bộ chọn phần tử (ví dụ: h1) D. Bộ chọn nhóm (,) Câu 6: Bạn có nhiều đoạn văn bản cần cùng một kiểu định dạng (ví dụ: màu chữ xanh, chữ nghiêng). Bạn nên sử dụng bộ chọn CSS nào để áp dụng kiểu cho tất cả các đoạn văn bản này một cách dễ dàng? A. Bộ chọn ID (#) B. Bộ chọn Class (.) C. Bộ chọn phần tử (ví dụ: p) D. Bộ chọn con (>) Câu 7: Cho đoạn mã HTML ` A. id.gioi-thieu B. .gioi#thieu C. #gioi-thieu D. gioi-thieu Câu 8: Một phần tử HTML có thể có bao nhiêu mã định danh (ID)? A. Không giới hạn số lượng B. Chỉ một ID duy nhất trên toàn bộ trang C. Một ID cho mỗi class mà nó thuộc về D. Tùy thuộc vào loại phần tử (inline hoặc block) Câu 9: Một phần tử HTML có thể thuộc về bao nhiêu lớp (Class)? A. Không giới hạn số lượng, bằng cách liệt kê các tên class cách nhau bởi dấu cách. B. Chỉ một class duy nhất. C. Tối đa 3 class. D. Không thể thuộc về nhiều class cùng lúc. Câu 10: Cho đoạn mã HTML ` A. Chỉ có viền đen, không có nền vàng. B. Chỉ có nền vàng, không có viền đen. C. Không có viền và không có nền. D. Có cả viền đen và nền vàng. Câu 11: Trong HTML, thẻ nào được sử dụng để định nghĩa một hàng (row) trong bảng? A. D. B. C. Câu 12: Thẻ ` ` của bảng. D. Đại diện cho dữ liệu thông thường trong bảng. Câu 13: Để thêm một đường viền (border) xung quanh toàn bộ bảng HTML, bạn sẽ áp dụng thuộc tính CSS `border` cho bộ chọn nào? A. table B. tr C. th, td D. caption Câu 14: Để thêm đường viền cho từng ô dữ liệu (` C. ` trong bảng HTML có ý nghĩa ngữ nghĩa đặc biệt gì so với thẻ ` `? A. Không có ý nghĩa ngữ nghĩa đặc biệt, chỉ là cách viết tắt của ` `. B. Đại diện cho ô tiêu đề của bảng hoặc nhóm cột/hàng, thường được trình duyệt mặc định hiển thị chữ in đậm và căn giữa. C. Chỉ được sử dụng trong phần ` `) và ô tiêu đề (` `) trong bảng, bạn sẽ áp dụng thuộc tính CSS `border` cho bộ chọn nào? A. table B. tr C. th, td D. table tr Câu 15: Thuộc tính CSS `padding` được sử dụng để làm gì? A. Tạo khoảng trống bên trong đường viền của phần tử (giữa nội dung và đường viền). B. Tạo khoảng trống bên ngoài đường viền của phần tử (giữa phần tử này và các phần tử khác). C. Đặt kiểu đường viền cho phần tử. D. Đặt màu nền cho phần tử. Câu 16: Thuộc tính CSS `margin` được sử dụng để làm gì? A. Tạo khoảng trống bên trong đường viền của phần tử. B. Tạo khoảng trống bên ngoài đường viền của phần tử (giữa phần tử này và các phần tử khác). C. Đặt độ dày của đường viền. D. Căn chỉnh nội dung bên trong phần tử. Câu 17: Xét CSS sau: ```css .hop { width: 100px; height: 50px; margin: 10px; border: 1px solid black; padding: 5px; } ``` Một phần tử ` A. 100px B. 100px (nội dung) + 5px (padding trái) + 5px (padding phải) = 110px C. 100px (nội dung) + 5px (padding trái) + 5px (padding phải) + 1px (border trái) + 1px (border phải) = 112px D. 100px (nội dung) + 5px (padding trái) + 5px (padding phải) + 1px (border trái) + 1px (border phải) + 10px (margin trái) + 10px (margin phải) = 132px Câu 18: Thuộc tính CSS `width` và `height` có tác dụng như thế nào khi áp dụng cho một phần tử inline (ví dụ: ``)? A. Áp dụng bình thường như với phần tử block. B. Không có tác dụng. C. Chỉ áp dụng nếu có thêm thuộc tính `display: block;`. D. Chỉ áp dụng cho chiều rộng (`width`), chiều cao (`height`) không có tác dụng. Câu 19: Thuộc tính CSS `margin-top` và `margin-bottom` có tác dụng như thế nào khi áp dụng cho một phần tử inline (ví dụ: ``)? A. Áp dụng bình thường như với phần tử block, đẩy các phần tử trên và dưới ra xa. B. Không có tác dụng. C. Không có tác dụng trong việc tạo khoảng trống giữa các dòng, nhưng có thể ảnh hưởng đến vị trí nếu có các thuộc tính khác như `line-height` hoặc `vertical-align`. D. Chỉ áp dụng nếu có thêm thuộc tính `display: inline-block;`. Câu 20: Thuộc tính CSS `padding-top` và `padding-bottom` có tác dụng như thế nào khi áp dụng cho một phần tử inline (ví dụ: ``)? A. Không có tác dụng. B. Áp dụng bình thường và đẩy các phần tử trên/dưới ra xa. C. Chỉ áp dụng nếu có thêm thuộc tính `display: inline-block;`. D. Áp dụng, nhưng không đẩy các dòng văn bản khác ra xa, có thể làm che khuất nội dung của dòng trên hoặc dưới. Câu 21: Bạn muốn tạo một bảng có đường viền đơn (single border) thay vì đường viền kép mặc định giữa các ô. Thuộc tính CSS nào được sử dụng phổ biến nhất để đạt được điều này? A. border-spacing B. border-collapse C. table-layout D. empty-cells Câu 22: Giá trị nào của thuộc tính `border-collapse` sẽ làm cho các đường viền của các ô liền kề trong bảng gộp lại thành một đường viền duy nhất? A. collapse B. separate C. inherit D. initial Câu 23: Bạn muốn thêm khoảng trống giữa đường viền của các ô trong bảng (khi `border-collapse` là `separate`). Thuộc tính CSS nào được sử dụng? A. border-spacing B. padding C. margin D. cell-spacing Câu 24: Bạn có một danh sách các mục (` `) trong HTML và muốn chúng hiển thị trên một dòng thay vì mỗi mục một dòng. Bạn nên áp dụng CSS nào cho các phần tử ` `? A. display: block; B. display: inline; C. visibility: hidden; D. float: left; Câu 25: Cho đoạn mã CSS: ```css .hop-vien { border: 2px dashed red; border-radius: 10px; } ``` Phần tử HTML nào áp dụng lớp `hop-vien` sẽ hiển thị như thế nào? A. Có đường viền nét đứt màu đỏ với các góc bo tròn bán kính 10px. B. Có đường viền nét liền màu đỏ với các góc vuông. C. Có đường viền nét đứt màu đỏ nhưng góc vẫn vuông. D. Không có đường viền vì `border-radius` chỉ áp dụng cho ảnh. Câu 26: Khi đặt tên cho `id` và `class` trong CSS/HTML, quy tắc nào sau đây là KHÔNG ĐÚNG? A. Tên có thể chứa chữ cái (a-z, A-Z), chữ số (0-9), dấu gạch ngang (-), và dấu gạch dưới (_). B. Tên phân biệt chữ hoa và chữ thường. C. Tên không được chứa dấu cách. D. Tên BẮT BUỘC phải bắt đầu bằng một chữ cái hoặc dấu gạch dưới (_). Câu 27: Bạn có hai phần tử ` A. 20px + 30px = 50px B. 20px C. 30px D. 0px Câu 28: Xét đoạn mã CSS: ```css #header { border-bottom: 1px solid blue; } ``` Bộ chọn `#header` sẽ áp dụng kiểu cho phần tử nào trong HTML? A. Tất cả các phần tử có tên thẻ là `header`. B. Phần tử DUY NHẤT có thuộc tính `id= C. Tất cả các phần tử có thuộc tính `class= D. Phần tử đầu tiên có tên thẻ là `header`. Câu 29: Bạn muốn tạo một đường viền chỉ ở phía dưới của một đoạn văn bản. Thuộc tính CSS nào sau đây là đúng cú pháp? A. border-bottom: 1px solid black; B. border: bottom 1px solid black; C. border-style-bottom: solid; D. bottom-border: 1px solid black; Câu 30: Thuộc tính `padding-left` và `padding-right` có tác dụng như thế nào khi áp dụng cho một phần tử inline (ví dụ: ``)? A. Áp dụng bình thường, tạo khoảng trống bên trái và bên phải nội dung. B. Không có tác dụng. C. Chỉ áp dụng nếu có thêm thuộc tính `display: block;`. D. Chỉ áp dụng nếu có thêm thuộc tính `display: inline-block;`. 1 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 1: Xét đoạn mã HTML sau: ```html Xin chào ``` Nếu không có CSS định dạng nào khác, phần tử `` theo mặc định sẽ hiển thị như thế nào so với phần tử ` `? Nằm cùng dòng với các phần tử nội tuyến khác (nếu có) và không ngắt dòng. Luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn. Bị ẩn hoàn toàn khỏi trang web. Hiển thị dưới dạng một khối nhưng chỉ chiếm không gian vừa đủ nội dung. 2 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 2: Để một phần tử ` ` (mặc định là block) hiển thị trên cùng một dòng với các phần tử khác và chỉ chiếm không gian vừa đủ nội dung của nó, bạn cần áp dụng thuộc tính CSS `display` với giá trị nào? block inline none inline-block 3 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 3: Bạn muốn tạo một khối vuông có kích thước cố định (ví dụ: 100px x 100px) và muốn các khối này nằm cạnh nhau trên một dòng cho đến khi hết chỗ thì tự động xuống dòng. Bạn nên sử dụng giá trị nào cho thuộc tính `display`? inline block none inline-block 4 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 4: Thuộc tính CSS `display: none;` khác với `visibility: hidden;` như thế nào? `display: none;` ẩn phần tử nhưng vẫn giữ không gian của nó trên layout, còn `visibility: hidden;` loại bỏ hoàn toàn phần tử khỏi layout. Cả hai thuộc tính đều ẩn phần tử và loại bỏ không gian của nó khỏi layout. `display: none;` ẩn phần tử và loại bỏ không gian của nó khỏi layout, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ không gian của nó. Cả hai thuộc tính đều ẩn phần tử nhưng vẫn giữ không gian của nó trên layout. 5 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 5: Bạn cần định dạng màu nền cho một tiêu đề duy nhất trên trang web (ví dụ: tiêu đề chính). Bạn nên sử dụng bộ chọn CSS nào để đảm bảo chỉ có tiêu đề đó được áp dụng kiểu? Bộ chọn ID (#) Bộ chọn Class (.) Bộ chọn phần tử (ví dụ: h1) Bộ chọn nhóm (,) 6 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 6: Bạn có nhiều đoạn văn bản cần cùng một kiểu định dạng (ví dụ: màu chữ xanh, chữ nghiêng). Bạn nên sử dụng bộ chọn CSS nào để áp dụng kiểu cho tất cả các đoạn văn bản này một cách dễ dàng? Bộ chọn ID (#) Bộ chọn Class (.) Bộ chọn phần tử (ví dụ: p) Bộ chọn con (>) 7 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 7: Cho đoạn mã HTML ` Đây là đoạn giới thiệu. `. Nếu bạn muốn định dạng riêng cho đoạn giới thiệu này, bộ chọn CSS nào sau đây là đúng cú pháp? id.gioi-thieu .gioi#thieu #gioi-thieu gioi-thieu 8 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 8: Một phần tử HTML có thể có bao nhiêu mã định danh (ID)? Không giới hạn số lượng Chỉ một ID duy nhất trên toàn bộ trang Một ID cho mỗi class mà nó thuộc về Tùy thuộc vào loại phần tử (inline hoặc block) 9 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 9: Một phần tử HTML có thể thuộc về bao nhiêu lớp (Class)? Không giới hạn số lượng, bằng cách liệt kê các tên class cách nhau bởi dấu cách. Chỉ một class duy nhất. Tối đa 3 class. Không thể thuộc về nhiều class cùng lúc. 10 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 10: Cho đoạn mã HTML ` Nội dung `. CSS áp dụng cho `.vien-dam` là `border: 2px solid black;` và CSS áp dụng cho `.nen-vang` là `background-color: yellow;`. Kết quả hiển thị của phần tử `div` này sẽ như thế nào? Chỉ có viền đen, không có nền vàng. Chỉ có nền vàng, không có viền đen. Không có viền và không có nền. Có cả viền đen và nền vàng. 11 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 11: Trong HTML, thẻ nào được sử dụng để định nghĩa một hàng (row) trong bảng? <td> <th> <tr> <table> 12 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 12: Thẻ ` ` trong bảng HTML có ý nghĩa ngữ nghĩa đặc biệt gì so với thẻ ` `? Không có ý nghĩa ngữ nghĩa đặc biệt, chỉ là cách viết tắt của `<td>`. Đại diện cho ô tiêu đề của bảng hoặc nhóm cột/hàng, thường được trình duyệt mặc định hiển thị chữ in đậm và căn giữa. Chỉ được sử dụng trong phần `<thead>` của bảng. Đại diện cho dữ liệu thông thường trong bảng. 13 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 13: Để thêm một đường viền (border) xung quanh toàn bộ bảng HTML, bạn sẽ áp dụng thuộc tính CSS `border` cho bộ chọn nào? table tr th, td caption 14 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 14: Để thêm đường viền cho từng ô dữ liệu (` `) và ô tiêu đề (` `) trong bảng, bạn sẽ áp dụng thuộc tính CSS `border` cho bộ chọn nào? table tr th, td table tr 15 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 15: Thuộc tính CSS `padding` được sử dụng để làm gì? Tạo khoảng trống bên trong đường viền của phần tử (giữa nội dung và đường viền). Tạo khoảng trống bên ngoài đường viền của phần tử (giữa phần tử này và các phần tử khác). Đặt kiểu đường viền cho phần tử. Đặt màu nền cho phần tử. 16 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 16: Thuộc tính CSS `margin` được sử dụng để làm gì? Tạo khoảng trống bên trong đường viền của phần tử. Tạo khoảng trống bên ngoài đường viền của phần tử (giữa phần tử này và các phần tử khác). Đặt độ dày của đường viền. Căn chỉnh nội dung bên trong phần tử. 17 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 17: Xét CSS sau: ```css .hop { width: 100px; height: 50px; margin: 10px; border: 1px solid black; padding: 5px; } ``` Một phần tử ` ` sẽ có tổng chiều rộng hiển thị là bao nhiêu pixel? 100px 100px (nội dung) + 5px (padding trái) + 5px (padding phải) = 110px 100px (nội dung) + 5px (padding trái) + 5px (padding phải) + 1px (border trái) + 1px (border phải) = 112px 100px (nội dung) + 5px (padding trái) + 5px (padding phải) + 1px (border trái) + 1px (border phải) + 10px (margin trái) + 10px (margin phải) = 132px 18 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 18: Thuộc tính CSS `width` và `height` có tác dụng như thế nào khi áp dụng cho một phần tử *inline* (ví dụ: ``)? Áp dụng bình thường như với phần tử block. Không có tác dụng. Chỉ áp dụng nếu có thêm thuộc tính `display: block;`. Chỉ áp dụng cho chiều rộng (`width`), chiều cao (`height`) không có tác dụng. 19 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 19: Thuộc tính CSS `margin-top` và `margin-bottom` có tác dụng như thế nào khi áp dụng cho một phần tử *inline* (ví dụ: ``)? Áp dụng bình thường như với phần tử block, đẩy các phần tử trên và dưới ra xa. Không có tác dụng. Không có tác dụng trong việc tạo khoảng trống *giữa* các dòng, nhưng có thể ảnh hưởng đến vị trí nếu có các thuộc tính khác như `line-height` hoặc `vertical-align`. Chỉ áp dụng nếu có thêm thuộc tính `display: inline-block;`. 20 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 20: Thuộc tính CSS `padding-top` và `padding-bottom` có tác dụng như thế nào khi áp dụng cho một phần tử *inline* (ví dụ: ``)? Không có tác dụng. Áp dụng bình thường và đẩy các phần tử trên/dưới ra xa. Chỉ áp dụng nếu có thêm thuộc tính `display: inline-block;`. Áp dụng, nhưng không đẩy các dòng văn bản khác ra xa, có thể làm che khuất nội dung của dòng trên hoặc dưới. 21 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 21: Bạn muốn tạo một bảng có đường viền đơn (single border) thay vì đường viền kép mặc định giữa các ô. Thuộc tính CSS nào được sử dụng phổ biến nhất để đạt được điều này? border-spacing border-collapse table-layout empty-cells 22 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 22: Giá trị nào của thuộc tính `border-collapse` sẽ làm cho các đường viền của các ô liền kề trong bảng gộp lại thành một đường viền duy nhất? collapse separate inherit initial 23 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 23: Bạn muốn thêm khoảng trống giữa đường viền của các ô trong bảng (khi `border-collapse` là `separate`). Thuộc tính CSS nào được sử dụng? border-spacing padding margin cell-spacing 24 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 24: Bạn có một danh sách các mục (` `) trong HTML và muốn chúng hiển thị trên một dòng thay vì mỗi mục một dòng. Bạn nên áp dụng CSS nào cho các phần tử ` `? display: block; display: inline; visibility: hidden; float: left; 25 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 25: Cho đoạn mã CSS: ```css .hop-vien { border: 2px dashed red; border-radius: 10px; } ``` Phần tử HTML nào áp dụng lớp `hop-vien` sẽ hiển thị như thế nào? Có đường viền nét đứt màu đỏ với các góc bo tròn bán kính 10px. Có đường viền nét liền màu đỏ với các góc vuông. Có đường viền nét đứt màu đỏ nhưng góc vẫn vuông. Không có đường viền vì `border-radius` chỉ áp dụng cho ảnh. 26 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 26: Khi đặt tên cho `id` và `class` trong CSS/HTML, quy tắc nào sau đây là KHÔNG ĐÚNG? Tên có thể chứa chữ cái (a-z, A-Z), chữ số (0-9), dấu gạch ngang (-), và dấu gạch dưới (_). Tên phân biệt chữ hoa và chữ thường. Tên không được chứa dấu cách. Tên BẮT BUỘC phải bắt đầu bằng một chữ cái hoặc dấu gạch dưới (_). 27 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 27: Bạn có hai phần tử ` ` đặt liên tiếp trong HTML. Mỗi `div` có CSS `margin-bottom: 20px;` và `margin-top: 30px;`. Theo mặc định, khoảng cách *giữa* hai phần tử `div` này sẽ là bao nhiêu pixel do hiện tượng 'margin collapsing' (gộp lề)? 20px + 30px = 50px 20px 30px 0px 28 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 28: Xét đoạn mã CSS: ```css #header { border-bottom: 1px solid blue; } ``` Bộ chọn `#header` sẽ áp dụng kiểu cho phần tử nào trong HTML? Tất cả các phần tử có tên thẻ là `header`. Phần tử DUY NHẤT có thuộc tính `id="header"`. Tất cả các phần tử có thuộc tính `class="header"`. Phần tử đầu tiên có tên thẻ là `header`. 29 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 29: Bạn muốn tạo một đường viền chỉ ở phía dưới của một đoạn văn bản. Thuộc tính CSS nào sau đây là đúng cú pháp? border-bottom: 1px solid black; border: bottom 1px solid black; border-style-bottom: solid; bottom-border: 1px solid black; 30 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 6 Câu 30: Thuộc tính `padding-left` và `padding-right` có tác dụng như thế nào khi áp dụng cho một phần tử *inline* (ví dụ: ``)? Áp dụng bình thường, tạo khoảng trống bên trái và bên phải nội dung. Không có tác dụng. Chỉ áp dụng nếu có thêm thuộc tính `display: block;`. Chỉ áp dụng nếu có thêm thuộc tính `display: inline-block;`. Xem kết quả Bạn ơi!!! Để xem được kết quả bạn vui lòng làm nhiệm vụ nhỏ xíu này nha LƯU Ý: Không sử dụng VPN hoặc 1.1.1.1 khi vượt link Nhận kết quả Xảy ra lỗi Bước 1: Mở tab mới, truy cập Google.com Bước 2: Tìm kiếm từ khóa: vận chuyển văn phòng giá rẻ Đổi nhiệm vụ Bước 3: Trong kết quả tìm kiếm Google, hãy tìm website giống dưới hình: (Nếu trang 1 không có hãy tìm ở trang 2, 3, 4... nhé ) Bước 4: Cuộn xuống cuối bài viết rồi bấm vào nút GIỐNG HÌNH DƯỚI và chờ 1 lát để lấy mã: By Wordpress Quiz plugin 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 07 Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 07 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay. Câu 1: Trong CSS, thuộc tính `display` với giá trị nào sau đây được sử dụng để làm cho một phần tử HTML chiếm toàn bộ chiều rộng có sẵn của khối chứa nó và bắt đầu trên một dòng mới? A. inline B. block C. none D. inline-block Câu 2: Một phần tử HTML được thiết lập CSS `display: inline;`. Điều nào sau đây mô tả đúng hành vi của phần tử này? A. Nó luôn bắt đầu trên một dòng mới. B. Nó chiếm toàn bộ chiều rộng của phần tử cha. C. Bạn có thể thiết lập chiều cao và chiều rộng tùy ý cho nó. D. Nó nằm trên cùng dòng với các phần tử nội tuyến khác và chỉ chiếm không gian cần thiết. Câu 3: Cho đoạn mã HTML sau: ` Đoạn văn bản nổi bật. `. Theo mặc định, thẻ ` ` và thẻ `` thuộc loại phần tử hiển thị (display) nào? A. ` ` là block, `` là inline. B. ` ` là inline, `` là block. C. Cả hai đều là block. D. Cả hai đều là inline. Câu 4: Bạn muốn ẩn hoàn toàn một phần tử trên trang web, làm cho nó không hiển thị và không chiếm bất kỳ không gian nào trong bố cục. Thuộc tính CSS nào phù hợp nhất để thực hiện điều này? A. visibility: hidden; B. opacity: 0; C. display: none; D. height: 0; width: 0; Câu 5: Để áp dụng một kiểu CSS duy nhất cho một phần tử HTML cụ thể trên trang (ví dụ: chỉ có một tiêu đề chính), bạn nên sử dụng bộ chọn CSS dựa trên đặc điểm nào sau đây? A. ID B. Class C. Tên thẻ (Tag name) D. Thuộc tính `style` nội tuyến Câu 6: Để áp dụng cùng một kiểu CSS cho nhiều phần tử HTML khác nhau trên trang (ví dụ: tất cả các đoạn văn bản phụ), bạn nên sử dụng bộ chọn CSS dựa trên đặc điểm nào sau đây? A. ID B. Class C. Tên thẻ (Tag name) D. Thuộc tính `id` Câu 7: Cú pháp đúng để viết bộ chọn CSS cho một phần tử có ID là `main-header` là gì? A. .main-header { ... } B. #main-header { ... } C. id(main-header) { ... } D. { ... } Câu 8: Cú pháp đúng để viết bộ chọn CSS cho các phần tử có class là `highlight-text` là gì? A. .highlight-text { ... } B. #highlight-text { ... } C. class(highlight-text) { ... } D. { ... } Câu 9: Một phần tử HTML có thể có bao nhiêu ID duy nhất trong cùng một trang web? A. Nhiều ID, cách nhau bởi dấu cách. B. Chỉ một ID duy nhất. C. Không có ID nào. D. Tùy thuộc vào loại thẻ HTML. Câu 10: Một phần tử HTML có thể thuộc về nhiều class cùng lúc không? Nếu có, làm thế nào để khai báo trong HTML? A. Không thể. B. Có, bằng cách sử dụng dấu phẩy giữa các tên class trong thuộc tính `class`. C. Có, bằng cách sử dụng dấu cách giữa các tên class trong thuộc tính `class`. D. Có, bằng cách sử dụng nhiều thuộc tính `class` khác nhau. Câu 11: Cho đoạn mã HTML ` Nội dung `. Phần tử ` ` này thuộc về những class nào? A. Chỉ class `box`. B. Chỉ class `card`. C. Cả class `box` và class `card`. D. Không thuộc class nào vì cú pháp sai. Câu 12: Khi đặt tên cho ID và class trong CSS/HTML, quy tắc nào sau đây là **sai**? A. Tên có thể chứa chữ cái (a-z, A-Z), số (0-9), dấu gạch ngang (-) và dấu gạch dưới (_). B. Tên phải bắt đầu bằng một chữ cái hoặc dấu gạch dưới (_). C. Tên phân biệt chữ hoa và chữ thường. D. Tên có thể bắt đầu bằng một chữ số. Câu 13: Bạn muốn thay đổi màu nền và thêm đường viền cho tất cả các phần tử ` ` trên trang. Bộ chọn CSS nào phù hợp nhất để thực hiện điều này một cách hiệu quả? A. Bộ chọn tên thẻ (`div`) B. Bộ chọn ID (nếu tất cả div có cùng ID) C. Bộ chọn class (nếu tất cả div có cùng class) D. Áp dụng thuộc tính `style` nội tuyến cho từng thẻ ` ` Câu 14: Cho đoạn mã CSS: `.box { display: inline; width: 100px; height: 50px; }`. Nếu áp dụng cho một phần tử ` `, điều gì sẽ xảy ra với thuộc tính `width` và `height`? A. Chiều rộng sẽ là 100px và chiều cao sẽ là 50px. B. Chỉ chiều rộng được áp dụng, chiều cao sẽ tự động. C. Cả chiều rộng và chiều cao sẽ bị bỏ qua vì phần tử đã chuyển thành inline. D. Chỉ chiều cao được áp dụng, chiều rộng sẽ tự động. Câu 15: Phần tử nội tuyến (inline) khác phần tử khối (block) về mặt bố cục như thế nào khi chúng xuất hiện cạnh nhau trên trang? A. Phần tử khối nằm cạnh nhau trên cùng một dòng, phần tử nội tuyến luôn bắt đầu dòng mới. B. Phần tử khối và nội tuyến đều nằm cạnh nhau trên cùng một dòng nếu đủ chỗ. C. Phần tử nội tuyến luôn chiếm toàn bộ chiều rộng, phần tử khối chỉ chiếm không gian cần thiết. D. Phần tử nội tuyến nằm trên cùng dòng nếu đủ chỗ, phần tử khối luôn bắt đầu trên dòng mới. Câu 16: Bạn có một danh sách các mục tin tức và muốn mỗi mục tin tức được hiển thị dưới dạng một khối riêng biệt, cách nhau một khoảng lề. Loại phần tử hiển thị nào phù hợp nhất cho mỗi mục tin tức? A. block B. inline C. none D. table-cell Câu 17: Mục đích chính của việc sử dụng các phần tử container chung như ` ` và `` trong HTML là gì? A. Để hiển thị nội dung văn bản có định dạng đặc biệt. B. Để nhóm các phần tử khác lại với nhau nhằm áp dụng kiểu CSS hoặc xử lý bằng JavaScript. C. Để tạo các liên kết hoặc hình ảnh. D. Chúng là các phần tử bắt buộc phải có trong mọi trang HTML. Câu 18: Sự khác biệt cơ bản về cấu trúc và ngữ nghĩa giữa thẻ ` ` và thẻ `` là gì? A. ` ` dùng cho văn bản, `` dùng cho hình ảnh. B. ` ` là phần tử nội tuyến, `` là phần tử khối. C. ` ` chỉ có thể chứa ``, `` chỉ có thể chứa văn bản. D. ` ` là phần tử khối theo mặc định, `` là phần tử nội tuyến theo mặc định, cả hai đều là các container chung không có ngữ nghĩa đặc biệt. Câu 19: Bạn muốn định dạng riêng cho từ "quan trọng" trong câu "Đây là một thông tin quan trọng.". Thẻ HTML nào và thuộc tính CSS nào (về display) phù hợp nhất để bọc từ "quan trọng" mà không làm thay đổi bố cục dòng hiện tại? A. Thẻ ` ` với `display: block;` B. Thẻ `` với `display: inline;` (hoặc mặc định) C. Thẻ ` ` với `display: inline;` D. Thẻ ` ` với `display: inline;` Câu 20: Một nhà phát triển web sử dụng CSS để đặt `margin-top: 20px;` và `margin-bottom: 20px;` cho một phần tử ``. Kết quả hiển thị trên trình duyệt sẽ như thế nào? A. Các lề trên và dưới sẽ bị bỏ qua vì `` là phần tử nội tuyến. B. Phần tử `` sẽ có lề 20px ở phía trên và dưới. C. Phần tử `` sẽ tự động chuyển thành phần tử khối để áp dụng lề. D. Chỉ lề trên được áp dụng, lề dưới bị bỏ qua. Câu 21: Giả sử bạn có một danh sách các liên kết (`` thẻ). Theo mặc định, thẻ `` là phần tử nội tuyến. Nếu bạn muốn mỗi liên kết hiển thị trên một dòng riêng biệt và có thể đặt chiều rộng/chiều cao cho chúng, bạn sẽ thay đổi thuộc tính `display` của thẻ `` thành giá trị nào? A. block B. inline C. none D. hidden Câu 22: Khi thiết kế bố cục trang web, việc hiểu rõ sự khác biệt giữa phần tử khối và phần tử nội tuyến giúp ích gì? A. Giúp chọn màu sắc và phông chữ phù hợp. B. Giúp viết mã JavaScript hiệu quả hơn. C. Giúp dự đoán cách các phần tử sẽ chiếm không gian và tương tác với nhau trong dòng chảy tài liệu. D. Chỉ quan trọng khi làm việc với cơ sở dữ liệu. Câu 23: Thuộc tính `display: none;` khác với `visibility: hidden;` như thế nào? A. Cả hai đều ẩn phần tử và giải phóng không gian. B. `display: none;` ẩn phần tử và giải phóng không gian, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian của nó. C. `display: none;` chỉ ẩn văn bản, còn `visibility: hidden;` ẩn toàn bộ phần tử. D. `display: none;` chỉ hoạt động trên phần tử khối, còn `visibility: hidden;` hoạt động trên cả phần tử nội tuyến. Câu 24: Bạn có một danh sách các mục (sử dụng thẻ ` ` trong thẻ ` `). Theo mặc định, thẻ ` ` là phần tử khối. Nếu bạn muốn các mục danh sách hiển thị trên cùng một dòng (như một menu ngang), bạn sẽ thay đổi thuộc tính `display` của thẻ ` ` thành giá trị nào? A. block B. inline C. none D. list-item Câu 25: Trong HTML, thẻ nào sau đây thường được sử dụng để tạo một ô dữ liệu tiêu chuẩn trong một bảng? A. B. D. Câu 26: Thẻ ` ` trong bảng HTML có mục đích gì? A. Định nghĩa một hàng trong bảng. B. Định nghĩa một ô dữ liệu tiêu chuẩn. C. Định nghĩa toàn bộ bảng. D. Định nghĩa một ô tiêu đề trong bảng (thường được căn giữa và in đậm theo mặc định). Câu 27: Cho đoạn mã CSS: `.warning { color: red; font-weight: bold; }`. Nếu bạn muốn áp dụng kiểu này cho một đoạn văn bản cảnh báo cụ thể, bạn sẽ thêm thuộc tính nào vào thẻ ` ` chứa văn bản đó? A. class="warning" B. id="warning" C. style="color: red; font-weight: bold;" D. name="warning" Câu 28: Điều nào sau đây là đúng khi so sánh ID và Class trong việc định dạng CSS? A. ID dùng cho định dạng chung, Class dùng cho định dạng duy nhất. B. ID phải là duy nhất trên mỗi trang, Class có thể được sử dụng lại nhiều lần. C. Cú pháp bộ chọn ID dùng dấu chấm (.), cú pháp bộ chọn Class dùng dấu thăng (#). D. Chỉ có thể áp dụng ID cho phần tử khối, Class cho phần tử nội tuyến. Câu 29: Bạn có hai khối nội dung (` `) muốn hiển thị cạnh nhau thay vì mỗi khối trên một dòng riêng biệt. Phương pháp đơn giản nhất sử dụng thuộc tính `display` (nếu chỉ xét các giá trị cơ bản của Bài 16) để thay đổi hành vi hiển thị mặc định của chúng là gì? A. Thiết lập `display: none;` cho cả hai. B. Thiết lập `display: block;` cho cả hai. C. Thiết lập `display: inline;` cho cả hai (lưu ý hạn chế về kích thước và lề dọc). D. Không thể làm cho phần tử khối hiển thị cạnh nhau chỉ bằng thuộc tính `display` cơ bản. Câu 30: Khi bạn áp dụng CSS cho một phần tử bằng bộ chọn ID, bộ chọn Class và bộ chọn tên thẻ cùng lúc (ví dụ: `#myId`, `.myClass`, `div`), quy tắc nào thường có độ ưu tiên cao nhất để áp dụng kiểu? A. Bộ chọn ID B. Bộ chọn Class C. Bộ chọn tên thẻ D. Quy tắc được viết sau cùng trong tệp CSS 1 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 1: Trong CSS, thuộc tính `display` với giá trị nào sau đây được sử dụng để làm cho một phần tử HTML chiếm toàn bộ chiều rộng có sẵn của khối chứa nó và bắt đầu trên một dòng mới? inline block none inline-block 2 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 2: Một phần tử HTML được thiết lập CSS `display: inline;`. Điều nào sau đây mô tả đúng hành vi của phần tử này? Nó luôn bắt đầu trên một dòng mới. Nó chiếm toàn bộ chiều rộng của phần tử cha. Bạn có thể thiết lập chiều cao và chiều rộng tùy ý cho nó. Nó nằm trên cùng dòng với các phần tử nội tuyến khác và chỉ chiếm không gian cần thiết. 3 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 3: Cho đoạn mã HTML sau: ` Đoạn văn bản nổi bật. `. Theo mặc định, thẻ ` ` và thẻ `` thuộc loại phần tử hiển thị (display) nào? `<p>` là block, `<span>` là inline. `<p>` là inline, `<span>` là block. Cả hai đều là block. Cả hai đều là inline. 4 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 4: Bạn muốn ẩn hoàn toàn một phần tử trên trang web, làm cho nó không hiển thị và không chiếm bất kỳ không gian nào trong bố cục. Thuộc tính CSS nào phù hợp nhất để thực hiện điều này? visibility: hidden; opacity: 0; display: none; height: 0; width: 0; 5 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 5: Để áp dụng một kiểu CSS duy nhất cho một phần tử HTML cụ thể trên trang (ví dụ: chỉ có một tiêu đề chính), bạn nên sử dụng bộ chọn CSS dựa trên đặc điểm nào sau đây? ID Class Tên thẻ (Tag name) Thuộc tính `style` nội tuyến 6 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 6: Để áp dụng cùng một kiểu CSS cho nhiều phần tử HTML khác nhau trên trang (ví dụ: tất cả các đoạn văn bản phụ), bạn nên sử dụng bộ chọn CSS dựa trên đặc điểm nào sau đây? ID Class Tên thẻ (Tag name) Thuộc tính `id` 7 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 7: Cú pháp đúng để viết bộ chọn CSS cho một phần tử có ID là `main-header` là gì? .main-header { ... } #main-header { ... } id(main-header) { ... } <main-header> { ... } 8 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 8: Cú pháp đúng để viết bộ chọn CSS cho các phần tử có class là `highlight-text` là gì? .highlight-text { ... } #highlight-text { ... } class(highlight-text) { ... } <highlight-text> { ... } 9 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 9: Một phần tử HTML có thể có bao nhiêu ID duy nhất trong cùng một trang web? Nhiều ID, cách nhau bởi dấu cách. Chỉ một ID duy nhất. Không có ID nào. Tùy thuộc vào loại thẻ HTML. 10 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 10: Một phần tử HTML có thể thuộc về nhiều class cùng lúc không? Nếu có, làm thế nào để khai báo trong HTML? Không thể. Có, bằng cách sử dụng dấu phẩy giữa các tên class trong thuộc tính `class`. Có, bằng cách sử dụng dấu cách giữa các tên class trong thuộc tính `class`. Có, bằng cách sử dụng nhiều thuộc tính `class` khác nhau. 11 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 11: Cho đoạn mã HTML ` Nội dung `. Phần tử ` ` này thuộc về những class nào? Chỉ class `box`. Chỉ class `card`. Cả class `box` và class `card`. Không thuộc class nào vì cú pháp sai. 12 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 12: Khi đặt tên cho ID và class trong CSS/HTML, quy tắc nào sau đây là **sai**? Tên có thể chứa chữ cái (a-z, A-Z), số (0-9), dấu gạch ngang (-) và dấu gạch dưới (_). Tên phải bắt đầu bằng một chữ cái hoặc dấu gạch dưới (_). Tên phân biệt chữ hoa và chữ thường. Tên có thể bắt đầu bằng một chữ số. 13 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 13: Bạn muốn thay đổi màu nền và thêm đường viền cho tất cả các phần tử ` ` trên trang. Bộ chọn CSS nào phù hợp nhất để thực hiện điều này một cách hiệu quả? Bộ chọn tên thẻ (`div`) Bộ chọn ID (nếu tất cả div có cùng ID) Bộ chọn class (nếu tất cả div có cùng class) Áp dụng thuộc tính `style` nội tuyến cho từng thẻ `<div>` 14 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 14: Cho đoạn mã CSS: `.box { display: inline; width: 100px; height: 50px; }`. Nếu áp dụng cho một phần tử ` `, điều gì sẽ xảy ra với thuộc tính `width` và `height`? Chiều rộng sẽ là 100px và chiều cao sẽ là 50px. Chỉ chiều rộng được áp dụng, chiều cao sẽ tự động. Cả chiều rộng và chiều cao sẽ bị bỏ qua vì phần tử đã chuyển thành inline. Chỉ chiều cao được áp dụng, chiều rộng sẽ tự động. 15 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 15: Phần tử nội tuyến (inline) khác phần tử khối (block) về mặt bố cục như thế nào khi chúng xuất hiện cạnh nhau trên trang? Phần tử khối nằm cạnh nhau trên cùng một dòng, phần tử nội tuyến luôn bắt đầu dòng mới. Phần tử khối và nội tuyến đều nằm cạnh nhau trên cùng một dòng nếu đủ chỗ. Phần tử nội tuyến luôn chiếm toàn bộ chiều rộng, phần tử khối chỉ chiếm không gian cần thiết. Phần tử nội tuyến nằm trên cùng dòng nếu đủ chỗ, phần tử khối luôn bắt đầu trên dòng mới. 16 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 16: Bạn có một danh sách các mục tin tức và muốn mỗi mục tin tức được hiển thị dưới dạng một khối riêng biệt, cách nhau một khoảng lề. Loại phần tử hiển thị nào phù hợp nhất cho mỗi mục tin tức? block inline none table-cell 17 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 17: Mục đích chính của việc sử dụng các phần tử container chung như ` ` và `` trong HTML là gì? Để hiển thị nội dung văn bản có định dạng đặc biệt. Để nhóm các phần tử khác lại với nhau nhằm áp dụng kiểu CSS hoặc xử lý bằng JavaScript. Để tạo các liên kết hoặc hình ảnh. Chúng là các phần tử bắt buộc phải có trong mọi trang HTML. 18 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 18: Sự khác biệt cơ bản về cấu trúc và ngữ nghĩa giữa thẻ ` ` và thẻ `` là gì? `<div>` dùng cho văn bản, `<span>` dùng cho hình ảnh. `<div>` là phần tử nội tuyến, `<span>` là phần tử khối. `<div>` chỉ có thể chứa `<span>`, `<span>` chỉ có thể chứa văn bản. `<div>` là phần tử khối theo mặc định, `<span>` là phần tử nội tuyến theo mặc định, cả hai đều là các container chung không có ngữ nghĩa đặc biệt. 19 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 19: Bạn muốn định dạng riêng cho từ 'quan trọng' trong câu 'Đây là một thông tin quan trọng.'. Thẻ HTML nào và thuộc tính CSS nào (về display) phù hợp nhất để bọc từ 'quan trọng' mà không làm thay đổi bố cục dòng hiện tại? Thẻ `<div>` với `display: block;` Thẻ `<span>` với `display: inline;` (hoặc mặc định) Thẻ `<p>` với `display: inline;` Thẻ `<div>` với `display: inline;` 20 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 20: Một nhà phát triển web sử dụng CSS để đặt `margin-top: 20px;` và `margin-bottom: 20px;` cho một phần tử ``. Kết quả hiển thị trên trình duyệt sẽ như thế nào? Các lề trên và dưới sẽ bị bỏ qua vì `<span>` là phần tử nội tuyến. Phần tử `<span>` sẽ có lề 20px ở phía trên và dưới. Phần tử `<span>` sẽ tự động chuyển thành phần tử khối để áp dụng lề. Chỉ lề trên được áp dụng, lề dưới bị bỏ qua. 21 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 21: Giả sử bạn có một danh sách các liên kết (`` thẻ). Theo mặc định, thẻ `` là phần tử nội tuyến. Nếu bạn muốn mỗi liên kết hiển thị trên một dòng riêng biệt và có thể đặt chiều rộng/chiều cao cho chúng, bạn sẽ thay đổi thuộc tính `display` của thẻ `` thành giá trị nào? block inline none hidden 22 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 22: Khi thiết kế bố cục trang web, việc hiểu rõ sự khác biệt giữa phần tử khối và phần tử nội tuyến giúp ích gì? Giúp chọn màu sắc và phông chữ phù hợp. Giúp viết mã JavaScript hiệu quả hơn. Giúp dự đoán cách các phần tử sẽ chiếm không gian và tương tác với nhau trong dòng chảy tài liệu. Chỉ quan trọng khi làm việc với cơ sở dữ liệu. 23 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 23: Thuộc tính `display: none;` khác với `visibility: hidden;` như thế nào? Cả hai đều ẩn phần tử và giải phóng không gian. `display: none;` ẩn phần tử và giải phóng không gian, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian của nó. `display: none;` chỉ ẩn văn bản, còn `visibility: hidden;` ẩn toàn bộ phần tử. `display: none;` chỉ hoạt động trên phần tử khối, còn `visibility: hidden;` hoạt động trên cả phần tử nội tuyến. 24 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 24: Bạn có một danh sách các mục (sử dụng thẻ ` ` trong thẻ ` `). Theo mặc định, thẻ ` ` là phần tử khối. Nếu bạn muốn các mục danh sách hiển thị trên cùng một dòng (như một menu ngang), bạn sẽ thay đổi thuộc tính `display` của thẻ ` ` thành giá trị nào? block inline none list-item 25 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 25: Trong HTML, thẻ nào sau đây thường được sử dụng để tạo một ô dữ liệu tiêu chuẩn trong một bảng? <th> <tr> <td> <table> 26 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 26: Thẻ ` ` trong bảng HTML có mục đích gì? Định nghĩa một hàng trong bảng. Định nghĩa một ô dữ liệu tiêu chuẩn. Định nghĩa toàn bộ bảng. Định nghĩa một ô tiêu đề trong bảng (thường được căn giữa và in đậm theo mặc định). 27 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 27: Cho đoạn mã CSS: `.warning { color: red; font-weight: bold; }`. Nếu bạn muốn áp dụng kiểu này cho một đoạn văn bản cảnh báo cụ thể, bạn sẽ thêm thuộc tính nào vào thẻ ` ` chứa văn bản đó? class='warning' id='warning' style='color: red; font-weight: bold;' name='warning' 28 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 28: Điều nào sau đây là đúng khi so sánh ID và Class trong việc định dạng CSS? ID dùng cho định dạng chung, Class dùng cho định dạng duy nhất. ID phải là duy nhất trên mỗi trang, Class có thể được sử dụng lại nhiều lần. Cú pháp bộ chọn ID dùng dấu chấm (.), cú pháp bộ chọn Class dùng dấu thăng (#). Chỉ có thể áp dụng ID cho phần tử khối, Class cho phần tử nội tuyến. 29 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 29: Bạn có hai khối nội dung (` `) muốn hiển thị cạnh nhau thay vì mỗi khối trên một dòng riêng biệt. Phương pháp đơn giản nhất sử dụng thuộc tính `display` (nếu chỉ xét các giá trị cơ bản của Bài 16) để thay đổi hành vi hiển thị mặc định của chúng là gì? Thiết lập `display: none;` cho cả hai. Thiết lập `display: block;` cho cả hai. Thiết lập `display: inline;` cho cả hai (lưu ý hạn chế về kích thước và lề dọc). Không thể làm cho phần tử khối hiển thị cạnh nhau chỉ bằng thuộc tính `display` cơ bản. 30 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 7 Câu 30: Khi bạn áp dụng CSS cho một phần tử bằng bộ chọn ID, bộ chọn Class và bộ chọn tên thẻ cùng lúc (ví dụ: `#myId`, `.myClass`, `div`), quy tắc nào thường có độ ưu tiên cao nhất để áp dụng kiểu? Bộ chọn ID Bộ chọn Class Bộ chọn tên thẻ Quy tắc được viết sau cùng trong tệp CSS Xem kết quả Bạn ơi!!! Để xem được kết quả bạn vui lòng làm nhiệm vụ nhỏ xíu này nha LƯU Ý: Không sử dụng VPN hoặc 1.1.1.1 khi vượt link Nhận kết quả Xảy ra lỗi Bước 1: Mở tab mới, truy cập Google.com Bước 2: Tìm kiếm từ khóa: vận chuyển văn phòng giá rẻ Đổi nhiệm vụ Bước 3: Trong kết quả tìm kiếm Google, hãy tìm website giống dưới hình: (Nếu trang 1 không có hãy tìm ở trang 2, 3, 4... nhé ) Bước 4: Cuộn xuống cuối bài viết rồi bấm vào nút GIỐNG HÌNH DƯỚI và chờ 1 lát để lấy mã: By Wordpress Quiz plugin 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 08 Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 08 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay. Câu 1: Trong CSS, thuộc tính nào được sử dụng để kiểm soát cách một phần tử HTML hiển thị trên trang web, ví dụ như hiển thị dưới dạng khối (block) hay nội tuyến (inline)? A. display B. position C. float D. visibility Câu 2: Theo mặc định, hầu hết các phần tử cấu trúc chính như ` `, ` `, ` ` thuộc loại phần tử hiển thị nào trong HTML? A. inline B. inline-block C. block D. none Câu 3: Phần tử ` ` (đoạn văn bản) là một phần tử khối (block). Điều này có nghĩa là gì khi nó hiển thị trên trang web? A. Nó chỉ chiếm không gian vừa đủ nội dung và cho phép các phần tử khác nằm cùng hàng. B. Nó không thể nhận các thuộc tính chiều rộng và chiều cao. C. Nó luôn hiển thị ẩn trên trang. D. Nó luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn của phần tử chứa nó. Câu 4: Phần tử `` là một phần tử nội tuyến (inline). Điều nào sau đây ĐÚNG về hành vi mặc định của nó? A. Nó chỉ chiếm không gian vừa đủ nội dung và không bắt đầu trên dòng mới. B. Nó luôn bắt đầu trên một dòng mới. C. Nó có thể chứa các phần tử khối khác. D. Bạn có thể dễ dàng thiết lập chiều rộng và chiều cao cố định cho nó mà không cần thay đổi thuộc tính `display`. Câu 5: Bạn muốn một phần tử `` có thể nhận các thuộc tính `width` và `height` như một phần tử khối, nhưng vẫn nằm trên cùng một dòng với các phần tử nội tuyến khác. Bạn nên đặt thuộc tính `display` cho `` này là gì? A. block B. inline-block C. inline D. none Câu 6: Thuộc tính CSS `display: none;` có tác dụng gì đối với phần tử được áp dụng? A. Làm cho phần tử trong suốt nhưng vẫn chiếm không gian. B. Ẩn phần tử khỏi chế độ xem nhưng vẫn giữ lại không gian của nó trên layout. C. Di chuyển phần tử ra khỏi màn hình hiển thị. D. Ẩn hoàn toàn phần tử khỏi chế độ xem và loại bỏ nó khỏi luồng layout, không chiếm không gian. Câu 7: Bạn cần áp dụng một bộ quy tắc CSS DUY NHẤT cho một phần tử cụ thể trên trang web (ví dụ: tiêu đề chính). Bộ chọn (selector) nào sau đây phù hợp nhất để sử dụng? A. ID selector (#) B. Class selector (.) C. Element selector (ví dụ: h1) D. Universal selector (*) Câu 8: Bạn muốn áp dụng cùng một kiểu định dạng (ví dụ: màu chữ, khung viền) cho NHIỀU phần tử khác nhau trên trang web có cùng mục đích hoặc ý nghĩa (ví dụ: tất cả các đoạn "lưu ý"). Bộ chọn (selector) nào sau đây là lựa chọn tốt nhất? A. ID selector (#) B. Class selector (.) C. Pseudo-class selector (:hover) D. Attribute selector ([attribute]) Câu 9: Cú pháp đúng để định nghĩa một quy tắc CSS cho tất cả các phần tử có `class= A. #warning { ... } B. warning { ... } C. .warning { ... } D. { ... } Câu 10: Cú pháp đúng để định nghĩa một quy tắc CSS cho phần tử DUY NHẤT có `id= A. #main-header { ... } B. .main-header { ... } C. main-header { ... } D. id=main-header { ... } Câu 11: Một phần tử HTML có thể có bao nhiêu giá trị `id`? A. Nhiều giá trị, cách nhau bằng dấu phẩy. B. Chỉ một giá trị duy nhất trên cùng một trang. C. Không có giá trị `id` nào. D. Tùy thuộc vào loại phần tử. Câu 12: Một phần tử HTML có thể có bao nhiêu giá trị `class`? A. Nhiều giá trị, cách nhau bằng dấu cách. B. Chỉ một giá trị duy nhất. C. Không có giá trị `class` nào. D. Tối đa 3 giá trị. Câu 13: Trong mô hình hộp (Box Model) của CSS, thuộc tính nào tạo ra khoảng trống bên trong đường viền của phần tử, giữa nội dung và đường viền? A. margin B. border C. padding D. outline Câu 14: Trong mô hình hộp (Box Model) của CSS, thuộc tính nào tạo ra khoảng trống bên ngoài đường viền của phần tử, giữa phần tử đó và các phần tử lân cận? A. margin B. border C. padding D. content Câu 15: Xem xét đoạn mã CSS sau: `div { width: 200px; padding: 10px; border: 5px solid black; margin: 15px; }`. Một phần tử ` ` áp dụng quy tắc này sẽ chiếm tổng cộng bao nhiêu pixel chiều rộng trên trang web? A. 200px B. 210px C. 230px D. 240px Câu 16: Thuộc tính `width` và `height` có thể được áp dụng hiệu quả cho loại phần tử hiển thị nào theo mặc định? A. Chỉ inline B. Chỉ none C. Block và inline-block D. Chỉ block Câu 17: Điều gì xảy ra khi bạn cố gắng áp dụng thuộc tính `margin-top` và `margin-bottom` cho một phần tử có `display: inline;`? A. Các margin trên và dưới sẽ được áp dụng và đẩy các phần tử trên/dưới ra xa. B. Các margin trên và dưới thường không ảnh hưởng đến vị trí của các dòng văn bản xung quanh. C. Phần tử sẽ tự động chuyển thành `display: block;`. D. Trình duyệt sẽ báo lỗi CSS. Câu 18: Điều gì xảy ra khi bạn áp dụng thuộc tính `padding-top` và `padding-bottom` cho một phần tử có `display: inline;`? A. Padding trên và dưới được áp dụng nhưng có thể chồng lấn lên dòng văn bản phía trên hoặc dưới thay vì đẩy chúng ra xa. B. Padding trên và dưới bị bỏ qua hoàn toàn. C. Phần tử sẽ tự động chuyển thành `display: inline-block;`. D. Nội dung bên trong phần tử sẽ bị cắt bớt. Câu 19: Để căn giữa một phần tử khối (ví dụ: ` ` có `width` cố định) theo chiều ngang trong phần tử chứa nó, bạn thường sử dụng thuộc tính `margin` với giá trị nào? A. margin: center; B. margin: 0 auto 0 auto; C. margin: auto 0; D. margin: 0 auto; Câu 20: Giả sử bạn có một đoạn văn bản ` `. Bạn muốn thay đổi nó để nó hiển thị liền mạch với văn bản xung quanh như một phần tử nội tuyến. Bạn sẽ sử dụng quy tắc CSS nào? A. p { display: inline; } B. p { display: block; } C. p { display: none; } D. p { display: inline-block; } Câu 21: Sự khác biệt chính giữa `display: inline-block;` và `display: block;` là gì? A. `inline-block` không cho phép thiết lập chiều rộng và chiều cao, trong khi `block` thì có. B. `inline-block` cho phép các phần tử nằm trên cùng một dòng (nếu có đủ không gian), trong khi `block` luôn bắt đầu trên dòng mới. C. `block` cho phép các phần tử nằm trên cùng một dòng, trong khi `inline-block` thì không. D. `inline-block` bỏ qua hoàn toàn các thuộc tính margin và padding. Câu 22: Trong HTML, các phần tử dùng để xây dựng cấu trúc bảng là gì? A. , , B. , , C. , , D. , , D. , Câu 23: Thẻ HTML nào dùng để định nghĩa một dòng trong cấu trúc bảng? A. B. C. Câu 24: Thẻ HTML nào dùng để định nghĩa một ô dữ liệu (ô thường) trong cấu trúc bảng? A. D. D. Câu 26: Khi thiết kế layout, tại sao việc hiểu rõ sự khác biệt giữa phần tử khối (block) và nội tuyến (inline) lại quan trọng? A. Vì nó quyết định màu sắc mặc định của phần tử. B. Vì nó chỉ ảnh hưởng đến nội dung văn bản bên trong. C. Vì nó chỉ liên quan đến việc sử dụng ID hay Class. D. Vì nó ảnh hưởng trực tiếp đến cách các phần tử chiếm không gian, tương tác với nhau và cách các thuộc tính CSS như `width`, `height`, `margin`, `padding` được áp dụng. Câu 27: Bạn có một hình ảnh ``. Theo mặc định, hình ảnh là phần tử nội tuyến. Bạn muốn áp dụng `margin-top` và `margin-bottom` để tạo khoảng trống trên và dưới hình ảnh một cách đáng tin cậy, đồng thời có thể căn giữa nó theo chiều ngang bằng `margin: 0 auto;`. Bạn nên làm gì với thuộc tính `display` của hình ảnh? A. Đặt `display: block;` hoặc `display: inline-block;` B. Giữ nguyên `display: inline;` vì margin luôn hoạt động tốt. C. Đặt `display: none;` D. Sử dụng thuộc tính `vertical-align` thay cho margin. Câu 28: Trong CSS, độ ưu tiên (specificity) nào là cao nhất khi có nhiều quy tắc cùng áp dụng cho một phần tử và cùng định nghĩa một thuộc tính (ví dụ: màu chữ)? A. Quy tắc sử dụng Element selector (ví dụ: `p { ... }`) B. Quy tắc sử dụng Class selector (ví dụ: `.text { ... }`) C. Quy tắc sử dụng ID selector (ví dụ: `#title { ... }`) D. Quy tắc được viết sau cùng trong tệp CSS. Câu 29: Thuộc tính `border` trong CSS cho phép bạn thiết lập đồng thời những gì cho đường viền của một phần tử? A. Chỉ màu sắc và kiểu đường viền. B. Chỉ độ dày và màu sắc. C. Chỉ kiểu và độ dày. D. Độ dày, kiểu và màu sắc. Câu 30: Xét đoạn mã HTML: ` A. Chúng sẽ nằm trên cùng một dòng (nếu đủ chỗ), mỗi phần tử có kích thước nội dung là 100x50px cộng thêm padding và margin xung quanh. B. Mỗi phần tử sẽ nằm trên một dòng riêng biệt. C. Chúng sẽ chồng lấn lên nhau. D. Các thuộc tính `width`, `height`, `margin`, `padding` sẽ bị bỏ qua vì `display: inline-block;`. 1 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 1: Trong CSS, thuộc tính nào được sử dụng để kiểm soát cách một phần tử HTML hiển thị trên trang web, ví dụ như hiển thị dưới dạng khối (block) hay nội tuyến (inline)? display position float visibility 2 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 2: Theo mặc định, hầu hết các phần tử cấu trúc chính như ` `, ` `, ` ` thuộc loại phần tử hiển thị nào trong HTML? inline inline-block block none 3 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 3: Phần tử ` ` (đoạn văn bản) là một phần tử khối (block). Điều này có nghĩa là gì khi nó hiển thị trên trang web? Nó chỉ chiếm không gian vừa đủ nội dung và cho phép các phần tử khác nằm cùng hàng. Nó không thể nhận các thuộc tính chiều rộng và chiều cao. Nó luôn hiển thị ẩn trên trang. Nó luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn của phần tử chứa nó. 4 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 4: Phần tử `` là một phần tử nội tuyến (inline). Điều nào sau đây ĐÚNG về hành vi mặc định của nó? Nó chỉ chiếm không gian vừa đủ nội dung và không bắt đầu trên dòng mới. Nó luôn bắt đầu trên một dòng mới. Nó có thể chứa các phần tử khối khác. Bạn có thể dễ dàng thiết lập chiều rộng và chiều cao cố định cho nó mà không cần thay đổi thuộc tính `display`. 5 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 5: Bạn muốn một phần tử `` có thể nhận các thuộc tính `width` và `height` như một phần tử khối, nhưng vẫn nằm trên cùng một dòng với các phần tử nội tuyến khác. Bạn nên đặt thuộc tính `display` cho `` này là gì? block inline-block inline none 6 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 6: Thuộc tính CSS `display: none;` có tác dụng gì đối với phần tử được áp dụng? Làm cho phần tử trong suốt nhưng vẫn chiếm không gian. Ẩn phần tử khỏi chế độ xem nhưng vẫn giữ lại không gian của nó trên layout. Di chuyển phần tử ra khỏi màn hình hiển thị. Ẩn hoàn toàn phần tử khỏi chế độ xem và loại bỏ nó khỏi luồng layout, không chiếm không gian. 7 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 7: Bạn cần áp dụng một bộ quy tắc CSS DUY NHẤT cho một phần tử cụ thể trên trang web (ví dụ: tiêu đề chính). Bộ chọn (selector) nào sau đây phù hợp nhất để sử dụng? ID selector (#) Class selector (.) Element selector (ví dụ: h1) Universal selector (*) 8 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 8: Bạn muốn áp dụng cùng một kiểu định dạng (ví dụ: màu chữ, khung viền) cho NHIỀU phần tử khác nhau trên trang web có cùng mục đích hoặc ý nghĩa (ví dụ: tất cả các đoạn 'lưu ý'). Bộ chọn (selector) nào sau đây là lựa chọn tốt nhất? ID selector (#) Class selector (.) Pseudo-class selector (:hover) Attribute selector ([attribute]) 9 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 9: Cú pháp đúng để định nghĩa một quy tắc CSS cho tất cả các phần tử có `class= #warning { ... } warning { ... } .warning { ... } <warning> { ... } 10 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 10: Cú pháp đúng để định nghĩa một quy tắc CSS cho phần tử DUY NHẤT có `id= #main-header { ... } .main-header { ... } main-header { ... } id=main-header { ... } 11 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 11: Một phần tử HTML có thể có bao nhiêu giá trị `id`? Nhiều giá trị, cách nhau bằng dấu phẩy. Chỉ một giá trị duy nhất trên cùng một trang. Không có giá trị `id` nào. Tùy thuộc vào loại phần tử. 12 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 12: Một phần tử HTML có thể có bao nhiêu giá trị `class`? Nhiều giá trị, cách nhau bằng dấu cách. Chỉ một giá trị duy nhất. Không có giá trị `class` nào. Tối đa 3 giá trị. 13 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 13: Trong mô hình hộp (Box Model) của CSS, thuộc tính nào tạo ra khoảng trống *bên trong* đường viền của phần tử, giữa nội dung và đường viền? margin border padding outline 14 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 14: Trong mô hình hộp (Box Model) của CSS, thuộc tính nào tạo ra khoảng trống *bên ngoài* đường viền của phần tử, giữa phần tử đó và các phần tử lân cận? margin border padding content 15 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 15: Xem xét đoạn mã CSS sau: `div { width: 200px; padding: 10px; border: 5px solid black; margin: 15px; }`. Một phần tử ` ` áp dụng quy tắc này sẽ chiếm tổng cộng bao nhiêu pixel chiều rộng trên trang web? 200px 210px 230px 240px 16 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 16: Thuộc tính `width` và `height` có thể được áp dụng hiệu quả cho loại phần tử hiển thị nào theo mặc định? Chỉ inline Chỉ none Block và inline-block Chỉ block 17 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 17: Điều gì xảy ra khi bạn cố gắng áp dụng thuộc tính `margin-top` và `margin-bottom` cho một phần tử có `display: inline;`? Các margin trên và dưới sẽ được áp dụng và đẩy các phần tử trên/dưới ra xa. Các margin trên và dưới thường không ảnh hưởng đến vị trí của các dòng văn bản xung quanh. Phần tử sẽ tự động chuyển thành `display: block;`. Trình duyệt sẽ báo lỗi CSS. 18 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 18: Điều gì xảy ra khi bạn áp dụng thuộc tính `padding-top` và `padding-bottom` cho một phần tử có `display: inline;`? Padding trên và dưới được áp dụng nhưng có thể chồng lấn lên dòng văn bản phía trên hoặc dưới thay vì đẩy chúng ra xa. Padding trên và dưới bị bỏ qua hoàn toàn. Phần tử sẽ tự động chuyển thành `display: inline-block;`. Nội dung bên trong phần tử sẽ bị cắt bớt. 19 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 19: Để căn giữa một phần tử khối (ví dụ: ` ` có `width` cố định) theo chiều ngang trong phần tử chứa nó, bạn thường sử dụng thuộc tính `margin` với giá trị nào? margin: center; margin: 0 auto 0 auto; margin: auto 0; margin: 0 auto; 20 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 20: Giả sử bạn có một đoạn văn bản ` `. Bạn muốn thay đổi nó để nó hiển thị liền mạch với văn bản xung quanh như một phần tử nội tuyến. Bạn sẽ sử dụng quy tắc CSS nào? p { display: inline; } p { display: block; } p { display: none; } p { display: inline-block; } 21 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 21: Sự khác biệt chính giữa `display: inline-block;` và `display: block;` là gì? `inline-block` không cho phép thiết lập chiều rộng và chiều cao, trong khi `block` thì có. `inline-block` cho phép các phần tử nằm trên cùng một dòng (nếu có đủ không gian), trong khi `block` luôn bắt đầu trên dòng mới. `block` cho phép các phần tử nằm trên cùng một dòng, trong khi `inline-block` thì không. `inline-block` bỏ qua hoàn toàn các thuộc tính margin và padding. 22 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 22: Trong HTML, các phần tử dùng để xây dựng cấu trúc bảng là gì? <div>, <span>, <p> <ul>, <ol>, <li> <form>, <input>, <button> <table>, <tr>, <th>, <td> 23 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 23: Thẻ HTML nào dùng để định nghĩa một *dòng* trong cấu trúc bảng? <td> <th> <tr> <table> 24 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 24: Thẻ HTML nào dùng để định nghĩa một *ô dữ liệu* (ô thường) trong cấu trúc bảng? <td> <th> <tr> <caption> 25 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 25: Thẻ HTML nào dùng để định nghĩa một *ô tiêu đề* (ô thường được in đậm và căn giữa) trong cấu trúc bảng? <td> <th> <tr> <head> 26 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 26: Khi thiết kế layout, tại sao việc hiểu rõ sự khác biệt giữa phần tử khối (block) và nội tuyến (inline) lại quan trọng? Vì nó quyết định màu sắc mặc định của phần tử. Vì nó chỉ ảnh hưởng đến nội dung văn bản bên trong. Vì nó chỉ liên quan đến việc sử dụng ID hay Class. Vì nó ảnh hưởng trực tiếp đến cách các phần tử chiếm không gian, tương tác với nhau và cách các thuộc tính CSS như `width`, `height`, `margin`, `padding` được áp dụng. 27 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 27: Bạn có một hình ảnh ``. Theo mặc định, hình ảnh là phần tử nội tuyến. Bạn muốn áp dụng `margin-top` và `margin-bottom` để tạo khoảng trống trên và dưới hình ảnh một cách đáng tin cậy, đồng thời có thể căn giữa nó theo chiều ngang bằng `margin: 0 auto;`. Bạn nên làm gì với thuộc tính `display` của hình ảnh? Đặt `display: block;` hoặc `display: inline-block;` Giữ nguyên `display: inline;` vì margin luôn hoạt động tốt. Đặt `display: none;` Sử dụng thuộc tính `vertical-align` thay cho margin. 28 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 28: Trong CSS, độ ưu tiên (specificity) nào là cao nhất khi có nhiều quy tắc cùng áp dụng cho một phần tử và cùng định nghĩa một thuộc tính (ví dụ: màu chữ)? Quy tắc sử dụng Element selector (ví dụ: `p { ... }`) Quy tắc sử dụng Class selector (ví dụ: `.text { ... }`) Quy tắc sử dụng ID selector (ví dụ: `#title { ... }`) Quy tắc được viết sau cùng trong tệp CSS. 29 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 29: Thuộc tính `border` trong CSS cho phép bạn thiết lập đồng thời những gì cho đường viền của một phần tử? Chỉ màu sắc và kiểu đường viền. Chỉ độ dày và màu sắc. Chỉ kiểu và độ dày. Độ dày, kiểu và màu sắc. 30 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 8 Câu 30: Xét đoạn mã HTML: ` Nội dung ` và CSS: `.box { display: inline-block; width: 100px; height: 50px; margin: 10px; padding: 5px; }`. Nếu có 3 phần tử ` ` như vậy nằm cạnh nhau trong một phần tử chứa rộng rãi, chúng sẽ hiển thị như thế nào? Chúng sẽ nằm trên cùng một dòng (nếu đủ chỗ), mỗi phần tử có kích thước nội dung là 100x50px cộng thêm padding và margin xung quanh. Mỗi phần tử sẽ nằm trên một dòng riêng biệt. Chúng sẽ chồng lấn lên nhau. Các thuộc tính `width`, `height`, `margin`, `padding` sẽ bị bỏ qua vì `display: inline-block;`. Xem kết quả Bạn ơi!!! Để xem được kết quả bạn vui lòng làm nhiệm vụ nhỏ xíu này nha LƯU Ý: Không sử dụng VPN hoặc 1.1.1.1 khi vượt link Nhận kết quả Xảy ra lỗi Bước 1: Mở tab mới, truy cập Google.com Bước 2: Tìm kiếm từ khóa: vận chuyển văn phòng giá rẻ Đổi nhiệm vụ Bước 3: Trong kết quả tìm kiếm Google, hãy tìm website giống dưới hình: (Nếu trang 1 không có hãy tìm ở trang 2, 3, 4... nhé ) Bước 4: Cuộn xuống cuối bài viết rồi bấm vào nút GIỐNG HÌNH DƯỚI và chờ 1 lát để lấy mã: By Wordpress Quiz plugin 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 09 Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 09 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay. Câu 1: Trong CSS, để chọn một phần tử HTML duy nhất trên trang web để áp dụng kiểu định dạng, bạn nên sử dụng bộ chọn nào? A. Bộ chọn lớp (Class selector) B. Bộ chọn ID (ID selector) C. Bộ chọn phần tử (Element selector) D. Bộ chọn hậu duệ (Descendant selector) Câu 2: Cho đoạn mã HTML sau: ` A. .box B. #box C. div D. .red, .blue Câu 3: Phần tử khối (block element) trong HTML/CSS có đặc điểm hiển thị mặc định như thế nào? A. Không bao giờ xuống dòng, nằm cùng hàng với các phần tử khác. B. Chỉ chiếm không gian vừa đủ cho nội dung của nó. C. Luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng khả dụng. D. Không thể thiết lập chiều cao và chiều rộng cố định. Câu 4: Thuộc tính CSS `display: inline;` được sử dụng để làm gì? A. Ẩn hoàn toàn phần tử khỏi hiển thị. B. Biến phần tử thành khối, chiếm toàn bộ chiều rộng. C. Biến phần tử thành một khối nội tuyến (inline-block). D. Biến phần tử thành nội tuyến, nằm cùng hàng với các phần tử khác và không ngắt dòng. Câu 5: Bạn có một phần tử `` (mặc định là inline) và muốn đặt cho nó một chiều rộng cố định là 150px và một chiều cao cố định là 50px. Thuộc tính CSS nào sau đây sẽ giúp bạn đạt được điều này một cách hiệu quả nhất? A. display: inline-block; B. display: inline; C. display: block; D. display: none; Câu 6: Quy tắc đặt tên cho ID và Class trong CSS/HTML là gì? A. Có thể bắt đầu bằng số hoặc các ký tự đặc biệt như @, #. B. Không được bắt đầu bằng số và không chứa dấu cách. C. Bắt buộc phải chứa ít nhất một chữ số. D. Không phân biệt chữ hoa và chữ thường. Câu 7: Cho đoạn mã CSS: `#sidebar { border: 1px solid black; padding: 10px; margin-top: 20px; }`. Những thuộc tính `border`, `padding`, `margin-top` này thuộc nhóm các thuộc tính liên quan đến gì trong mô hình hộp (Box Model)? A. Chỉ áp dụng cho phần tử nội tuyến. B. Chỉ áp dụng cho phần tử khối. C. Định dạng khung và khoảng cách cho phần tử. D. Thay đổi loại hiển thị của phần tử. Câu 8: Tại sao việc áp dụng thuộc tính `width` hoặc `height` cho một phần tử `` (mặc định là inline) lại thường không có tác dụng như mong đợi? A. Phần tử inline chỉ chiếm không gian vừa đủ cho nội dung và không cho phép thiết lập kích thước cố định theo `width` và `height`. B. Phần tử `` là một trường hợp đặc biệt không nhận các thuộc tính kích thước. C. Chỉ có phần tử khối mới nhận thuộc tính `width` và `height`. D. Cần thêm thuộc tính `display: block;` để `width` và `height` có tác dụng. Câu 9: Một phần tử HTML có thể có bao nhiêu ID và bao nhiêu Class? A. Nhiều ID, một Class. B. Một ID, nhiều Class. C. Nhiều ID, nhiều Class. D. Một ID, một Class. Câu 10: Cho đoạn mã HTML: ` A. .text, .highlight B. .text .highlight C. .text.highlight D. #text.highlight Câu 11: Thuộc tính CSS `display: none;` khác gì so với `visibility: hidden;`? A. `display: none;` loại bỏ hoàn toàn phần tử khỏi bố cục, còn `visibility: hidden;` chỉ ẩn phần tử nhưng vẫn giữ nguyên không gian chiếm chỗ của nó. B. `visibility: hidden;` loại bỏ hoàn toàn phần tử, còn `display: none;` chỉ ẩn tạm thời. C. Chúng có tác dụng hoàn toàn giống nhau. D. `display: none;` chỉ dùng cho phần tử khối, `visibility: hidden;` dùng cho phần tử nội tuyến. Câu 12: Giả sử bạn có một danh sách các mục (` `) trong một danh sách không thứ tự (` `). Theo mặc định, các mục danh sách (` `) thường là loại phần tử nào? A. Inline B. Block C. Inline-block D. None Câu 13: Khi sử dụng bộ chọn ID, ví dụ `#header`, ký tự `#` đứng trước tên ID có ý nghĩa gì? A. Đánh dấu đây là một lớp (class). B. Đánh dấu đây là một phần tử HTML. C. Đánh dấu đây là một bộ chọn thuộc tính. D. Đánh dấu đây là một mã định danh duy nhất (ID). Câu 14: Cho đoạn mã CSS: `.button { display: inline-block; padding: 10px 20px; border: 1px solid blue; }`. Thuộc tính `padding` trong trường hợp này sẽ ảnh hưởng như thế nào đến phần tử có class `button`? A. Tạo khoảng đệm 10px ở trên và dưới, 20px ở trái và phải, bên trong đường viền của phần tử. B. Tạo khoảng trống 10px ở trên và dưới, 20px ở trái và phải, bên ngoài đường viền của phần tử. C. Chỉ tạo khoảng đệm 10px cho tất cả các cạnh. D. Không có tác dụng vì phần tử là inline-block. Câu 15: Bạn muốn tạo một đường viền màu đỏ nét đứt dày 2px xung quanh một phần tử `div`. Cú pháp CSS đúng cho thuộc tính `border` là gì? A. border: red dashed 2px; B. border: 2px dashed red; C. border: solid 2px red; D. border: 2px red dashed; Câu 16: Trong HTML, thẻ ` B. C. Câu 25: Thẻ HTML nào dùng để định nghĩa một ô tiêu đề (ô thường được in đậm và căn giữa) trong cấu trúc bảng? A. B. C. ` được sử dụng để làm gì? A. Định nghĩa một bảng dữ liệu. B. Định nghĩa một hàng trong bảng. C. Định nghĩa một ô dữ liệu trong bảng. D. Định nghĩa ô tiêu đề trong bảng. Câu 17: Để định nghĩa một hàng (row) trong bảng HTML, bạn sử dụng thẻ nào bên trong thẻ ` `? A. D. B. C. Câu 18: Thẻ ` ` trong bảng HTML có mục đích gì? A. Định nghĩa một ô dữ liệu thông thường. B. Định nghĩa tiêu đề cho toàn bộ bảng. C. Định nghĩa một hàng tiêu đề. D. Định nghĩa một ô tiêu đề (thường được căn giữa và in đậm theo mặc định). Câu 19: Khi định dạng khung (ví dụ: border, padding, margin) cho một phần tử, thứ tự áp dụng các lớp (class) và ID có ảnh hưởng đến kết quả cuối cùng không? Nếu có, nguyên tắc nào thường được áp dụng? A. Có, nguyên tắc mức độ ưu tiên của bộ chọn (Specificity) và thứ tự trong mã CSS. ID có mức ưu tiên cao hơn Class. B. Không, thứ tự và loại bộ chọn không ảnh hưởng, trình duyệt sẽ tự động áp dụng tất cả. C. Chỉ có thứ tự trong mã CSS ảnh hưởng, bộ chọn nào viết sau sẽ ghi đè. D. Chỉ có loại bộ chọn ảnh hưởng, Class luôn ưu tiên hơn ID. Câu 20: Giả sử bạn có một phần tử ` ` với ID là `main-content` và Class là `article`. Nếu có hai quy tắc CSS như sau: `#main-content { color: blue; }` và `.article { color: red; }`, màu chữ cuối cùng của phần tử `div` đó sẽ là gì? A. Blue (Vì bộ chọn ID có độ ưu tiên cao hơn bộ chọn Class). B. Red (Vì bộ chọn Class viết sau). C. Sẽ có lỗi và không áp dụng màu nào. D. Màu mặc định của trình duyệt. Câu 21: Bạn muốn tạo một khoảng trống 15px bên ngoài đường viền của một nút bấm (button). Thuộc tính CSS nào bạn nên sử dụng? A. padding: 15px; B. border-spacing: 15px; C. margin: 15px; D. outline: 15px; Câu 22: Một phần tử `` (inline) được áp dụng CSS như sau: `span { margin-top: 20px; margin-bottom: 20px; }`. Quan sát trên trình duyệt, bạn có thể thấy điều gì xảy ra với `margin-top` và `margin-bottom`? A. Cả `margin-top` và `margin-bottom` đều được áp dụng đầy đủ. B. `margin-top` và `margin-bottom` thường không có tác dụng trên phần tử inline; chỉ `margin-left` và `margin-right` được áp dụng. C. Chỉ `margin-top` được áp dụng, `margin-bottom` thì không. D. Chỉ `margin-bottom` được áp dụng, `margin-top` thì không. Câu 23: Để làm cho một phần tử khối (` `) hiển thị dưới dạng nội tuyến nhưng vẫn cho phép thiết lập `width` và `height`, bạn sẽ sử dụng giá trị nào cho thuộc tính `display`? A. block B. inline C. none D. inline-block Câu 24: Bạn có một đoạn văn bản dài và muốn một số từ cụ thể trong đoạn đó có màu sắc khác và được gạch chân. Bạn nên sử dụng thẻ HTML nào để bọc các từ đó và áp dụng CSS? A. (Vì nó là phần tử nội tuyến và không làm ngắt dòng) B. (Vì nó là phần tử khối) C. (Vì nó định nghĩa đoạn văn) D. (Vì nó định nghĩa tiêu đề) Câu 25: Cho một phần tử có nhiều class, ví dụ ` A. 1px solid grey. B. Đường viền kép với cả hai kiểu. C. 2px solid blue (Vì cả hai đều là bộ chọn Class, quy tắc viết sau trong CSS sẽ được ưu tiên). D. Không có đường viền nào được áp dụng. Câu 26: Thuộc tính CSS `box-sizing: border-box;` ảnh hưởng như thế nào đến cách tính toán kích thước của một phần tử? A. Chiều rộng và chiều cao được thiết lập bao gồm cả padding và border, nhưng không bao gồm margin. B. Chiều rộng và chiều cao chỉ áp dụng cho phần nội dung, không tính padding và border. C. Chiều rộng và chiều cao bao gồm cả margin. D. Chỉ áp dụng cho phần tử khối. Câu 27: Bạn muốn tạo một khoảng trống đồng đều 8px bên trong đường viền của một ô dữ liệu trong bảng (` `). Thuộc tính CSS nào bạn nên sử dụng cho ô đó? A. margin: 8px; B. padding: 8px; C. border-spacing: 8px; D. outline: 8px; Câu 28: Xét mô hình hộp (Box Model) trong CSS, thứ tự các lớp từ trong ra ngoài là gì? A. Margin, Border, Padding, Content. B. Border, Padding, Content, Margin. C. Padding, Border, Margin, Content. D. Content, Padding, Border, Margin. Câu 29: Một phần tử được áp dụng thuộc tính `display: none;`. Điều gì sẽ xảy ra với phần tử đó và không gian mà nó từng chiếm giữ trên trang? A. Phần tử hoàn toàn không hiển thị và không chiếm bất kỳ không gian nào trong bố cục trang. B. Phần tử bị ẩn nhưng vẫn giữ nguyên không gian chiếm chỗ, tạo ra khoảng trống. C. Phần tử hiển thị nhưng có độ trong suốt bằng 0. D. Chỉ nội dung của phần tử bị ẩn, khung viền vẫn hiển thị. Câu 30: Khi nào thì việc sử dụng bộ chọn ID phù hợp hơn bộ chọn Class? A. Khi bạn muốn áp dụng cùng một kiểu cho nhiều phần tử khác nhau. B. Khi bạn muốn định dạng một phần tử cụ thể và duy nhất trên trang (ví dụ: header, footer, sidebar chính). C. Khi bạn muốn tạo một nhóm các phần tử có cùng chức năng. D. Khi bạn cần áp dụng nhiều kiểu khác nhau cho cùng một phần tử. 1 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 9 Câu 22: Một phần tử `` (inline) được áp dụng CSS như sau: `span { margin-top: 20px; margin-bottom: 20px; }`. Quan sát trên trình duyệt, bạn có thể thấy điều gì xảy ra với `margin-top` và `margin-bottom`? Cả `margin-top` và `margin-bottom` đều được áp dụng đầy đủ. `margin-top` và `margin-bottom` thường không có tác dụng trên phần tử inline; chỉ `margin-left` và `margin-right` được áp dụng. Chỉ `margin-top` được áp dụng, `margin-bottom` thì không. Chỉ `margin-bottom` được áp dụng, `margin-top` thì không. 2 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 9 Câu 23: Để làm cho một phần tử khối (` `) hiển thị dưới dạng nội tuyến nhưng vẫn cho phép thiết lập `width` và `height`, bạn sẽ sử dụng giá trị nào cho thuộc tính `display`? block inline none inline-block 3 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 9 Câu 24: Bạn có một đoạn văn bản dài và muốn một số từ cụ thể trong đoạn đó có màu sắc khác và được gạch chân. Bạn nên sử dụng thẻ HTML nào để bọc các từ đó và áp dụng CSS? <span> (Vì nó là phần tử nội tuyến và không làm ngắt dòng) <div> (Vì nó là phần tử khối) <p> (Vì nó định nghĩa đoạn văn) <h1> (Vì nó định nghĩa tiêu đề) 4 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 9 Câu 25: Cho một phần tử có nhiều class, ví dụ ` ... `. Nếu class `gallery` đặt `border: 1px solid grey;` và class `large-item` đặt `border: 2px solid blue;`, thì đường viền cuối cùng của phần tử này sẽ như thế nào (giả sử không có quy tắc CSS nào khác có mức ưu tiên cao hơn)? 1px solid grey. Đường viền kép với cả hai kiểu. 2px solid blue (Vì cả hai đều là bộ chọn Class, quy tắc viết sau trong CSS sẽ được ưu tiên). Không có đường viền nào được áp dụng. 5 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 9 Câu 26: Thuộc tính CSS `box-sizing: border-box;` ảnh hưởng như thế nào đến cách tính toán kích thước của một phần tử? Chiều rộng và chiều cao được thiết lập bao gồm cả padding và border, nhưng không bao gồm margin. Chiều rộng và chiều cao chỉ áp dụng cho phần nội dung, không tính padding và border. Chiều rộng và chiều cao bao gồm cả margin. Chỉ áp dụng cho phần tử khối. 6 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 9 Câu 27: Bạn muốn tạo một khoảng trống đồng đều 8px *bên trong* đường viền của một ô dữ liệu trong bảng (` `). Thuộc tính CSS nào bạn nên sử dụng cho ô đó? margin: 8px; padding: 8px; border-spacing: 8px; outline: 8px; 7 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 9 Câu 28: Xét mô hình hộp (Box Model) trong CSS, thứ tự các lớp từ trong ra ngoài là gì? Margin, Border, Padding, Content. Border, Padding, Content, Margin. Padding, Border, Margin, Content. Content, Padding, Border, Margin. 8 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 9 Câu 29: Một phần tử được áp dụng thuộc tính `display: none;`. Điều gì sẽ xảy ra với phần tử đó và không gian mà nó từng chiếm giữ trên trang? Phần tử hoàn toàn không hiển thị và không chiếm bất kỳ không gian nào trong bố cục trang. Phần tử bị ẩn nhưng vẫn giữ nguyên không gian chiếm chỗ, tạo ra khoảng trống. Phần tử hiển thị nhưng có độ trong suốt bằng 0. Chỉ nội dung của phần tử bị ẩn, khung viền vẫn hiển thị. 9 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 9 Câu 30: Khi nào thì việc sử dụng bộ chọn ID phù hợp hơn bộ chọn Class? Khi bạn muốn áp dụng cùng một kiểu cho nhiều phần tử khác nhau. Khi bạn muốn định dạng một phần tử cụ thể và duy nhất trên trang (ví dụ: header, footer, sidebar chính). Khi bạn muốn tạo một nhóm các phần tử có cùng chức năng. Khi bạn cần áp dụng nhiều kiểu khác nhau cho cùng một phần tử. 10 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 1: Trong CSS, mức độ ưu tiên (specificity) của một bộ chọn được tính dựa trên những yếu tố nào? Số lượng thuộc tính CSS được khai báo. Thứ tự xuất hiện của bộ chọn trong tệp CSS. Số lượng phần tử con trong bộ chọn. Số lượng ID, lớp (class), và tên thẻ (element) trong bộ chọn. 11 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 2: Giả sử bạn có đoạn mã HTML và CSS sau. Màu nền của đoạn văn bản ` ` sẽ là gì? yellow lightblue lightgreen orange 12 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 3: Bộ chọn `#header .title` có mức độ ưu tiên là bao nhiêu? (0, 1, 1) (1, 0, 1) (1, 1, 0) (0, 0, 11) 13 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 4: Bộ chọn `ul li.item a:hover` có mức độ ưu tiên là bao nhiêu? (0, 2, 2) (0, 1, 3) (0, 3, 1) (0, 0, 4) 14 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 5: Trong các bộ chọn sau, bộ chọn nào có mức độ ưu tiên cao nhất? 15 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 6: Khi hai bộ chọn có cùng mức độ ưu tiên, quy tắc CSS nào sẽ được áp dụng? Quy tắc được viết sau cùng trong tệp CSS. Quy tắc được viết đầu tiên trong tệp CSS. Quy tắc có ít thuộc tính hơn. Quy tắc có nhiều thuộc tính hơn. 16 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 7: Thuộc tính `!important` trong CSS có tác dụng gì đối với mức độ ưu tiên? Giảm mức độ ưu tiên của quy tắc. Tăng mức độ ưu tiên lên mức cao nhất, vượt qua cả mức độ ưu tiên thông thường của bộ chọn. Chỉ áp dụng quy tắc khi trang web được in ra. Khiến quy tắc chỉ áp dụng cho các thiết bị di động. 17 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 8: Nên sử dụng `!important` như thế nào trong quá trình phát triển web? Sử dụng thường xuyên để đảm bảo các quy tắc mong muốn được áp dụng. Sử dụng cho mọi quy tắc quan trọng. Hạn chế tối đa việc sử dụng `!important` vì nó làm phức tạp việc quản lý CSS và khó ghi đè. Chỉ sử dụng cho các quy tắc liên quan đến màu sắc và font chữ. 18 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 9: Thứ tự ưu tiên áp dụng các kiểu CSS (từ thấp đến cao) là gì? Tính kế thừa -> Bộ chọn thông thường -> Quy tắc `!important` -> Kiểu nội dòng (Inline style). Kiểu nội dòng (Inline style) -> Quy tắc `!important` -> Bộ chọn thông thường -> Tính kế thừa. Tính kế thừa -> Quy tắc `!important` -> Kiểu nội dòng (Inline style) -> Bộ chọn thông thường. Bộ chọn thông thường -> Tính kế thừa -> Quy tắc `!important` -> Kiểu nội dòng (Inline style). 19 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 10: Tính kế thừa (Inheritance) trong CSS có nghĩa là gì? Các phần tử con luôn ghi đè thuộc tính CSS của phần tử cha. Một số thuộc tính CSS được áp dụng cho phần tử cha sẽ tự động áp dụng cho các phần tử con của nó nếu không có quy tắc cụ thể nào cho phần tử con. Chỉ các thuộc tính liên quan đến bố cục (layout) mới được kế thừa. Chỉ các phần tử cùng cấp mới có thể kế thừa thuộc tính của nhau. 20 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 11: Thuộc tính nào sau đây KHÔNG thường được kế thừa từ phần tử cha sang phần tử con? color font-family margin text-align 21 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 12: Pseudo-class (`:`) trong CSS được sử dụng để làm gì? Chọn các phần tử dựa trên trạng thái đặc biệt của chúng (ví dụ: khi di chuột qua, khi được chọn). Chọn các phần tử dựa trên tên thẻ HTML. Chọn các phần tử dựa trên thuộc tính `id` của chúng. Thêm nội dung giả vào trước hoặc sau phần tử. 22 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 13: Pseudo-element (`::`) trong CSS được sử dụng để làm gì? Chọn các phần tử dựa trên trạng thái đặc biệt của chúng. Chọn các phần tử dựa trên tên lớp (class) của chúng. Chọn các phần tử dựa trên vị trí của chúng trong tài liệu. Chọn và định dạng một phần cụ thể của phần tử (ví dụ: dòng đầu tiên, chữ cái đầu tiên, hoặc thêm nội dung giả). 23 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 14: Bộ chọn `:visited` là loại bộ chọn nào? Bộ chọn thẻ (Element selector) Bộ chọn Pseudo-class Bộ chọn Pseudo-element Bộ chọn ID 24 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 15: Bộ chọn `::first-line` là loại bộ chọn nào? Bộ chọn lớp (Class selector) Bộ chọn Pseudo-class Bộ chọn Pseudo-element Bộ chọn thuộc tính (Attribute selector) 25 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 16: Giả sử bạn có đoạn HTML ` Nội dung `. Nếu bạn muốn định dạng chỉ chữ cái đầu tiên của đoạn ` `, bạn sẽ sử dụng bộ chọn nào? 26 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 17: Trong CSS, mức độ ưu tiên của bộ chọn `style="..."` (kiểu nội dòng) so với bộ chọn ID (`#id`) là như thế nào? Kiểu nội dòng có mức độ ưu tiên cao hơn bộ chọn ID. Bộ chọn ID có mức độ ưu tiên cao hơn kiểu nội dòng. Cả hai có mức độ ưu tiên như nhau. Mức độ ưu tiên phụ thuộc vào thứ tự xuất hiện trong tệp CSS. 27 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 18: Cho các bộ chọn sau: `A: p`, `B: .my-class`, `C: #my-id`. Sắp xếp các bộ chọn này theo thứ tự mức độ ưu tiên tăng dần. A, C, B A, B, C C, B, A B, A, C 28 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 19: Điều gì xảy ra khi một thuộc tính CSS được định nghĩa cho cùng một phần tử bởi cả quy tắc kế thừa và một quy tắc áp dụng trực tiếp cho phần tử đó (không có `!important`)? Quy tắc kế thừa được áp dụng. Quy tắc được viết sau cùng trong tệp CSS được áp dụng. Quy tắc áp dụng trực tiếp cho phần tử sẽ được áp dụng vì nó có mức độ ưu tiên cao hơn tính kế thừa. Thuộc tính sẽ không được áp dụng vì có xung đột. 29 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 20: Giả sử bạn có đoạn CSS sau: `p { color: blue; }` và `.highlight { color: red; }`. Một đoạn HTML là ` Đoạn văn bản `. Màu của đoạn văn bản này sẽ là gì? red blue Màu mặc định của trình duyệt Không có màu nào được áp dụng do xung đột. 30 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn Tags: Bộ đề 9 Câu 21: Giả sử bạn có đoạn CSS sau: `#main p { font-weight: bold; }` và `.content p { font-weight: normal; }`. Một đoạn HTML là ` Nội dung `. Độ đậm của chữ trong đoạn ` ` sẽ là gì? normal bold Mặc định Cả hai kiểu đều được áp dụng đồng thời (không thể xảy ra). Xem kết quả Bạn ơi!!! Để xem được kết quả bạn vui lòng làm nhiệm vụ nhỏ xíu này nha LƯU Ý: Không sử dụng VPN hoặc 1.1.1.1 khi vượt link Nhận kết quả Xảy ra lỗi Bước 1: Mở tab mới, truy cập Google.com Bước 2: Tìm kiếm từ khóa: vận chuyển văn phòng giá rẻ Đổi nhiệm vụ Bước 3: Trong kết quả tìm kiếm Google, hãy tìm website giống dưới hình: (Nếu trang 1 không có hãy tìm ở trang 2, 3, 4... nhé ) Bước 4: Cuộn xuống cuối bài viết rồi bấm vào nút GIỐNG HÌNH DƯỚI và chờ 1 lát để lấy mã: By Wordpress Quiz plugin 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 10 Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 10 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay. Câu 1: Một phần tử HTML được định dạng với CSS sau: `div { width: 200px; padding: 10px; border: 5px solid black; margin: 15px; }`. Nếu `box-sizing` mặc định là `content-box`, tổng chiều rộng mà phần tử này chiếm trên trang (bao gồm nội dung, padding, border và margin) là bao nhiêu? A. 220px B. 230px C. 240px D. 250px Câu 2: Bạn có hai thẻ `div` liền kề nhau trong HTML. Mặc định, chúng sẽ hiển thị như thế nào trên trang web? A. Mỗi thẻ `div` sẽ nằm trên một dòng riêng biệt. B. Hai thẻ `div` sẽ nằm cạnh nhau trên cùng một dòng. C. Thẻ `div` thứ hai sẽ nằm bên trong thẻ `div` thứ nhất. D. Trình duyệt sẽ báo lỗi định dạng. Câu 3: Để thêm một đường viền nét đứt màu xanh dày 2px chỉ ở phía dưới của một đoạn văn bản (` `), thuộc tính CSS nào sau đây là phù hợp nhất? A. border-bottom: 2px solid blue; B. border: 2px dashed blue; C. border-bottom: 2px dashed blue; D. border-style: dashed; border-color: blue; border-width: 2px; Câu 4: Sự khác biệt chính giữa `margin` và `padding` trong CSS là gì? A. `margin` tạo khoảng trống bên trong phần tử, còn `padding` tạo khoảng trống bên ngoài. B. `margin` tạo khoảng trống bên ngoài đường viền phần tử, còn `padding` tạo khoảng trống bên trong đường viền (giữa nội dung và đường viền). C. Cả hai đều tạo khoảng trống bên ngoài phần tử nhưng `padding` có thể âm. D. Cả hai đều tạo khoảng trống bên trong phần tử nhưng `margin` có thể có màu nền. Câu 5: Một `div` có chiều rộng cố định và chứa một đoạn văn bản rất dài. Để thêm thanh cuộn (scrollbar) nếu nội dung vượt quá kích thước của `div`, bạn nên sử dụng thuộc tính CSS nào? A. overflow: auto; B. display: scroll; C. scrollbar: visible; D. content-overflow: scroll; Câu 6: Hiện tượng "margin collapsing" (gộp lề) trong CSS xảy ra khi nào? A. Khi lề trái và lề phải của hai phần tử liền kề gặp nhau. B. Khi lề trên của phần tử con gặp lề dưới của phần tử cha. C. Khi lề trên và lề dưới của hai phần tử khối liền kề (theo chiều dọc) gặp nhau. D. Khi lề trên của phần tử gặp padding dưới của chính nó. Câu 7: Mặc định, thẻ `` là một phần tử nội tuyến (`inline`). Làm thế nào để biến thẻ `` này thành phần tử khối (`block`) để có thể thiết lập chiều rộng và chiều cao cho nó? A. Sử dụng thuộc tính `position: block;` B. Sử dụng thuộc tính `display: block;` C. Sử dụng thuộc tính `type: block;` D. Không thể thay đổi loại hiển thị của phần tử ``. Câu 8: Thuộc tính `display: none;` và `visibility: hidden;` đều làm ẩn phần tử trên trang web. Sự khác biệt chính giữa chúng là gì? A. `display: none;` chỉ ẩn nội dung, còn `visibility: hidden;` ẩn cả nội dung và đường viền. B. `display: none;` ẩn phần tử nhưng vẫn giữ chỗ trống trên layout, còn `visibility: hidden;` không giữ chỗ trống. C. `visibility: hidden;` chỉ ẩn nội dung, còn `display: none;` ẩn cả nội dung và đường viền. D. `display: none;` loại bỏ phần tử hoàn toàn khỏi luồng layout, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian mà nó chiếm dụng trên layout. Câu 9: Bạn có một `div` cha và một `div` con bên trong. `div` cha có `padding-top: 20px;` và `div` con có `margin-top: 15px;`. Khoảng cách thực tế giữa đường viền trên của `div` cha và đường viền trên của `div` con là bao nhiêu? A. 35px (20px + 15px) B. 20px (do margin collapsing) C. 15px (do margin collapsing) D. Khoảng cách không xác định. Câu 10: Một nút bấm (``) cần có khoảng trống giữa văn bản bên trong và đường viền của nút. Thuộc tính CSS nào dùng để kiểm soát khoảng trống này? A. margin B. border-spacing C. padding D. text-indent Câu 11: Một phần tử có `width: 100px`, `padding: 10px`, `border: 2px solid`. Nếu bạn thay đổi `box-sizing` từ `content-box` sang `border-box`, điều gì xảy ra với kích thước hiển thị của phần tử (không bao gồm margin)? A. Tổng chiều rộng tăng thêm 24px. B. Tổng chiều rộng vẫn là 100px. C. Tổng chiều rộng giảm đi 12px. D. Tổng chiều rộng trở thành 124px. Câu 12: Để căn giữa một phần tử khối (`div`) theo chiều ngang trong phần tử cha của nó, bạn có thể sử dụng thuộc tính `margin` với giá trị nào? A. margin: 0 auto; B. margin: center; C. margin-align: center; D. text-align: center; Câu 13: Bạn có một phần tử ` A. Đỏ (red) B. Xanh dương (blue) C. Màu mặc định của trình duyệt D. Cả hai màu được áp dụng cùng lúc. Câu 14: Bạn muốn tất cả các phần tử `` trên trang đều có một đường viền nét liền màu xám dày 1px. Đoạn CSS nào sau đây thực hiện điều này một cách hiệu quả? A. image { border: 1px solid gray; } B. .img { border: 1px solid gray; } C. #img { border: 1px solid gray; } D. img { border: 1px solid gray; } Câu 15: Một phần tử có HTML là ` A. Chỉ có padding: 10px; B. Chỉ có margin: 20px; C. Có cả padding: 10px; và margin: 20px; D. Không có thuộc tính nào được áp dụng do xung đột. Câu 16: Khi thiết kế một form nhập liệu, khoảng trống giữa nội dung văn bản người dùng nhập và đường viền của ô nhập liệu được kiểm soát bởi thuộc tính nào trong Box Model? A. padding B. margin C. border-spacing D. outline Câu 17: Điều gì xảy ra nếu bạn cố gắng thiết lập thuộc tính `width` và `height` cho một phần tử có `display: inline;`? A. Thuộc tính `width` và `height` sẽ được áp dụng bình thường. B. Thuộc tính `width` và `height` sẽ bị bỏ qua, không có tác dụng. C. Phần tử sẽ tự động chuyển thành `display: block;`. D. Chỉ thuộc tính `width` được áp dụng, `height` bị bỏ qua. Câu 18: Để đặt lề trên (margin-top) của một phần tử là 20px, lề phải là 10px, lề dưới là 5px và lề trái là 0px, cách viết tắt nào sau đây là đúng? A. margin: 20px 10px 5px 0px top right bottom left; B. margin: 20px 0px 5px 10px; C. margin: 20px 5px 10px 0px; D. margin: 20px 10px 5px 0px; Câu 19: Bạn có một thẻ `` (mặc định `inline`) và một thẻ ` ` (mặc định `block`) đặt cạnh nhau trong mã HTML. Khi hiển thị trên trình duyệt, chúng sẽ xuất hiện như thế nào? A. Cả hai sẽ nằm trên cùng một dòng. B. Thẻ `` sẽ nằm trên một dòng, và thẻ ` ` sẽ bắt đầu một dòng mới. C. Thẻ ` ` sẽ nằm trên một dòng, và thẻ `` sẽ bắt đầu một dòng mới. D. Thẻ `` sẽ nằm bên trong thẻ ` `. Câu 20: Đoạn CSS nào sau đây sẽ đặt đường viền nét liền màu xanh dương dày 3px cho tất cả các phần tử có class là `highlight`? A. .highlight { border: 3px solid blue; } B. #highlight { border: 3px solid blue; } C. highlight { border: 3px solid blue; } D. *[class=highlight] { border: 3px solid blue; } Câu 21: Khi nào hiện tượng "margin collapsing" (gộp lề) KHÔNG xảy ra? A. Giữa lề trên của phần tử đầu tiên và lề dưới của phần tử thứ hai liền kề. B. Giữa lề trên của phần tử cha và lề trên của phần tử con đầu tiên (nếu không có border/padding/inline content giữa chúng). C. Giữa lề phải của phần tử đầu tiên và lề trái của phần tử thứ hai liền kề. D. Giữa lề dưới của phần tử cha và lề dưới của phần tử con cuối cùng (nếu không có border/padding/inline content giữa chúng). Câu 22: Bạn muốn tạo một khoảng trống 10px xung quanh một hình ảnh, nằm ngoài đường viền của hình ảnh đó và đẩy các phần tử khác ra xa. Thuộc tính nào trong Box Model bạn sẽ sử dụng? A. padding B. margin C. border D. outline Câu 23: Nếu một phần tử có cả `padding` và `border`, `padding` được đặt ở vị trí nào so với `border`? A. Bên trong `border` (giữa nội dung và `border`). B. Bên ngoài `border` (giữa `border` và `margin`). C. Chồng lấn lên `border`. D. Vị trí phụ thuộc vào giá trị của `box-sizing`. Câu 24: Bạn có một danh sách các mục (ví dụ: các sản phẩm) mà bạn muốn hiển thị trên cùng một dòng, nhưng mỗi mục cần có kích thước (chiều rộng, chiều cao) cố định và khoảng cách giữa chúng. Loại `display` nào phù hợp nhất cho các mục này? A. display: inline; B. display: block; C. display: inline-block; D. display: flex; Câu 25: Một `div` có CSS: `width: 150px; padding: 20px; border: 3px solid black;`. Nếu `box-sizing: content-box;`, chiều rộng thực tế của phần tử bao gồm padding và border là bao nhiêu? A. 150px B. 170px C. 173px D. 196px Câu 26: Vẫn với `div` ở Câu 25 (`width: 150px; padding: 20px; border: 3px solid black;`), nhưng bây giờ có thêm `box-sizing: border-box;`. Chiều rộng thực tế của phần tử bao gồm padding và border là bao nhiêu? A. 150px B. 170px C. 173px D. 196px Câu 27: Tại sao việc thiết lập thuộc tính `height` cho một phần tử có `display: inline;` thường không có tác dụng? A. Vì phần tử inline luôn có chiều cao bằng 0. B. Vì chiều cao của phần tử inline luôn được xác định bởi chiều cao dòng (line-height). C. Vì phần tử inline được đặt theo dòng chảy của văn bản và chiều cao của nó được xác định bởi nội dung và thuộc tính `line-height` của dòng chứa nó. D. Vì phần tử inline chỉ nhận giá trị chiều cao khi có thuộc tính `vertical-align` được thiết lập. Câu 28: Để loại bỏ khoảng lề mặc định (margin) mà trình duyệt thường thêm vào phần tử `` của trang, bạn có thể sử dụng đoạn CSS nào? A. * { margin: 0; } B. body { margin: 0; } C. html, body { margin: 0; } D. body { margin: none; } Câu 29: Một phần tử có class `box` được định dạng bởi hai luật CSS sau: `.box { border: 1px solid red; }` và `.box { border-bottom: 2px dashed blue; }`. Đường viền phía dưới của phần tử này sẽ trông như thế nào? A. Nét liền, dày 1px, màu đỏ. B. Nét liền, dày 2px, màu xanh dương. C. Nét đứt, dày 1px, màu đỏ. D. Nét đứt, dày 2px, màu xanh dương. Câu 30: Bạn muốn một hình ảnh có đường viền nét chấm (dotted) màu xanh lá cây dày 4px chỉ ở phía bên phải. Đoạn CSS nào sau đây áp dụng đúng định dạng này cho thẻ ``? A. img { border-right: 4px solid green; } B. img { border: 4px dotted green right; } C. img { border-right: 4px dotted green; } D. img { border-style: dotted; border-color: green; border-width: 4px; border-side: right; } 1 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 1: Một phần tử HTML được định dạng với CSS sau: `div { width: 200px; padding: 10px; border: 5px solid black; margin: 15px; }`. Nếu `box-sizing` mặc định là `content-box`, tổng chiều rộng mà phần tử này chiếm trên trang (bao gồm nội dung, padding, border và margin) là bao nhiêu? 220px 230px 240px 250px 2 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 2: Bạn có hai thẻ `div` liền kề nhau trong HTML. Mặc định, chúng sẽ hiển thị như thế nào trên trang web? Mỗi thẻ `div` sẽ nằm trên một dòng riêng biệt. Hai thẻ `div` sẽ nằm cạnh nhau trên cùng một dòng. Thẻ `div` thứ hai sẽ nằm bên trong thẻ `div` thứ nhất. Trình duyệt sẽ báo lỗi định dạng. 3 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 3: Để thêm một đường viền nét đứt màu xanh dày 2px chỉ ở phía dưới của một đoạn văn bản (` `), thuộc tính CSS nào sau đây là phù hợp nhất? border-bottom: 2px solid blue; border: 2px dashed blue; border-bottom: 2px dashed blue; border-style: dashed; border-color: blue; border-width: 2px; 4 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 4: Sự khác biệt chính giữa `margin` và `padding` trong CSS là gì? `margin` tạo khoảng trống bên trong phần tử, còn `padding` tạo khoảng trống bên ngoài. `margin` tạo khoảng trống bên ngoài đường viền phần tử, còn `padding` tạo khoảng trống bên trong đường viền (giữa nội dung và đường viền). Cả hai đều tạo khoảng trống bên ngoài phần tử nhưng `padding` có thể âm. Cả hai đều tạo khoảng trống bên trong phần tử nhưng `margin` có thể có màu nền. 5 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 5: Một `div` có chiều rộng cố định và chứa một đoạn văn bản rất dài. Để thêm thanh cuộn (scrollbar) nếu nội dung vượt quá kích thước của `div`, bạn nên sử dụng thuộc tính CSS nào? overflow: auto; display: scroll; scrollbar: visible; content-overflow: scroll; 6 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 6: Hiện tượng 'margin collapsing' (gộp lề) trong CSS xảy ra khi nào? Khi lề trái và lề phải của hai phần tử liền kề gặp nhau. Khi lề trên của phần tử con gặp lề dưới của phần tử cha. Khi lề trên và lề dưới của hai phần tử khối liền kề (theo chiều dọc) gặp nhau. Khi lề trên của phần tử gặp padding dưới của chính nó. 7 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 7: Mặc định, thẻ `` là một phần tử nội tuyến (`inline`). Làm thế nào để biến thẻ `` này thành phần tử khối (`block`) để có thể thiết lập chiều rộng và chiều cao cho nó? Sử dụng thuộc tính `position: block;` Sử dụng thuộc tính `display: block;` Sử dụng thuộc tính `type: block;` Không thể thay đổi loại hiển thị của phần tử `<span>`. 8 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 8: Thuộc tính `display: none;` và `visibility: hidden;` đều làm ẩn phần tử trên trang web. Sự khác biệt chính giữa chúng là gì? `display: none;` chỉ ẩn nội dung, còn `visibility: hidden;` ẩn cả nội dung và đường viền. `display: none;` ẩn phần tử nhưng vẫn giữ chỗ trống trên layout, còn `visibility: hidden;` không giữ chỗ trống. `visibility: hidden;` chỉ ẩn nội dung, còn `display: none;` ẩn cả nội dung và đường viền. `display: none;` loại bỏ phần tử hoàn toàn khỏi luồng layout, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian mà nó chiếm dụng trên layout. 9 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 9: Bạn có một `div` cha và một `div` con bên trong. `div` cha có `padding-top: 20px;` và `div` con có `margin-top: 15px;`. Khoảng cách thực tế giữa đường viền trên của `div` cha và đường viền trên của `div` con là bao nhiêu? 35px (20px + 15px) 20px (do margin collapsing) 15px (do margin collapsing) Khoảng cách không xác định. 10 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 10: Một nút bấm (``) cần có khoảng trống giữa văn bản bên trong và đường viền của nút. Thuộc tính CSS nào dùng để kiểm soát khoảng trống này? margin border-spacing padding text-indent 11 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 11: Một phần tử có `width: 100px`, `padding: 10px`, `border: 2px solid`. Nếu bạn thay đổi `box-sizing` từ `content-box` sang `border-box`, điều gì xảy ra với kích thước hiển thị của phần tử (không bao gồm margin)? Tổng chiều rộng tăng thêm 24px. Tổng chiều rộng vẫn là 100px. Tổng chiều rộng giảm đi 12px. Tổng chiều rộng trở thành 124px. 12 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 12: Để căn giữa một phần tử khối (`div`) theo chiều ngang trong phần tử cha của nó, bạn có thể sử dụng thuộc tính `margin` với giá trị nào? margin: 0 auto; margin: center; margin-align: center; text-align: center; 13 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 13: Bạn có một phần tử ` `. Trong CSS, có hai luật định dạng: `#myDiv { color: red; }` và `.myClass { color: blue; }`. Màu chữ cuối cùng được áp dụng cho phần tử này là gì? Đỏ (red) Xanh dương (blue) Màu mặc định của trình duyệt Cả hai màu được áp dụng cùng lúc. 14 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 14: Bạn muốn tất cả các phần tử `` trên trang đều có một đường viền nét liền màu xám dày 1px. Đoạn CSS nào sau đây thực hiện điều này một cách hiệu quả? image { border: 1px solid gray; } .img { border: 1px solid gray; } #img { border: 1px solid gray; } img { border: 1px solid gray; } 15 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 15: Một phần tử có HTML là ` `. CSS có các luật sau: `.box { padding: 10px; }` và `.large { margin: 20px; }`. Phần tử này sẽ có các thuộc tính định dạng nào được áp dụng? Chỉ có padding: 10px; Chỉ có margin: 20px; Có cả padding: 10px; và margin: 20px; Không có thuộc tính nào được áp dụng do xung đột. 16 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 16: Khi thiết kế một form nhập liệu, khoảng trống giữa nội dung văn bản người dùng nhập và đường viền của ô nhập liệu được kiểm soát bởi thuộc tính nào trong Box Model? padding margin border-spacing outline 17 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 17: Điều gì xảy ra nếu bạn cố gắng thiết lập thuộc tính `width` và `height` cho một phần tử có `display: inline;`? Thuộc tính `width` và `height` sẽ được áp dụng bình thường. Thuộc tính `width` và `height` sẽ bị bỏ qua, không có tác dụng. Phần tử sẽ tự động chuyển thành `display: block;`. Chỉ thuộc tính `width` được áp dụng, `height` bị bỏ qua. 18 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 18: Để đặt lề trên (margin-top) của một phần tử là 20px, lề phải là 10px, lề dưới là 5px và lề trái là 0px, cách viết tắt nào sau đây là đúng? margin: 20px 10px 5px 0px top right bottom left; margin: 20px 0px 5px 10px; margin: 20px 5px 10px 0px; margin: 20px 10px 5px 0px; 19 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 19: Bạn có một thẻ `` (mặc định `inline`) và một thẻ ` ` (mặc định `block`) đặt cạnh nhau trong mã HTML. Khi hiển thị trên trình duyệt, chúng sẽ xuất hiện như thế nào? Cả hai sẽ nằm trên cùng một dòng. Thẻ `<img>` sẽ nằm trên một dòng, và thẻ `<p>` sẽ bắt đầu một dòng mới. Thẻ `<p>` sẽ nằm trên một dòng, và thẻ `<img>` sẽ bắt đầu một dòng mới. Thẻ `<img>` sẽ nằm bên trong thẻ `<p>`. 20 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 20: Đoạn CSS nào sau đây sẽ đặt đường viền nét liền màu xanh dương dày 3px cho tất cả các phần tử có class là `highlight`? .highlight { border: 3px solid blue; } #highlight { border: 3px solid blue; } highlight { border: 3px solid blue; } *[class=highlight] { border: 3px solid blue; } 21 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 21: Khi nào hiện tượng 'margin collapsing' (gộp lề) KHÔNG xảy ra? Giữa lề trên của phần tử đầu tiên và lề dưới của phần tử thứ hai liền kề. Giữa lề trên của phần tử cha và lề trên của phần tử con đầu tiên (nếu không có border/padding/inline content giữa chúng). Giữa lề phải của phần tử đầu tiên và lề trái của phần tử thứ hai liền kề. Giữa lề dưới của phần tử cha và lề dưới của phần tử con cuối cùng (nếu không có border/padding/inline content giữa chúng). 22 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 22: Bạn muốn tạo một khoảng trống 10px xung quanh một hình ảnh, nằm *ngoài* đường viền của hình ảnh đó và đẩy các phần tử khác ra xa. Thuộc tính nào trong Box Model bạn sẽ sử dụng? padding margin border outline 23 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 23: Nếu một phần tử có cả `padding` và `border`, `padding` được đặt ở vị trí nào so với `border`? Bên trong `border` (giữa nội dung và `border`). Bên ngoài `border` (giữa `border` và `margin`). Chồng lấn lên `border`. Vị trí phụ thuộc vào giá trị của `box-sizing`. 24 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 24: Bạn có một danh sách các mục (ví dụ: các sản phẩm) mà bạn muốn hiển thị trên cùng một dòng, nhưng mỗi mục cần có kích thước (chiều rộng, chiều cao) cố định và khoảng cách giữa chúng. Loại `display` nào phù hợp nhất cho các mục này? display: inline; display: block; display: inline-block; display: flex; 25 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 25: Một `div` có CSS: `width: 150px; padding: 20px; border: 3px solid black;`. Nếu `box-sizing: content-box;`, chiều rộng thực tế của phần tử bao gồm padding và border là bao nhiêu? 150px 170px 173px 196px 26 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 26: Vẫn với `div` ở Câu 25 (`width: 150px; padding: 20px; border: 3px solid black;`), nhưng bây giờ có thêm `box-sizing: border-box;`. Chiều rộng thực tế của phần tử bao gồm padding và border là bao nhiêu? 150px 170px 173px 196px 27 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 27: Tại sao việc thiết lập thuộc tính `height` cho một phần tử có `display: inline;` thường không có tác dụng? Vì phần tử inline luôn có chiều cao bằng 0. Vì chiều cao của phần tử inline luôn được xác định bởi chiều cao dòng (line-height). Vì phần tử inline được đặt theo dòng chảy của văn bản và chiều cao của nó được xác định bởi nội dung và thuộc tính `line-height` của dòng chứa nó. Vì phần tử inline chỉ nhận giá trị chiều cao khi có thuộc tính `vertical-align` được thiết lập. 28 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 28: Để loại bỏ khoảng lề mặc định (margin) mà trình duyệt thường thêm vào phần tử `` của trang, bạn có thể sử dụng đoạn CSS nào? * { margin: 0; } body { margin: 0; } html, body { margin: 0; } body { margin: none; } 29 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 29: Một phần tử có class `box` được định dạng bởi hai luật CSS sau: `.box { border: 1px solid red; }` và `.box { border-bottom: 2px dashed blue; }`. Đường viền phía dưới của phần tử này sẽ trông như thế nào? Nét liền, dày 1px, màu đỏ. Nét liền, dày 2px, màu xanh dương. Nét đứt, dày 1px, màu đỏ. Nét đứt, dày 2px, màu xanh dương. 30 / 30 Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung Tags: Bộ đề 10 Câu 30: Bạn muốn một hình ảnh có đường viền nét chấm (dotted) màu xanh lá cây dày 4px chỉ ở phía bên phải. Đoạn CSS nào sau đây áp dụng đúng định dạng này cho thẻ ``? img { border-right: 4px solid green; } img { border: 4px dotted green right; } img { border-right: 4px dotted green; } img { border-style: dotted; border-color: green; border-width: 4px; border-side: right; } Xem kết quả Bạn ơi!!! Để xem được kết quả bạn vui lòng làm nhiệm vụ nhỏ xíu này nha LƯU Ý: Không sử dụng VPN hoặc 1.1.1.1 khi vượt link Nhận kết quả Xảy ra lỗi Bước 1: Mở tab mới, truy cập Google.com Bước 2: Tìm kiếm từ khóa: vận chuyển văn phòng giá rẻ Đổi nhiệm vụ Bước 3: Trong kết quả tìm kiếm Google, hãy tìm website giống dưới hình: (Nếu trang 1 không có hãy tìm ở trang 2, 3, 4... nhé ) Bước 4: Cuộn xuống cuối bài viết rồi bấm vào nút GIỐNG HÌNH DƯỚI và chờ 1 lát để lấy mã: By Wordpress Quiz plugin Đề trắc nghiệm liên quan: 15+ Đề Trắc nghiệm Tin học 12 Kết nối tri thức Bài 11: Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web 15+ Đề Trắc nghiệm Tin học 12 Kết nối tri thức Bài 27: Máy tính và Khoa học dữ liệu 15+ Đề Trắc nghiệm Tin học 12 Kết nối tri thức Bài 8: Định dạng văn bản 15+ Đề Trắc nghiệm Tin học 12 Kết nối tri thức Bài 27: Biểu mẫu trên trang web 15+ Đề Trắc nghiệm Tin học 12 Kết nối tri thức Bài 22: Thực hành kết nối các thiết bị số Tìm kiếm cho: