Đề Trắc nghiệm Tin học 12 – Bài 16: Định dạng khung (Kết Nối Tri Thức)

Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào tạo ra khoảng trống bên trong đường viền (border) của một phần tử và giữa đường viền với nội dung?

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

Câu 2: Bạn muốn thiết lập một kiểu định dạng chung (ví dụ: màu nền, font chữ) cho nhiều đoạn văn bản và một số hình ảnh trên trang web của mình, nhưng không phải áp dụng cho tất cả các đoạn văn bản hoặc hình ảnh. Bộ chọn CSS nào phù hợp nhất để sử dụng trong trường hợp này?

• A. Bộ chọn ID (#idname)
• B. Bộ chọn lớp (Class Selector - .classname)
• C. Bộ chọn phần tử (Element Selector - tagname)
• D. Bộ chọn thuộc tính ([attribute=value])

Câu 3: Cho đoạn mã HTML sau:

Đây là một đoạn văn bản.

Câu 4: Thuộc tính CSS nào khi áp dụng cho một phần tử sẽ khiến nó hoàn toàn không hiển thị trên trang web và cũng không chiếm bất kỳ không gian nào trong bố cục?

• A. display: none;
• B. visibility: hidden;
• C. opacity: 0;
• D. height: 0; width: 0;

Câu 5: Bạn đang thiết kế một thanh điều hướng (navigation bar) và muốn các mục (list items - `

Câu 6: Thành phần nào trong mô hình hộp (Box Model) tạo ra khoảng trống bên ngoài đường viền (border) của một phần tử, ngăn cách nó với các phần tử lân cận?

• A. Margin
• B. Padding
• C. Content
• D. Outline

Câu 7: Đặc điểm nào sau đây là đúng đối với phần tử khối (block-level element) mặc định trong HTML?

• A. Không thể thiết lập chiều rộng và chiều cao.
• B. Nằm cạnh các phần tử khác trên cùng một dòng nếu có đủ không gian.
• 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. Chỉ chiếm không gian vừa đủ cho nội dung bên trong.

Câu 8: Bạn có một phần tử `div` và muốn nó có một đường viền màu xanh dày 2 pixel dạng nét liền. Thuộc tính CSS nào cần sử dụng?

• A. outline: 2px solid blue;
• B. border: 2px solid blue;
• C. border-style: solid; border-width: 2px; border-color: blue;
• D. border-radius: 2px; border-color: blue;

Câu 9: Sự khác biệt chính giữa phần tử khối (block) và phần tử nội tuyến (inline) liên quan đến khả năng thiết lập kích thước (width, height) là gì?

• A. Phần tử khối không thể thiết lập width/height, còn phần tử nội tuyến thì có thể.
• B. Cả hai loại phần tử đều có thể thiết lập width/height đầy đủ.
• C. Phần tử khối có thể thiết lập width/height, còn phần tử nội tuyến thì không hoặc bị hạn chế.
• D. Phần tử nội tuyến có thể thiết lập width/height, còn phần tử khối thì không.

Câu 10: Trong HTML, để tạo một bảng dữ liệu cơ bản, bạn cần sử dụng thẻ đóng mở nào làm thẻ gốc chứa toàn bộ cấu trúc bảng?

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

  Câu 11: Trong một bảng HTML, thẻ nào được sử dụng để định nghĩa một hàng (row) trong bảng?

  • A.
  D.
  
  D.
  
  D.

  Câu 14: Bạn có một phần tử HTML và muốn áp dụng đồng thời hai bộ quy tắc CSS khác nhau được định nghĩa bởi hai class là `highlight` và `bordered`. Cú pháp HTML nào sau đây là đúng để gán cả hai class này cho phần tử?

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

  Câu 15: Khi sử dụng bộ chọn ID trong CSS (ví dụ: `#myElement`), điều nào sau đây là một quy tắc quan trọng cần tuân thủ?

  • A. Mỗi giá trị ID chỉ được sử dụng cho duy nhất một phần tử trên cùng một trang.
  • B. Một phần tử có thể có nhiều ID khác nhau.
  • C. Nhiều phần tử khác nhau có thể có cùng một giá trị ID.
  • D. ID chỉ có thể áp dụng cho các phần tử khối (block elements).

  Câu 16: Bạn thiết kế một khối nội dung (ví dụ: một thẻ `div`) và muốn tạo ra một khoảng đệm 15 pixel ở phía trên và phía dưới nội dung bên trong, nhưng không có khoảng đệm ở hai bên trái và phải. Thuộc tính CSS nào phù hợp và cú pháp nào là đúng?

  • A. padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px;
  • B. padding: 15px;
  • C. padding: 0 15px;
  • D. padding: 15px 0;

  Câu 17: Bạn có hai khối nội dung (ví dụ: hai thẻ `div` liền kề nhau) và muốn tạo ra một khoảng cách 20 pixel giữa chúng theo chiều ngang. Thuộc tính CSS nào phù hợp để thêm khoảng trống ở phía bên phải của khối thứ nhất hoặc phía bên trái của khối thứ hai?

  • A. Margin
  • B. Padding
  • C. Border
  • D. Outline

  Câu 18: Khi làm việc với bảng HTML, thẻ `

  Câu 12: Trong một bảng HTML, thẻ nào được sử dụng để định nghĩa một ô dữ liệu thông thường (data cell) trong một hàng?

  • A.

  Câu 13: Trong một bảng HTML, thẻ nào được sử dụng để định nghĩa một ô tiêu đề (header cell), thường được trình duyệt hiển thị bằng chữ đậm và căn giữa?

  • A.

  ` được sử dụng với mục đích gì?

  • A. Định nghĩa ô dữ liệu.
  • B. Định nghĩa hàng tiêu đề.
  • C. Cung cấp tiêu đề hoặc chú thích cho bảng.
  • D. Định nghĩa một nhóm cột.

  Câu 19: Bạn có một phần tử `` (là phần tử nội tuyến mặc định) và áp dụng CSS `span { width: 200px; height: 100px; background-color: yellow; }`. Khi hiển thị, điều gì sẽ xảy ra với `width` và `height` đã thiết lập?

  • A. Các giá trị width và height sẽ bị bỏ qua, phần tử chỉ chiếm không gian vừa đủ nội dung.
  • B. Phần tử sẽ có chiều rộng 200px và chiều cao 100px như mong muốn.
  • C. Chỉ thuộc tính width được áp dụng, height bị bỏ qua.
  • D. Chỉ thuộc tính height được áp dụng, width bị bỏ qua.

  Câu 20: Để tạo một khoảng đệm 10 pixel cho tất cả bốn cạnh (trên, phải, dưới, trái) của một phần tử, cú pháp CSS viết tắt nào sau đây là đúng và hiệu quả nhất?

  • A. padding: 10px 10px 10px 10px;
  • B. padding: 10px;
  • C. padding-all: 10px;
  • D. padding: 10;

  Câu 21: Khi áp dụng thuộc tính `display: inline-block;` cho một phần tử, nó sẽ có những đặc điểm kết hợp nào?

  • A. Luôn bắt đầu trên dòng mới và không thể thiết lập width/height.
  • B. Nằm cạnh các phần tử khác trên cùng dòng nhưng không thể thiết lập width/height.
  • C. Nằm cạnh các phần tử khác trên cùng dòng VÀ có thể thiết lập width/height.
  • D. Luôn bắt đầu trên dòng mới và có thể thiết lập width/height.

  Câu 22: Bạn đang xem xét mã CSS sau cho một phần tử `div`: `div { margin: 10px 20px; }`. Điều này có ý nghĩa là gì về khoảng lề của phần tử `div`?

  • A. Lề trên, phải, dưới, trái đều là 10px.
  • B. Lề trên và dưới là 10px, lề trái và phải là 20px.
  • C. Lề trên và trái là 10px, lề dưới và phải là 20px.
  • D. Lề trên là 10px, lề phải là 20px, lề dưới và trái là 0px.

  Câu 23: Đặc điểm nào sau đây KHÔNG phải là đặc điểm mặc định của phần tử nội tuyến (inline element)?

  • A. Chỉ chiếm không gian vừa đủ cho nội dung.
  • B. Nằm cạnh các phần tử khác trên cùng một dòng.
  • C. Không thể thiết lập chiều rộng và chiều cao.
  • D. Luôn bắt đầu trên một dòng mới.

  Câu 24: Bạn muốn tạo một đường viền dạng nét đứt (dashed) xung quanh một hình ảnh. Thuộc tính nào của `border` cần được thiết lập giá trị `dashed`?

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

  Câu 25: Mô hình hộp (Box Model) trong CSS mô tả cấu trúc hình chữ nhật bao quanh mỗi phần tử HTML. Thứ tự các lớp từ trong ra ngoài là gì?

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

  Câu 26: Bạn có một danh sách các liên kết (`` - mặc định là phần tử nội tuyến). Bạn muốn thêm một khoảng đệm 5 pixel xung quanh văn bản của mỗi liên kết để khu vực nhấp chuột lớn hơn một chút. Thuộc tính nào của Box Model sẽ giúp bạn làm điều này?

  • A. Margin
  • B. Padding
  • C. Border
  • D. Outline

  Câu 27: Trong bảng HTML, bạn có thể gộp nhiều ô dữ liệu (

  B.	C.
  B.	C.
  B.	C.
  ) hoặc ô tiêu đề (	) thành một ô lớn hơn bằng cách sử dụng thuộc tính nào? A. merge-cells B. group C. combine D. colspan hoặc rowspan Câu 28: Giả sử bạn có một phần tử `div` và áp dụng CSS sau: `div { border: 1px solid black; padding: 10px; margin: 15px; }`. Nếu nội dung bên trong `div` có kích thước 50px x 50px, thì tổng kích thước thực tế mà phần tử `div` chiếm trên trang (bao gồm cả margin) là bao nhiêu? A. 102px x 102px B. 72px x 72px C. 70px x 70px D. 82px x 82px Câu 29: Thuộc tính nào trong CSS được sử dụng để thiết lập độ dày của đường viền (border)? A. border-style B. border-color C. border-width D. border-spacing Câu 30: Bạn muốn tạo một khoảng lề 5px ở bên trái, 10px ở bên phải, 15px ở phía trên và 20px ở phía dưới cho một phần tử. Cú pháp CSS viết tắt nào sau đây là đúng? A. margin: 5px 10px 15px 20px; B. margin: 15px 20px 5px 10px; C. margin: 15px 10px 20px 5px; D. margin: 15px 10px 20px 5px; 1 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào tạo ra khoảng trống bên trong đường viền (border) của một phần tử và giữa đường viền với nội dung? Margin Content Padding Border Câu hỏi kiểm tra kiến thức về các thành phần của mô hình hộp (Box Model) trong CSS. Padding là khoảng đệm nằm giữa đường viền (border) và nội dung (content) của phần tử, tạo ra khoảng trống bên trong. 2 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 2: Bạn muốn thiết lập một kiểu định dạng chung (ví dụ: màu nền, font chữ) cho nhiều đoạn văn bản và một số hình ảnh trên trang web của mình, nhưng không phải áp dụng cho tất cả các đoạn văn bản hoặc hình ảnh. Bộ chọn CSS nào phù hợp nhất để sử dụng trong trường hợp này? Bộ chọn ID (#idname) Bộ chọn lớp (Class Selector - .classname) Bộ chọn phần tử (Element Selector - tagname) Bộ chọn thuộc tính ([attribute=value]) Câu hỏi yêu cầu áp dụng kiến thức về các loại bộ chọn CSS. Bộ chọn class (`.classname`) được sử dụng để định dạng cho một nhóm các phần tử bất kỳ có cùng thuộc tính class, rất phù hợp khi muốn áp dụng cùng một kiểu cho nhiều phần tử khác nhau hoặc không phải tất cả các phần tử cùng loại. 3 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 3: Cho đoạn mã HTML sau: Đây là một đoạn văn bản. Đây là đoạn văn bản được định dạng inline. Khi hiển thị trên trình duyệt, hai đoạn văn bản này sẽ xuất hiện như thế nào? Cả hai đoạn văn bản sẽ nằm trên cùng một dòng. Đoạn văn bản thứ nhất sẽ nằm trên một dòng, đoạn thứ hai sẽ bắt đầu trên dòng mới và kéo dài hết chiều rộng. Đoạn văn bản thứ nhất sẽ nằm trên một dòng, đoạn thứ hai sẽ bắt đầu trên dòng mới và chỉ chiếm không gian vừa đủ nội dung. Đoạn văn bản thứ nhất sẽ nằm trên một dòng riêng, đoạn văn bản thứ hai sẽ nằm trên dòng tiếp theo và chỉ chiếm không gian vừa đủ nội dung. Câu hỏi yêu cầu phân tích ảnh hưởng của thuộc tính `display` lên các phần tử HTML. Thẻ ` ` mặc định là phần tử khối (block), sẽ bắt đầu trên một dòng mới. Đoạn văn bản thứ hai được đặt `display: inline;`, chuyển nó thành phần tử nội tuyến. Phần tử nội tuyến không ngắt dòng. Do đó, đoạn thứ nhất sẽ đứng một mình trên một dòng, còn đoạn thứ hai sẽ nằm trên dòng tiếp theo và chỉ chiếm không gian cần thiết. 4 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 4: Thuộc tính CSS nào khi áp dụng cho một phần tử sẽ khiến nó hoàn toàn không hiển thị trên trang web và cũng không chiếm bất kỳ không gian nào trong bố cục? display: none; visibility: hidden; opacity: 0; height: 0; width: 0; Câu hỏi kiểm tra kiến thức về thuộc tính `display`. Giá trị `none` của thuộc tính `display` làm cho phần tử bị ẩn hoàn toàn và loại bỏ nó khỏi luồng bố cục, không chiếm không gian. 5 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 5: Bạn đang thiết kế một thanh điều hướng (navigation bar) và muốn các mục (list items - ` `) nằm cạnh nhau trên cùng một dòng thay vì mỗi mục một dòng như mặc định của thẻ ` `. Bạn nên sử dụng thuộc tính `display` với giá trị nào cho các thẻ ` `? display: block; display: flex; display: grid; display: inline-block; Câu hỏi là một bài toán ứng dụng về bố cục sử dụng thuộc tính `display`. Thẻ ` ` mặc định là phần tử khối. Để chúng nằm cạnh nhau trên cùng một dòng, ta cần thay đổi cách hiển thị của chúng thành nội tuyến (`inline`) hoặc nội tuyến-khối (`inline-block`). `inline-block` thường được ưu tiên hơn cho các mục menu vì nó cho phép thiết lập chiều rộng, chiều cao và margin/padding dọc. 6 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 6: Thành phần nào trong mô hình hộp (Box Model) tạo ra khoảng trống bên ngoài đường viền (border) của một phần tử, ngăn cách nó với các phần tử lân cận? Margin Padding Content Outline Câu hỏi kiểm tra kiến thức về các thành phần của mô hình hộp (Box Model). Margin là khoảng lề nằm ngoài đường viền (border) của phần tử, tạo ra khoảng trống giữa phần tử đó với các phần tử xung quanh. 7 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 7: Đặc điểm nào sau đây là đúng đối với phần tử khối (block-level element) mặc định trong HTML? Không thể thiết lập chiều rộng và chiều cao. Nằm cạnh các phần tử khác trên cùng một dòng nếu có đủ không gian. 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. Chỉ chiếm không gian vừa đủ cho nội dung bên trong. Câu hỏi kiểm tra sự hiểu biết về đặc điểm của phần tử khối. Phần tử khối mặc định luôn bắt đầu trên một dòng mới và mở rộng theo chiều ngang để chiếm toàn bộ chiều rộng khả dụng của phần tử cha (trừ đi lề, đệm, viền). 8 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 8: Bạn có một phần tử `div` và muốn nó có một đường viền màu xanh dày 2 pixel dạng nét liền. Thuộc tính CSS nào cần sử dụng? outline: 2px solid blue; border: 2px solid blue; border-style: solid; border-width: 2px; border-color: blue; border-radius: 2px; border-color: blue; Câu hỏi yêu cầu áp dụng thuộc tính `border` trong CSS để thiết lập đường viền cho phần tử. `border` là thuộc tính viết tắt cho `border-width`, `border-style`, và `border-color`. Cú pháp `border: 2px solid blue;` thiết lập độ dày 2px, kiểu nét liền và màu xanh. 9 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 9: Sự khác biệt chính giữa phần tử khối (block) và phần tử nội tuyến (inline) liên quan đến khả năng thiết lập kích thước (width, height) là gì? Phần tử khối không thể thiết lập width/height, còn phần tử nội tuyến thì có thể. Cả hai loại phần tử đều có thể thiết lập width/height đầy đủ. Phần tử khối có thể thiết lập width/height, còn phần tử nội tuyến thì không hoặc bị hạn chế. Phần tử nội tuyến có thể thiết lập width/height, còn phần tử khối thì không. Câu hỏi yêu cầu phân tích sự khác biệt về khả năng định dạng kích thước giữa hai loại phần tử. Phần tử khối có thể thiết lập rõ ràng chiều rộng (`width`) và chiều cao (`height`), trong khi các giá trị này thường bị bỏ qua hoặc chỉ áp dụng hạn chế cho phần tử nội tuyến thuần túy (`display: inline`). 10 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 10: Trong HTML, để tạo một bảng dữ liệu cơ bản, bạn cần sử dụng thẻ đóng mở nào làm thẻ gốc chứa toàn bộ cấu trúc bảng? <div> <section> <grid> <table> Câu hỏi kiểm tra kiến thức cơ bản về cấu trúc bảng HTML. Thẻ ` ` là thẻ gốc được sử dụng để định nghĩa một bảng trong HTML. 11 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 11: Trong một bảng HTML, thẻ nào được sử dụng để định nghĩa một hàng (row) trong bảng? <td> <th> <tr> <caption> Câu hỏi kiểm tra kiến thức về cấu trúc bảng HTML. Thẻ ` ` (table row) được sử dụng để định nghĩa một hàng trong bảng. 12 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 12: Trong một bảng HTML, thẻ nào được sử dụng để định nghĩa một ô dữ liệu thông thường (data cell) trong một hàng? <td> <th> <tr> <caption> Câu hỏi kiểm tra kiến thức về cấu trúc bảng HTML. Thẻ ` ` (table data) được sử dụng để định nghĩa một ô dữ liệu thông thường trong một hàng của bảng. 13 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 13: Trong một bảng HTML, thẻ nào được sử dụng để định nghĩa một ô tiêu đề (header cell), thường được trình duyệt hiển thị bằng chữ đậm và căn giữa? <td> <th> <tr> <head> Câu hỏi kiểm tra kiến thức về cấu trúc bảng HTML. Thẻ ` ` (table header) được sử dụng để định nghĩa một ô tiêu đề trong bảng, thường dùng cho tiêu đề cột hoặc hàng. 14 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 14: Bạn có một phần tử HTML và muốn áp dụng đồng thời hai bộ quy tắc CSS khác nhau được định nghĩa bởi hai class là `highlight` và `bordered`. Cú pháp HTML nào sau đây là đúng để gán cả hai class này cho phần tử? <div class="highlight, bordered">...</div> <div class="highlightbordered">...</div> <div class="highlight bordered">...</div> <div class="highlight" class="bordered">...</div> Câu hỏi kiểm tra cách gán nhiều class cho một phần tử HTML. Để một phần tử thuộc nhiều class, bạn liệt kê tên các class trong thuộc tính `class`, cách nhau bằng dấu cách. 15 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 15: Khi sử dụng bộ chọn ID trong CSS (ví dụ: `#myElement`), điều nào sau đây là một quy tắc quan trọng cần tuân thủ? Mỗi giá trị ID chỉ được sử dụng cho duy nhất một phần tử trên cùng một trang. Một phần tử có thể có nhiều ID khác nhau. Nhiều phần tử khác nhau có thể có cùng một giá trị ID. ID chỉ có thể áp dụng cho các phần tử khối (block elements). Câu hỏi kiểm tra quy tắc sử dụng ID trong HTML/CSS. Thuộc tính `id` của một phần tử phải là duy nhất trong toàn bộ tài liệu HTML. Mỗi ID chỉ nên được sử dụng cho một phần tử duy nhất. 16 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 16: Bạn thiết kế một khối nội dung (ví dụ: một thẻ `div`) và muốn tạo ra một khoảng đệm 15 pixel ở phía trên và phía dưới nội dung bên trong, nhưng không có khoảng đệm ở hai bên trái và phải. Thuộc tính CSS nào phù hợp và cú pháp nào là đúng? padding-top: 15px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding: 15px; padding: 0 15px; padding: 15px 0; Câu hỏi yêu cầu áp dụng thuộc tính `padding` với cú pháp viết tắt. Thuộc tính `padding: top right bottom left;` cho phép thiết lập đệm cho từng cạnh. Cú pháp `padding: 15px 0;` là viết tắt, thiết lập đệm trên và dưới là 15px, trái và phải là 0. 17 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 17: Bạn có hai khối nội dung (ví dụ: hai thẻ `div` liền kề nhau) và muốn tạo ra một khoảng cách 20 pixel giữa chúng theo chiều ngang. Thuộc tính CSS nào phù hợp để thêm khoảng trống ở phía bên phải của khối thứ nhất hoặc phía bên trái của khối thứ hai? Margin Padding Border Outline Câu hỏi yêu cầu áp dụng thuộc tính `margin` để tạo khoảng cách giữa các phần tử. Margin là khoảng lề bên ngoài đường viền. Để tạo khoảng cách ngang 20px giữa hai khối, có thể đặt `margin-right: 20px;` cho khối thứ nhất hoặc `margin-left: 20px;` cho khối thứ hai (hoặc cả hai). 18 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 18: Khi làm việc với bảng HTML, thẻ ` ` được sử dụng với mục đích gì? Định nghĩa ô dữ liệu. Định nghĩa hàng tiêu đề. Cung cấp tiêu đề hoặc chú thích cho bảng. Định nghĩa một nhóm cột. Câu hỏi kiểm tra chức năng của thẻ ` ` trong bảng HTML. Thẻ này được sử dụng để cung cấp một tiêu đề hoặc chú thích cho toàn bộ bảng, giúp người đọc hiểu nội dung của bảng là gì. 19 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 19: Bạn có một phần tử `` (là phần tử nội tuyến mặc định) và áp dụng CSS `span { width: 200px; height: 100px; background-color: yellow; }`. Khi hiển thị, điều gì sẽ xảy ra với `width` và `height` đã thiết lập? Các giá trị width và height sẽ bị bỏ qua, phần tử chỉ chiếm không gian vừa đủ nội dung. Phần tử sẽ có chiều rộng 200px và chiều cao 100px như mong muốn. Chỉ thuộc tính width được áp dụng, height bị bỏ qua. Chỉ thuộc tính height được áp dụng, width bị bỏ qua. Câu hỏi kiểm tra sự hiểu biết về cách các thuộc tính kích thước áp dụng cho phần tử nội tuyến. Theo mặc định, phần tử nội tuyến thuần túy (`display: inline`) không chấp nhận các thuộc tính `width` và `height`. Chúng sẽ bị bỏ qua. 20 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 20: Để tạo một khoảng đệm 10 pixel cho tất cả bốn cạnh (trên, phải, dưới, trái) của một phần tử, cú pháp CSS viết tắt nào sau đây là đúng và hiệu quả nhất? padding: 10px 10px 10px 10px; padding: 10px; padding-all: 10px; padding: 10; Câu hỏi kiểm tra cú pháp viết tắt của thuộc tính `padding`. Khi chỉ có một giá trị được cung cấp cho thuộc tính viết tắt `padding`, giá trị đó sẽ được áp dụng cho cả bốn cạnh (trên, phải, dưới, trái). 21 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 21: Khi áp dụng thuộc tính `display: inline-block;` cho một phần tử, nó sẽ có những đặc điểm kết hợp nào? Luôn bắt đầu trên dòng mới và không thể thiết lập width/height. Nằm cạnh các phần tử khác trên cùng dòng nhưng không thể thiết lập width/height. Nằm cạnh các phần tử khác trên cùng dòng VÀ có thể thiết lập width/height. Luôn bắt đầu trên dòng mới và có thể thiết lập width/height. Câu hỏi kiểm tra sự hiểu biết về thuộc tính `display: inline-block;`. Phần tử `inline-block` giống như `inline` ở chỗ nó nằm trên cùng một dòng với các phần tử khác. Tuy nhiên, nó giống như `block` ở chỗ bạn có thể thiết lập `width`, `height`, `margin` và `padding` cho nó một cách đầy đủ. 22 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 22: Bạn đang xem xét mã CSS sau cho một phần tử `div`: `div { margin: 10px 20px; }`. Điều này có ý nghĩa là gì về khoảng lề của phần tử `div`? Lề trên, phải, dưới, trái đều là 10px. Lề trên và dưới là 10px, lề trái và phải là 20px. Lề trên và trái là 10px, lề dưới và phải là 20px. Lề trên là 10px, lề phải là 20px, lề dưới và trái là 0px. Câu hỏi yêu cầu phân tích cú pháp viết tắt của thuộc tính `margin`. Khi có hai giá trị được cung cấp cho `margin` hoặc `padding`, giá trị thứ nhất áp dụng cho trên/dưới, và giá trị thứ hai áp dụng cho trái/phải. 23 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 23: Đặc điểm nào sau đây KHÔNG phải là đặc điểm mặc định của phần tử nội tuyến (inline element)? Chỉ chiếm không gian vừa đủ cho nội dung. Nằm cạnh các phần tử khác trên cùng một dòng. Không thể thiết lập chiều rộng và chiều cao. Luôn bắt đầu trên một dòng mới. Câu hỏi kiểm tra sự hiểu biết sâu hơn về phần tử nội tuyến. Phần tử nội tuyến mặc định nằm trên cùng dòng, chỉ chiếm không gian vừa đủ nội dung, và không thể thiết lập chiều rộng/chiều cao. Tuy nhiên, chúng vẫn có thể nhận margin/padding theo chiều ngang, nhưng margin/padding theo chiều dọc thường không ảnh hưởng đến bố cục của các phần tử khác trên cùng dòng. 24 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 24: Bạn muốn tạo một đường viền dạng nét đứt (dashed) xung quanh một hình ảnh. Thuộc tính nào của `border` cần được thiết lập giá trị `dashed`? border-width border-style border-color border-radius Câu hỏi kiểm tra thuộc tính `border-style`. Thuộc tính này định nghĩa kiểu của đường viền (solid, dashed, dotted, double, v.v.). 25 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 25: Mô hình hộp (Box Model) trong CSS mô tả cấu trúc hình chữ nhật bao quanh mỗi phần tử HTML. Thứ tự các lớp từ trong ra ngoài là gì? Content, Padding, Border, Margin Margin, Border, Padding, Content Content, Border, Padding, Margin Padding, Content, Border, Margin Câu hỏi yêu cầu phân tích cấu trúc lớp của Box Model. Từ trong ra ngoài, các lớp là: Nội dung (Content), Đệm (Padding), Đường viền (Border), Lề (Margin). 26 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 26: Bạn có một danh sách các liên kết (`` - mặc định là phần tử nội tuyến). Bạn muốn thêm một khoảng đệm 5 pixel xung quanh văn bản của mỗi liên kết để khu vực nhấp chuột lớn hơn một chút. Thuộc tính nào của Box Model sẽ giúp bạn làm điều này? Margin Padding Border Outline Câu hỏi yêu cầu áp dụng kiến thức Box Model vào phần tử nội tuyến. Padding tạo khoảng trống bên trong đường viền. Mặc dù phần tử nội tuyến có hạn chế với padding/margin dọc, padding ngang vẫn hoạt động và hiệu quả để tăng kích thước khu vực nhấp chuột xung quanh nội dung. 27 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 27: Trong bảng HTML, bạn có thể gộp nhiều ô dữ liệu ( ) hoặc ô tiêu đề ( ) thành một ô lớn hơn bằng cách sử dụng thuộc tính nào? merge-cells group combine colspan hoặc rowspan Câu hỏi kiểm tra thuộc tính gộp ô trong bảng HTML. Thuộc tính `colspan` được sử dụng để gộp các ô theo chiều ngang (gộp các cột), và `rowspan` được sử dụng để gộp các ô theo chiều dọc (gộp các hàng). 28 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 28: Giả sử bạn có một phần tử `div` và áp dụng CSS sau: `div { border: 1px solid black; padding: 10px; margin: 15px; }`. Nếu nội dung bên trong `div` có kích thước 50px x 50px, thì tổng kích thước thực tế mà phần tử `div` chiếm trên trang (bao gồm cả margin) là bao nhiêu? 102px x 102px 72px x 72px 70px x 70px 82px x 82px Câu hỏi yêu cầu tính toán kích thước tổng của phần tử dựa trên Box Model. Kích thước tổng = content + 2*padding + 2*border + 2*margin. Chiều ngang: 50px (content) + 2*10px (padding) + 2*1px (border) + 2*15px (margin) = 50 + 20 + 2 + 30 = 102px. Chiều dọc tương tự: 50px + 2*10px + 2*1px + 2*15px = 102px. Tổng kích thước bao gồm margin là 102px x 102px. 29 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 29: Thuộc tính nào trong CSS được sử dụng để thiết lập độ dày của đường viền (border)? border-style border-color border-width border-spacing Câu hỏi kiểm tra thuộc tính `border-width`. Thuộc tính này dùng để xác định độ dày của đường viền. 30 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 04 Câu 30: Bạn muốn tạo một khoảng lề 5px ở bên trái, 10px ở bên phải, 15px ở phía trên và 20px ở phía dưới cho một phần tử. Cú pháp CSS viết tắt nào sau đây là đúng? margin: 5px 10px 15px 20px; margin: 15px 20px 5px 10px; margin: 15px 10px 20px 5px; margin: 15px 10px 20px 5px; Câu hỏi kiểm tra cú pháp viết tắt của thuộc tính `margin` khi có bốn giá trị. Thứ tự của bốn giá trị là: trên, phải, dưới, trái (theo chiều kim đồng hồ). 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é!!! Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 05 Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 05 được xây dựng với nhiều câu hỏi chất lượng, sát với nội dung chương trình học, giúp bạn dễ dàng ôn tập và kiểm tra kiến thức hiệu quả. Hãy cùng bắt đầu làm bài tập trắc nghiệm ngay để nâng cao hiểu biết và chuẩn bị tốt cho kỳ thi sắp tới! Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào nằm ngoài cùng và tạo khoảng trống giữa các phần tử? A. Content B. Padding C. Border D. Margin Câu 2: Thuộc tính CSS nào được sử dụng để kiểm soát khoảng trống giữa nội dung của một phần tử và đường viền (border) của nó? A. margin B. padding C. border D. outline Câu 3: Phần tử khối (block-level element) trong HTML/CSS có đặc điểm hiển thị mặc định như thế nào? A. 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. B. Có thể chứa các phần tử khối khác nhưng không thể thiết lập chiều rộng và chiều cao. C. Bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng của phần tử chứa nó. D. Không hiển thị trên trang web trừ khi được thiết lập thuộc tính display cụ thể. Câu 4: Thuộc tính CSS `display: inline;` được sử dụng để làm gì? A. Hiển thị phần tử dưới dạng nội tuyến (inline), nằm trên cùng dòng và chỉ chiếm không gian vừa đủ nội dung. B. Hiển thị phần tử dưới dạng khối (block), bắt đầu trên dòng mới và chiếm toàn bộ chiều rộng. C. Ẩn hoàn toàn phần tử khỏi trang web và không chiếm bất kỳ không gian nào. D. Hiển thị phần tử dưới dạng khối nội tuyến (inline-block), nằm trên cùng dòng nhưng có thể thiết lập chiều rộng/chiều cao. Câu 5: Giả sử bạn có một phần tử ` ` và muốn thêm một đường viền nét đứt màu xanh dày 2px xung quanh nó. Đoạn CSS nào sau đây thực hiện điều đó? A. p { border-style: dashed; border-color: blue; border-width: 2px; } B. p { border: blue dashed 2px; } C. p { border: 2px dashed blue; } D. p { border: 2px blue dashed; } Câu 6: Bạn muốn tạo một khoảng trống 10px giữa đường viền của một phần tử và phần tử kế tiếp ở bên phải của nó. Thuộc tính nào sau đây bạn cần sử dụng? A. padding-right B. margin-right C. border-right D. space-right Câu 7: Cho đoạn mã HTML: ` Nội dung ` và đoạn CSS: `.box { width: 100px; padding: 10px; border: 1px solid black; }`. Nếu `box-sizing` mặc định là `content-box`, chiều rộng thực tế mà phần tử `.box` chiếm trên trang là bao nhiêu? A. 100px B. 110px C. 112px D. 122px Câu 8: Thuộc tính CSS nào khi áp dụng cho một phần tử sẽ làm cho nó không hiển thị trên trang web và cũng không chiếm bất kỳ không gian nào trong layout? A. display: none; B. visibility: hidden; C. opacity: 0; D. height: 0; width: 0; Câu 9: Để định dạng một phần tử HTML duy nhất với một kiểu dáng đặc biệt không áp dụng cho phần tử nào khác, bạn nên sử dụng bộ chọn CSS nào? A. Bộ chọn lớp (Class selector) B. Bộ chọn phần tử (Element selector) C. Bộ chọn ID (ID selector) D. Bộ chọn thuộc tính (Attribute selector) Câu 10: Cho đoạn mã HTML: ` Nội dung `. Nếu có các quy tắc CSS cho `#main`, `.container`, và `.highlight` đều định dạng thuộc tính `border-color`, quy tắc nào có mức ưu tiên cao nhất để xác định màu viền cuối cùng? A. Quy tắc cho `.container` B. Quy tắc cho `#main` C. Quy tắc cho `.highlight` D. Quy tắc được viết sau cùng trong file CSS Câu 11: Giá trị mặc định của thuộc tính `box-sizing` trong CSS là gì? A. content-box B. border-box C. padding-box D. margin-box Câu 12: Bạn muốn một phần tử ` ` có chiều rộng cố định 300px và được căn giữa theo chiều ngang trong phần tử chứa nó. Đoạn CSS nào sau đây giúp đạt được điều đó? A. div { width: 300px; text-align: center; } B. div { width: 300px; align: center; } C. div { width: 300px; margin-left: auto; margin-right: auto; } D. div { width: 300px; display: inline-block; margin: auto; } Câu 13: Khi sử dụng thuộc tính viết tắt cho `margin` như `margin: 10px 20px 5px 15px;`, các giá trị này lần lượt áp dụng cho các cạnh nào của phần tử? A. Trên, Dưới, Trái, Phải B. Trên, Trái, Dưới, Phải C. Trái, Phải, Trên, Dưới D. Trên, Phải, Dưới, Trái Câu 14: Phần tử nội tuyến (inline element) có thể thiết lập các thuộc tính nào sau đây liên quan đến kích thước và khoảng trống theo chiều dọc? A. margin-left, margin-right, padding-left, padding-right B. width, height C. margin-top, margin-bottom D. padding-top, padding-bottom Câu 15: Bạn có một danh sách các mục ` ` và muốn chúng hiển thị trên cùng một dòng nhưng vẫn có thể thiết lập chiều rộng và chiều cao cho mỗi mục. Giá trị `display` nào phù hợp nhất? A. block B. inline-block C. inline D. list-item Câu 16: Thuộc tính `border-style` có giá trị nào để hiển thị đường viền hai nét liền song song? A. solid B. dashed C. dotted D. double Câu 17: Khi thiết lập `padding: 15px 30px;`, giá trị 15px áp dụng cho cạnh nào và 30px áp dụng cho cạnh nào? A. Trên và Dưới là 15px, Trái và Phải là 30px. B. Trên và Trái là 15px, Dưới và Phải là 30px. C. Trên là 15px, Phải, Dưới, Trái là 30px. D. Trái và Phải là 15px, Trên và Dưới là 30px. Câu 18: Bạn đang thiết kế một trang web và muốn các hình ảnh hiển thị cạnh nhau trên cùng một dòng, mỗi hình ảnh có thể có chiều rộng và chiều cao riêng. Loại phần tử nào hoặc thiết lập `display` nào phù hợp nhất cho các hình ảnh này? A. Sử dụng `display: block;` B. Sử dụng `display: inline;` C. Sử dụng `display: inline-block;` D. Các hình ảnh mặc định đã là phần tử khối. Câu 19: Thuộc tính `border-radius` trong CSS được sử dụng để làm gì? A. Bo tròn các góc của phần tử. B. Tạo khoảng trống bên trong đường viền. C. Tạo khoảng trống bên ngoài đường viền. D. Thiết lập kiểu đường viền. Câu 20: Cho đoạn mã HTML: ` Nội dung `. CSS: `.outer { margin-bottom: 20px; } .inner { margin-top: 15px; }`. Hiện tượng "margin collapsing" (sụp đổ lề) có thể xảy ra ở đây không? Nếu có, khoảng trống thực tế giữa phần tử `.outer` và phần tử kế tiếp nó (nếu có) là bao nhiêu? A. Không, margin collapsing chỉ xảy ra giữa các phần tử ngang hàng. B. Có, khoảng trống thực tế là 35px (15px + 20px). C. Có, khoảng trống thực tế là 20px (max của 15px và 20px). D. Có, khoảng trống thực tế là 15px (min của 15px và 20px). Câu 21: Thuộc tính `outline` trong CSS khác gì so với `border`? A. Outline nằm bên trong padding, còn border nằm bên ngoài padding. B. Outline được vẽ bên ngoài đường viền và không chiếm không gian trong layout, còn border chiếm không gian. C. Outline chỉ áp dụng cho phần tử nội tuyến, còn border áp dụng cho phần tử khối. D. Outline có thể thiết lập màu sắc, còn border thì không. Câu 22: Để xóa đường viền mặc định của một phần tử (ví dụ: thẻ `` có thể có viền mặc định), bạn sử dụng thuộc tính `border` với giá trị nào? A. border: none; B. border-style: hidden; C. border-width: 0px; D. border: transparent; Câu 23: Bạn có một phần tử `` và áp dụng CSS `span { padding: 20px; margin: 20px; }`. Khi hiển thị, điều gì sẽ xảy ra với padding và margin theo chiều dọc (top/bottom)? A. Padding và margin 20px sẽ được thêm vào tất cả các cạnh, làm tăng khoảng cách xung quanh span. B. Padding top/bottom sẽ hoạt động bình thường, nhưng margin top/bottom sẽ bị bỏ qua. C. Margin top/bottom sẽ hoạt động bình thường, nhưng padding top/bottom sẽ bị bỏ qua. D. Padding và margin theo chiều ngang (left/right) sẽ hoạt động, nhưng padding và margin theo chiều dọc (top/bottom) sẽ không ảnh hưởng đến layout dòng. Câu 24: Khi sử dụng thuộc tính viết tắt `margin: 10px;`, giá trị này sẽ áp dụng cho những cạnh nào của phần tử? A. Chỉ cạnh trên. B. Cạnh trên và dưới. C. Tất cả bốn cạnh (Trên, Phải, Dưới, Trái). D. Cạnh trái và phải. Câu 25: Bạn muốn tạo một khối nội dung có đường viền 1px màu đen, khoảng cách 15px từ nội dung đến đường viền, và khoảng cách 20px từ đường viền đến các phần tử xung quanh. Đoạn CSS nào sau đây kết hợp các thuộc tính này một cách chính xác? A. padding: 15px; border: 1px solid black; margin: 20px; B. margin: 15px; border: 1px solid black; padding: 20px; C. border: 1px solid black; padding: 20px; margin: 15px; D. border: 1px solid black; margin: 15px; padding: 20px; Câu 26: Thuộc tính CSS nào kiểm soát màu sắc của đường viền? A. border-style B. border-width C. border-radius D. border-color Câu 27: Để áp dụng cùng một kiểu định dạng khung cho nhiều phần tử khác nhau trên trang web, bạn nên sử dụng bộ chọn nào? A. Bộ chọn ID B. Bộ chọn lớp (Class) C. Bộ chọn phần tử D. Bộ chọn pseudo-class Câu 28: Bạn có một phần tử ` ` với `width: 50%;` và `margin: auto;`. Điều gì xảy ra khi kích thước màn hình trình duyệt thay đổi? A. Phần tử sẽ giữ nguyên chiều rộng 50% và dịch chuyển sang trái hoặc phải. B. Phần tử sẽ giữ nguyên vị trí nhưng chiều rộng có thể thay đổi. C. Phần tử sẽ luôn chiếm 50% chiều rộng của phần tử chứa và luôn được căn giữa theo chiều ngang. D. Margin auto sẽ bị bỏ qua vì chiều rộng được đặt theo phần trăm. Câu 29: Thuộc tính `background-color` của một phần tử trong Box Model sẽ bao phủ những khu vực nào theo mặc định? A. Content và Padding B. Content, Padding và Border C. Content, Padding, Border và Margin D. Chỉ Content Câu 30: Nếu bạn muốn một phần tử ` ` có chiều rộng 250px, bao gồm cả padding và border vào trong chiều rộng đó, bạn nên sử dụng thuộc tính `box-sizing` với giá trị nào? A. content-box B. border-box C. padding-box D. margin-box 1 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào nằm ngoài cùng và tạo khoảng trống giữa các phần tử? Content Padding Border Margin Câu hỏi kiểm tra kiến thức về các thành phần của CSS Box Model. Margin là thành phần ngoài cùng, tạo khoảng trống bên ngoài đường viền (border) và giữa các phần tử. 2 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 2: Thuộc tính CSS nào được sử dụng để kiểm soát khoảng trống giữa nội dung của một phần tử và đường viền (border) của nó? margin padding border outline Câu hỏi kiểm tra kiến thức về chức năng của thuộc tính padding trong CSS Box Model. Padding là khoảng trống nằm giữa nội dung và đường viền. 3 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 3: Phần tử khối (block-level element) trong HTML/CSS có đặc điểm hiển thị mặc định như thế nào? 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. Có thể chứa các phần tử khối khác nhưng không thể thiết lập chiều rộng và chiều cao. Bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng của phần tử chứa nó. Không hiển thị trên trang web trừ khi được thiết lập thuộc tính display cụ thể. Câu hỏi kiểm tra đặc điểm cơ bản của phần tử khối. 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 khả dụng theo mặc định. 4 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 4: Thuộc tính CSS `display: inline;` được sử dụng để làm gì? Hiển thị phần tử dưới dạng nội tuyến (inline), nằm trên cùng dòng và chỉ chiếm không gian vừa đủ nội dung. Hiển thị phần tử dưới dạng khối (block), bắt đầu trên dòng mới và chiếm toàn bộ chiều rộng. Ẩn hoàn toàn phần tử khỏi trang web và không chiếm bất kỳ không gian nào. Hiển thị phần tử dưới dạng khối nội tuyến (inline-block), nằm trên cùng dòng nhưng có thể thiết lập chiều rộng/chiều cao. Câu hỏi kiểm tra tác dụng của giá trị `inline` cho thuộc tính `display`. Nó biến phần tử thành phần tử nội tuyến, nằm trên cùng dòng và chỉ chiếm không gian cần thiết. 5 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 5: Giả sử bạn có một phần tử ` ` và muốn thêm một đường viền nét đứt màu xanh dày 2px xung quanh nó. Đoạn CSS nào sau đây thực hiện điều đó? p { border-style: dashed; border-color: blue; border-width: 2px; } p { border: blue dashed 2px; } p { border: 2px dashed blue; } p { border: 2px blue dashed; } Câu hỏi yêu cầu áp dụng kiến thức về thuộc tính `border`. Cú pháp `border: width style color;` là cách viết tắt phổ biến. Nét đứt là `dashed`, màu xanh là `blue`, độ dày là `2px`. 6 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 6: Bạn muốn tạo một khoảng trống 10px giữa đường viền của một phần tử và phần tử kế tiếp ở bên phải của nó. Thuộc tính nào sau đây bạn cần sử dụng? padding-right margin-right border-right space-right Câu hỏi yêu cầu áp dụng kiến thức về khoảng trống giữa các phần tử. Margin tạo khoảng trống bên ngoài đường viền. Để tạo khoảng trống bên phải, sử dụng `margin-right`. 7 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 7: Cho đoạn mã HTML: ` Nội dung ` và đoạn CSS: `.box { width: 100px; padding: 10px; border: 1px solid black; }`. Nếu `box-sizing` mặc định là `content-box`, chiều rộng thực tế mà phần tử `.box` chiếm trên trang là bao nhiêu? 100px 110px 112px 122px Câu hỏi yêu cầu phân tích và áp dụng Box Model với `content-box`. Chiều rộng thực tế = width + padding-left + padding-right + border-left + border-right. Tính toán: 100px + 10px + 10px + 1px + 1px = 122px. 8 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 8: Thuộc tính CSS nào khi áp dụng cho một phần tử sẽ làm cho nó không hiển thị trên trang web và cũng không chiếm bất kỳ không gian nào trong layout? display: none; visibility: hidden; opacity: 0; height: 0; width: 0; Câu hỏi phân biệt giữa ẩn phần tử và ẩn mà không chiếm không gian. `display: none` thực hiện cả hai điều này. 9 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 9: Để định dạng một phần tử HTML duy nhất với một kiểu dáng đặc biệt không áp dụng cho phần tử nào khác, bạn nên sử dụng bộ chọn CSS nào? Bộ chọn lớp (Class selector) Bộ chọn phần tử (Element selector) Bộ chọn ID (ID selector) Bộ chọn thuộc tính (Attribute selector) Câu hỏi phân biệt mục đích sử dụng ID và Class. ID được sử dụng để định danh và định dạng một phần tử DUY NHẤT. 10 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 10: Cho đoạn mã HTML: ` Nội dung `. Nếu có các quy tắc CSS cho `#main`, `.container`, và `.highlight` đều định dạng thuộc tính `border-color`, quy tắc nào có mức ưu tiên cao nhất để xác định màu viền cuối cùng? Quy tắc cho `.container` Quy tắc cho `#main` Quy tắc cho `.highlight` Quy tắc được viết sau cùng trong file CSS Câu hỏi kiểm tra kiến thức về mức độ ưu tiên (specificity) của bộ chọn trong CSS. Bộ chọn ID (`#main`) có mức ưu tiên cao hơn bộ chọn Class (`.container`, `.highlight`). 11 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 11: Giá trị mặc định của thuộc tính `box-sizing` trong CSS là gì? content-box border-box padding-box margin-box Câu hỏi kiểm tra kiến thức về giá trị mặc định của thuộc tính `box-sizing`. Giá trị mặc định là `content-box`. 12 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 12: Bạn muốn một phần tử ` ` có chiều rộng cố định 300px và được căn giữa theo chiều ngang trong phần tử chứa nó. Đoạn CSS nào sau đây giúp đạt được điều đó? div { width: 300px; text-align: center; } div { width: 300px; align: center; } div { width: 300px; margin-left: auto; margin-right: auto; } div { width: 300px; display: inline-block; margin: auto; } Câu hỏi yêu cầu áp dụng kỹ thuật căn giữa phần tử khối. Đối với phần tử khối có chiều rộng cố định, thiết lập `margin-left` và `margin-right` thành `auto` sẽ giúp căn giữa. 13 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 13: Khi sử dụng thuộc tính viết tắt cho `margin` như `margin: 10px 20px 5px 15px;`, các giá trị này lần lượt áp dụng cho các cạnh nào của phần tử? Trên, Dưới, Trái, Phải Trên, Trái, Dưới, Phải Trái, Phải, Trên, Dưới Trên, Phải, Dưới, Trái Câu hỏi kiểm tra cách sử dụng thuộc tính viết tắt cho margin/padding. Thứ tự áp dụng là Top, Right, Bottom, Left (theo chiều kim đồng hồ). 14 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 14: Phần tử nội tuyến (inline element) có thể thiết lập các thuộc tính nào sau đây liên quan đến kích thước và khoảng trống theo chiều dọc? margin-left, margin-right, padding-left, padding-right width, height margin-top, margin-bottom padding-top, padding-bottom Câu hỏi kiểm tra giới hạn của phần tử nội tuyến. Phần tử nội tuyến không thể thiết lập `width`, `height`, `margin-top`, `margin-bottom`, `padding-top`, `padding-bottom` một cách hiệu quả để ảnh hưởng đến layout. 15 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 15: Bạn có một danh sách các mục ` ` và muốn chúng hiển thị trên cùng một dòng nhưng vẫn có thể thiết lập chiều rộng và chiều cao cho mỗi mục. Giá trị `display` nào phù hợp nhất? block inline-block inline list-item Câu hỏi yêu cầu chọn giá trị `display` cho phép phần tử vừa nằm trên cùng dòng (như inline) vừa có thể thiết lập kích thước (như block). `inline-block` là đáp án. 16 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 16: Thuộc tính `border-style` có giá trị nào để hiển thị đường viền hai nét liền song song? solid dashed dotted double Câu hỏi kiểm tra các giá trị của thuộc tính `border-style`. Giá trị `double` tạo đường viền hai nét liền. 17 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 17: Khi thiết lập `padding: 15px 30px;`, giá trị 15px áp dụng cho cạnh nào và 30px áp dụng cho cạnh nào? Trên và Dưới là 15px, Trái và Phải là 30px. Trên và Trái là 15px, Dưới và Phải là 30px. Trên là 15px, Phải, Dưới, Trái là 30px. Trái và Phải là 15px, Trên và Dưới là 30px. Câu hỏi kiểm tra cách sử dụng thuộc tính viết tắt padding/margin với hai giá trị. Giá trị đầu tiên áp dụng cho Trên và Dưới, giá trị thứ hai áp dụng cho Trái và Phải. 18 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 18: Bạn đang thiết kế một trang web và muốn các hình ảnh hiển thị cạnh nhau trên cùng một dòng, mỗi hình ảnh có thể có chiều rộng và chiều cao riêng. Loại phần tử nào hoặc thiết lập `display` nào phù hợp nhất cho các hình ảnh này? Sử dụng `display: block;` Sử dụng `display: inline;` Sử dụng `display: inline-block;` Các hình ảnh mặc định đã là phần tử khối. Câu hỏi yêu cầu lựa chọn cách hiển thị cho phép phần tử nằm trên cùng dòng (cạnh nhau) và có thể kiểm soát kích thước. `inline-block` là lựa chọn tốt nhất. 19 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 19: Thuộc tính `border-radius` trong CSS được sử dụng để làm gì? Bo tròn các góc của phần tử. Tạo khoảng trống bên trong đường viền. Tạo khoảng trống bên ngoài đường viền. Thiết lập kiểu đường viền. Câu hỏi kiểm tra chức năng của thuộc tính `border-radius`. Nó được dùng để bo tròn các góc của phần tử. 20 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 20: Cho đoạn mã HTML: ` Nội dung `. CSS: `.outer { margin-bottom: 20px; } .inner { margin-top: 15px; }`. Hiện tượng 'margin collapsing' (sụp đổ lề) có thể xảy ra ở đây không? Nếu có, khoảng trống thực tế giữa phần tử `.outer` và phần tử kế tiếp nó (nếu có) là bao nhiêu? Không, margin collapsing chỉ xảy ra giữa các phần tử ngang hàng. Có, khoảng trống thực tế là 35px (15px + 20px). Có, khoảng trống thực tế là 20px (max của 15px và 20px). Có, khoảng trống thực tế là 15px (min của 15px và 20px). Câu hỏi kiểm tra hiện tượng margin collapsing. Margin top của phần tử con đầu tiên (`.inner`) và margin bottom của phần tử cha (`.outer`) có thể sụp đổ khi không có border/padding/content giữa chúng. Khoảng trống thực tế sẽ bằng giá trị lớn hơn trong hai margin (max(20px, 15px) = 20px). 21 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 21: Thuộc tính `outline` trong CSS khác gì so với `border`? Outline nằm bên trong padding, còn border nằm bên ngoài padding. Outline được vẽ bên ngoài đường viền và không chiếm không gian trong layout, còn border chiếm không gian. Outline chỉ áp dụng cho phần tử nội tuyến, còn border áp dụng cho phần tử khối. Outline có thể thiết lập màu sắc, còn border thì không. Câu hỏi phân biệt `outline` và `border`. Outline vẽ bên ngoài đường viền, không chiếm không gian trong layout và thường được dùng để chỉ trạng thái focus (tiêu điểm). 22 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 22: Để xóa đường viền mặc định của một phần tử (ví dụ: thẻ `` có thể có viền mặc định), bạn sử dụng thuộc tính `border` với giá trị nào? border: none; border-style: hidden; border-width: 0px; border: transparent; Câu hỏi kiểm tra cách loại bỏ border. `border: none;` hoặc `border: 0;` là cách phổ biến. 23 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 23: Bạn có một phần tử `` và áp dụng CSS `span { padding: 20px; margin: 20px; }`. Khi hiển thị, điều gì sẽ xảy ra với padding và margin theo chiều dọc (top/bottom)? Padding và margin 20px sẽ được thêm vào tất cả các cạnh, làm tăng khoảng cách xung quanh span. Padding top/bottom sẽ hoạt động bình thường, nhưng margin top/bottom sẽ bị bỏ qua. Margin top/bottom sẽ hoạt động bình thường, nhưng padding top/bottom sẽ bị bỏ qua. Padding và margin theo chiều ngang (left/right) sẽ hoạt động, nhưng padding và margin theo chiều dọc (top/bottom) sẽ không ảnh hưởng đến layout dòng. Câu hỏi kiểm tra cách padding và margin theo chiều dọc hoạt động trên phần tử nội tuyến. Padding top/bottom và margin top/bottom được áp dụng nhưng không ảnh hưởng đến vị trí của các phần tử trên cùng dòng. 24 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 24: Khi sử dụng thuộc tính viết tắt `margin: 10px;`, giá trị này sẽ áp dụng cho những cạnh nào của phần tử? Chỉ cạnh trên. Cạnh trên và dưới. Tất cả bốn cạnh (Trên, Phải, Dưới, Trái). Cạnh trái và phải. Câu hỏi kiểm tra cách sử dụng thuộc tính viết tắt với một giá trị. Một giá trị duy nhất áp dụng cho cả 4 cạnh (Trên, Phải, Dưới, Trái). 25 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 25: Bạn muốn tạo một khối nội dung có đường viền 1px màu đen, khoảng cách 15px từ nội dung đến đường viền, và khoảng cách 20px từ đường viền đến các phần tử xung quanh. Đoạn CSS nào sau đây kết hợp các thuộc tính này một cách chính xác? padding: 15px; border: 1px solid black; margin: 20px; margin: 15px; border: 1px solid black; padding: 20px; border: 1px solid black; padding: 20px; margin: 15px; border: 1px solid black; margin: 15px; padding: 20px; Câu hỏi yêu cầu kết hợp các thuộc tính box model. Padding là khoảng cách nội dung-đường viền (15px), border là đường viền (1px solid black), margin là khoảng cách đường viền-phần tử xung quanh (20px). 26 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 26: Thuộc tính CSS nào kiểm soát màu sắc của đường viền? border-style border-width border-radius border-color Câu hỏi kiểm tra thuộc tính thiết lập màu viền. `border-color` được sử dụng cho mục đích này. 27 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 27: Để áp dụng cùng một kiểu định dạng khung cho nhiều phần tử khác nhau trên trang web, bạn nên sử dụng bộ chọn nào? Bộ chọn ID Bộ chọn lớp (Class) Bộ chọn phần tử Bộ chọn pseudo-class Câu hỏi phân biệt mục đích sử dụng ID và Class. Class được sử dụng để định dạng cho NHIỀU phần tử có cùng kiểu dáng. 28 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 28: Bạn có một phần tử ` ` với `width: 50%;` và `margin: auto;`. Điều gì xảy ra khi kích thước màn hình trình duyệt thay đổi? Phần tử sẽ giữ nguyên chiều rộng 50% và dịch chuyển sang trái hoặc phải. Phần tử sẽ giữ nguyên vị trí nhưng chiều rộng có thể thay đổi. Phần tử sẽ luôn chiếm 50% chiều rộng của phần tử chứa và luôn được căn giữa theo chiều ngang. Margin auto sẽ bị bỏ qua vì chiều rộng được đặt theo phần trăm. Câu hỏi yêu cầu phân tích hành vi của phần tử khối với width theo phần trăm và margin auto. Chiều rộng sẽ thay đổi theo 50% của phần tử chứa, và `margin: auto` sẽ đảm bảo nó luôn được căn giữa theo chiều ngang. 29 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 29: Thuộc tính `background-color` của một phần tử trong Box Model sẽ bao phủ những khu vực nào theo mặc định? Content và Padding Content, Padding và Border Content, Padding, Border và Margin Chỉ Content Câu hỏi kiểm tra kiến thức về khu vực được tô màu nền. Màu nền bao phủ khu vực nội dung (content) và khu vực padding. 30 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 05 Câu 30: Nếu bạn muốn một phần tử ` ` có chiều rộng 250px, bao gồm cả padding và border vào trong chiều rộng đó, bạn nên sử dụng thuộc tính `box-sizing` với giá trị nào? content-box border-box padding-box margin-box Câu hỏi yêu cầu áp dụng `box-sizing`. Giá trị `border-box` làm cho `width` và `height` bao gồm cả padding và border. 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é!!! Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 06 Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 06 được xây dựng với nhiều câu hỏi chất lượng, sát với nội dung chương trình học, giúp bạn dễ dàng ôn tập và kiểm tra kiến thức hiệu quả. Hãy cùng bắt đầu làm bài tập trắc nghiệm ngay để nâng cao hiểu biết và chuẩn bị tốt cho kỳ thi sắp tới! Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào nằm ngoài đường viền (border) của phần tử và tạo ra khoảng trống giữa phần tử đó với các phần tử khác? A. Content (Nội dung) B. Padding (Đệm) C. Border (Đường viền) D. Margin (Lề ngoài) Câu 2: Bạn muốn thiết lập một khoảng đệm (padding) chỉ cho phía trên và phía dưới của một phần tử, mỗi bên là 15px, trong khi phía trái và phải không có đệm (0px). Thuộc tính CSS nào sau đây thực hiện đúng yêu cầu đó? A. padding: 15px; B. padding: 15px 0; C. padding-top: 15px; padding-bottom: 15px; D. padding-left: 0; padding-right: 0; Câu 3: Cho đoạn mã HTML và CSS sau: HTML: ` A. 100px B. 120px C. 130px D. 170px Câu 4: Thuộc tính CSS `display: inline-block;` khác gì so với `display: inline;`? A. inline-block cho phép thiết lập chiều rộng và chiều cao, trong khi inline thì không. B. inline-block luôn bắt đầu trên một dòng mới, trong khi inline thì không. C. inline-block chỉ áp dụng cho văn bản, trong khi inline áp dụng cho mọi phần tử. D. inline-block làm ẩn phần tử, trong khi inline hiển thị phần tử. Câu 5: Bạn đang thiết kế một menu ngang sử dụng các thẻ ``. Ban đầu, các thẻ `` là phần tử nội tuyến (inline). Để chúng có thể nằm trên cùng một dòng nhưng vẫn có thể thiết lập chiều rộng, chiều cao và khoảng đệm dọc (top/bottom padding), bạn nên sử dụng thuộc tính `display` với giá trị nào? A. display: block; B. display: inline; C. display: inline-block; D. display: none; Câu 6: Khi hai phần tử khối liền kề theo chiều dọc đều có margin (lề ngoài), hiện tượng gì có thể xảy ra với khoảng cách giữa chúng? A. Khoảng cách giữa chúng sẽ bằng tổng margin của cả hai phần tử. B. Khoảng cách giữa chúng sẽ bằng giá trị margin lớn hơn của hai phần tử (hiện tượng gộp lề). C. Khoảng cách giữa chúng sẽ bị bỏ qua và chúng dính liền nhau. D. Khoảng cách chỉ do padding của hai phần tử quyết định. Câu 7: Để tạo một đường viền nét đứt (dashed border) dày 2px và màu xanh dương (#0000FF) cho tất cả các cạnh của một phần tử, câu lệnh CSS nào sau đây là đúng và hiệu quả nhất? A. border: 2px dashed #0000FF; B. border-width: 2px; border-style: dashed; border-color: #0000FF; C. border: dashed 2px #0000FF; D. border: #0000FF dashed 2px; Câu 8: Bạn có một phần tử `div` và muốn nó chiếm 50% chiều rộng của phần tử chứa nó (parent element). Thuộc tính CSS nào sau đây là phù hợp nhất để thiết lập chiều rộng tương đối này? A. width: 50px; B. width: 50%; C. width: 50em; D. width: 50vw; Câu 9: Sự khác biệt cơ bản 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 luôn bắt đầu trên một dòng mới, phần tử nội tuyến thì không. B. Phần tử khối không thể chứa phần tử nội tuyến, phần tử nội tuyến thì có thể. C. Phần tử khối có thể thiết lập màu nền, phần tử nội tuyến thì không. D. Phần tử khối chỉ chứa văn bản, phần tử nội tuyến chứa hình ảnh. Câu 10: Bạn muốn ẩn một phần tử trên trang web sao cho nó không hiển thị và cũng không chiếm bất kỳ không gian nào trong layout. Thuộc tính CSS nào sau đây thực hiện điều này? A. visibility: hidden; B. opacity: 0; C. display: none; D. height: 0; width: 0; Câu 11: Trong CSS, bộ chọn (`selector`) nào được sử dụng để định dạng một phần tử duy nhất trên trang web? A. Bộ chọn lớp (Class selector) với dấu chấm (.). B. Bộ chọn ID (ID selector) với dấu thăng (#). C. Bộ chọn phần tử (Element selector) với tên thẻ. D. Bộ chọn thuộc tính (Attribute selector) với dấu ngoặc vuông ([]). Câu 12: Bạn có một nhóm các phần tử `div` mà bạn muốn áp dụng cùng một kiểu định dạng (ví dụ: màu nền, đường viền). Cách hiệu quả nhất để làm điều này trong CSS là 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. Áp dụng kiểu nội tuyến (inline styles) cho từng phần tử. Câu 13: Cho đoạn mã CSS: `.hop { border-left: 3px solid red; border-right: 3px solid blue; border-top: 1px dashed green; border-bottom: 1px dotted purple; }` Phần tử áp dụng kiểu này sẽ có đường viền ở các cạnh như thế nào? A. Tất cả các cạnh đều có đường viền nét liền màu đỏ dày 3px. B. Cạnh trái và phải dày 3px, cạnh trên và dưới dày 1px, tất cả nét liền và màu đỏ. C. Tất cả các cạnh có cùng kiểu, độ dày và màu sắc (do sử dụng cùng một bộ chọn). D. Mỗi cạnh có kiểu, độ dày và màu sắc khác nhau theo định nghĩa cụ thể cho từng cạnh. Câu 14: Trong mô hình hộp (Box Model), thành phần nào là khoảng trống giữa nội dung (content) và đường viền (border) của phần tử? A. Margin (Lề ngoài) B. Padding (Đệm) C. Content (Nội dung) D. Border (Đường viền) Câu 15: Bạn muốn thiết lập lề ngoài (margin) cho một phần tử sao cho lề trên là 10px, lề phải là 20px, lề dưới là 15px và lề trái là 5px. Cú pháp shorthand nào sau đây là đúng? A. margin: 10px 15px 20px 5px; B. margin: 10px 5px 15px 20px; C. margin: 10px 20px 15px 5px; D. margin: 5px 15px 20px 10px; Câu 16: Phần tử HTML nào sau đây thường mặc định là phần tử khối (block-level)? A. Câu 17: Phần tử HTML nào sau đây thường mặc định là phần tử nội tuyến (inline-level)? B. Câu 18: Bạn có một hình ảnh (``) và muốn nó hiển thị trên cùng một dòng với văn bản, nhưng vẫn có thể thiết lập lề trên và lề dưới (top/bottom margin). Giá trị `display` nào cho phép điều này? A. display: block; B. display: inline; C. display: inline-block; D. display: none; Câu 19: Thuộc tính `border-style` có thể nhận giá trị nào để tạo đường viền là một chuỗi các dấu chấm tròn? A. dotted B. dashed C. solid D. double Câu 20: Bạn muốn thiết lập khoảng đệm (padding) cho một phần tử sao cho phía trên là 10px, phía phải là 20px, phía dưới là 30px và phía trái là 40px. Cú pháp shorthand nào sau đây là đúng? A. padding: 10px 30px 20px 40px; B. padding: 10px 40px 30px 20px; C. padding: 40px 20px 30px 10px; D. padding: 10px 20px 30px 40px; Câu 21: Khi sử dụng thuộc tính `margin: auto;` cho một phần tử khối có chiều rộng cố định, điều gì thường xảy ra? A. Phần tử sẽ bị ẩn đi. B. Phần tử sẽ được căn giữa theo chiều ngang trong phần tử chứa nó. C. Phần tử sẽ chiếm toàn bộ chiều rộng còn lại. D. Thuộc tính này không có tác dụng với phần tử khối. Câu 22: Bạn có một phần tử `div` và muốn nó có đường viền màu xám nhạt (`#cccccc`) chỉ ở phía dưới, nét liền và dày 1px. Câu lệnh CSS nào sau đây thực hiện đúng yêu cầu? A. border-bottom: 1px solid #cccccc; B. border: 1px solid #cccccc bottom; C. border-color: #cccccc; border-style: solid; border-width: 1px; D. border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #cccccc; Câu 23: Cho đoạn CSS: `.hop-nho { width: 50%; padding: 5%; border: 2px solid black; } .hop-lon { width: 300px; border: 1px solid red; }` Nếu một phần tử có class `hop-nho` nằm bên trong một phần tử có class `hop-lon`, thì chiều rộng của phần tử `hop-nho` (chỉ phần nội dung - content width) sẽ là bao nhiêu pixel? A. 50% B. 300px C. 150px D. Không thể xác định vì padding được tính bằng phần trăm. Câu 24: Thuộc tính CSS nào được sử dụng để kiểm soát loại hộp hiển thị của một phần tử (ví dụ: khối, nội tuyến, nội tuyến khối)? A. display B. visibility C. position D. float Câu 25: Bạn muốn tạo một khoảng trống bên trong phần tử, giữa nội dung và đường viền. Thuộc tính nào bạn cần sử dụng? A. margin B. padding C. border D. outline Câu 26: Điều gì xảy ra khi bạn cố gắng thiết lập `width` và `height` cho một phần tử có `display: inline;` thuần túy? A. Thuộc tính `width` và `height` sẽ bị bỏ qua (không có tác dụng). B. Phần tử sẽ tự động chuyển thành `display: block;`. C. Phần tử sẽ chiếm toàn bộ chiều rộng của phần tử chứa. D. Nội dung bên trong sẽ tràn ra ngoài khung. Câu 27: Bạn có một phần tử `div` với nội dung văn bản. Để tạo một khoảng trống 10px xung quanh nội dung bên trong đường viền, bạn sẽ sử dụng thuộc tính nào với giá trị là 10px? A. margin B. padding C. border-width D. outline-width Câu 28: Trong cú pháp shorthand của thuộc tính `border` (`border: width style color;`), thứ tự của các giá trị có quan trọng không? A. Không, thứ tự của width, style và color không quan trọng. B. Có, phải luôn là `width style color`. C. Có, phải luôn là `style width color`. D. Có, phải luôn là `color width style`. Câu 29: Sự khác biệt chính giữa `margin` và `padding` trong Box Model là gì? A. Margin là khoảng trống bên trong phần tử, còn padding là khoảng trống bên ngoài. B. Margin chỉ áp dụng cho phần tử khối, còn padding áp dụng cho cả phần tử nội tuyến. C. Margin có thể có màu nền, còn padding thì không. D. Margin tạo khoảng trống bên ngoài đường viền, còn padding tạo khoảng trống bên trong đường viền. Câu 30: Bạn có một danh sách các mục (` `) trong một danh sách không thứ tự (` `). Mặc định, các mục danh sách (` `) là phần tử khối. Nếu bạn muốn chúng nằm trên cùng một dòng (ví dụ: tạo menu ngang) và vẫn có thể kiểm soát chiều rộng/cao cũng như lề/đệm, bạn nên thay đổi thuộc tính `display` của thẻ ` ` thành giá trị nào? A. display: block; B. display: inline; C. display: inline-block; D. display: list-item; Câu 31: Đơn vị đo nào trong CSS được sử dụng để thiết lập kích thước (width, height, margin, padding, border) dựa trên kích thước phông chữ (font-size) của phần tử gốc (root element), thường là thẻ ``)? A. em B. rem C. px D. % 1 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào nằm *ngoài* đường viền (border) của phần tử và tạo ra khoảng trống giữa phần tử đó với các phần tử *khác*? Câu hỏi kiểm tra kiến thức về Box Model. Margin (lề ngoài) là khoảng trống bên ngoài đường viền, dùng để điều chỉnh khoảng cách giữa các phần tử. 2 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Câu 2: Bạn muốn thiết lập một khoảng đệm (padding) chỉ cho phía trên và phía dưới của một phần tử, mỗi bên là 15px, trong khi phía trái và phải không có đệm (0px). Thuộc tính CSS nào sau đây thực hiện đúng yêu cầu đó? Câu hỏi yêu cầu áp dụng cú pháp shorthand của thuộc tính padding. Cú pháp `padding: top right bottom left;` hoặc `padding: top/bottom left/right;`. `padding: 15px 0;` áp dụng 15px cho trên/dưới và 0px cho trái/phải. 3 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Câu 3: Cho đoạn mã HTML và CSS sau: HTML: ` Nội dung ` CSS: `.hop { width: 100px; padding: 10px; border: 5px solid black; margin: 20px; }` Tổng chiều rộng thực tế mà phần tử `div` này chiếm trên trang (bao gồm cả margin) là bao nhiêu pixel? Câu hỏi yêu cầu phân tích Box Model và tính toán kích thước tổng. Tổng chiều rộng = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right. Trong trường hợp này: 100px + 10px + 10px + 5px + 5px + 20px + 20px = 170px. 4 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Câu 4: Thuộc tính CSS `display: inline-block;` khác gì so với `display: inline;`? Câu hỏi kiểm tra sự hiểu biết về các giá trị khác nhau của thuộc tính display. `inline-block` cho phép 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 cho phép thiết lập chiều rộng, chiều cao và margin/padding theo chiều dọc, điều mà `inline` thuần túy không làm được. 5 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Câu 5: Bạn đang thiết kế một menu ngang sử dụng các thẻ ``. Ban đầu, các thẻ `` là phần tử nội tuyến (inline). Để chúng có thể nằm trên cùng một dòng nhưng vẫn có thể thiết lập chiều rộng, chiều cao và khoảng đệm dọc (top/bottom padding), bạn nên sử dụng thuộc tính `display` với giá trị nào? Câu hỏi là một tình huống áp dụng. Để phần tử vừa nằm cùng dòng (như inline) vừa có thể điều chỉnh kích thước và lề/đệm dọc (như block), giá trị phù hợp nhất là `inline-block`. 6 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Câu 6: Khi hai phần tử khối liền kề theo chiều dọc đều có margin (lề ngoài), hiện tượng gì có thể xảy ra với khoảng cách giữa chúng? Câu hỏi kiểm tra kiến thức về hiện tượng 'margin collapsing' (gộp lề). Khi hai lề dọc của các phần tử khối gặp nhau, chúng sẽ gộp lại và khoảng cách thực tế giữa hai phần tử chỉ bằng giá trị lớn nhất của hai lề đó, chứ không phải tổng. 7 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Để tạo một đường viền nét đứt (dashed border) dày 2px và màu xanh dương (#0000FF) cho tất cả các cạnh của một phần tử, câu lệnh CSS nào sau đây là đúng và hiệu quả nhất? Câu hỏi kiểm tra cú pháp shorthand của thuộc tính border. Cú pháp `border: width style color;` là cách viết ngắn gọn và phổ biến nhất để thiết lập cả ba thuộc tính cùng lúc cho tất cả các cạnh. 8 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Bạn có một phần tử `div` và muốn nó chiếm 50% chiều rộng của phần tử chứa nó (parent element). Thuộc tính CSS nào sau đây là phù hợp nhất để thiết lập chiều rộng tương đối này? Câu hỏi yêu cầu áp dụng đơn vị đo tương đối trong CSS. Đơn vị `%` được sử dụng để thiết lập kích thước của một phần tử dựa trên kích thước của phần tử chứa nó. 9 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Sự khác biệt cơ bản giữa phần tử khối (block-level) và phần tử nội tuyến (inline-level) là gì? Câu hỏi kiểm tra hiểu biết cốt lõi về hai loại phần tử hiển thị chính trong HTML/CSS. 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, trong khi phần tử nội tuyến nằm trên cùng một dòng với nội dung khác và chỉ chiếm không gian cần thiết. 10 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Bạn muốn ẩn một phần tử trên trang web sao cho nó không hiển thị và cũng không chiếm bất kỳ không gian nào trong layout. Thuộc tính CSS nào sau đây thực hiện điều này? Câu hỏi kiểm tra thuộc tính display dùng để ẩn phần tử. `display: none;` làm cho phần tử hoàn toàn biến mất khỏi layout, không ảnh hưởng đến vị trí của các phần tử khác. 11 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Trong CSS, bộ chọn (`selector`) nào được sử dụng để định dạng một phần tử *duy nhất* trên trang web? Câu hỏi kiểm tra kiến thức về các loại bộ chọn CSS cơ bản. Bộ chọn ID (#) được thiết kế để áp dụng kiểu cho một phần tử HTML duy nhất có thuộc tính `id` tương ứng. 12 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Bạn có một nhóm các phần tử `div` mà bạn muốn áp dụng cùng một kiểu định dạng (ví dụ: màu nền, đường viền). Cách hiệu quả nhất để làm điều này trong CSS là sử dụng bộ chọn nào? Câu hỏi là một tình huống áp dụng về bộ chọn. Khi muốn áp dụng kiểu cho một *nhóm* các phần tử có cùng đặc điểm hoặc mục đích, bộ chọn lớp (class) là lựa chọn phù hợp nhất. 13 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Cho đoạn mã CSS: `.hop { border-left: 3px solid red; border-right: 3px solid blue; border-top: 1px dashed green; border-bottom: 1px dotted purple; }` Phần tử áp dụng kiểu này sẽ có đường viền ở các cạnh như thế nào? Câu hỏi kiểm tra khả năng phân tích các thuộc tính border riêng lẻ. Các thuộc tính `border-left`, `border-right`, `border-top`, `border-bottom` cho phép thiết lập kiểu, độ dày và màu sắc khác nhau cho từng cạnh của phần tử. 14 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Trong mô hình hộp (Box Model), thành phần nào là khoảng trống giữa nội dung (content) và đường viền (border) của phần tử? Câu hỏi kiểm tra kiến thức về Box Model. Padding (đệm) là khoảng trống bên trong đường viền, giữa đường viền và nội dung của phần tử. 15 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Bạn muốn thiết lập lề ngoài (margin) cho một phần tử sao cho lề trên là 10px, lề phải là 20px, lề dưới là 15px và lề trái là 5px. Cú pháp shorthand nào sau đây là đúng? Câu hỏi kiểm tra cú pháp shorthand của thuộc tính margin. Cú pháp đầy đủ theo thứ tự là `margin: top right bottom left;`. 16 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Phần tử HTML nào sau đây thường mặc định là phần tử khối (block-level)? Câu hỏi kiểm tra kiến thức về các phần tử mặc định trong HTML. Thẻ ` ` (đoạn văn) là một ví dụ điển hình của phần tử khối, luôn bắt đầu trên dòng mới. 17 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Phần tử HTML nào sau đây thường mặc định là phần tử nội tuyến (inline-level)? Câu hỏi kiểm tra kiến thức về các phần tử mặc định trong HTML. Thẻ `` là một phần tử nội tuyến chung, thường dùng để nhóm các phần tử inline khác hoặc áp dụng kiểu cho một phần nhỏ của văn bản. 18 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Bạn có một hình ảnh (``) và muốn nó hiển thị trên cùng một dòng với văn bản, nhưng vẫn có thể thiết lập lề trên và lề dưới (top/bottom margin). Giá trị `display` nào cho phép điều này? Câu hỏi là một tình huống áp dụng. Hình ảnh (``) mặc định là `inline-block` hoặc có hành vi tương tự, cho phép nó nằm cùng dòng với văn bản nhưng vẫn chấp nhận kích thước và lề/đệm dọc. Nếu cần thay đổi hành vi này, `inline-block` là giá trị phù hợp để duy trì khả năng nằm cùng dòng nhưng vẫn kiểm soát Box Model. 19 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Thuộc tính `border-style` có thể nhận giá trị nào để tạo đường viền là một chuỗi các dấu chấm tròn? Câu hỏi kiểm tra kiến thức về các giá trị của thuộc tính `border-style`. Giá trị `dotted` tạo ra đường viền là các dấu chấm tròn. 20 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Bạn muốn thiết lập khoảng đệm (padding) cho một phần tử sao cho phía trên là 10px, phía phải là 20px, phía dưới là 30px và phía trái là 40px. Cú pháp shorthand nào sau đây là đúng? Câu hỏi kiểm tra cú pháp shorthand của thuộc tính padding. Cú pháp đầy đủ theo thứ tự là `padding: top right bottom left;`. 21 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Khi sử dụng thuộc tính `margin: auto;` cho một phần tử khối có chiều rộng cố định, điều gì thường xảy ra? Câu hỏi kiểm tra ứng dụng của `margin: auto;`. Khi áp dụng cho lề trái và phải của một phần tử khối có chiều rộng được xác định (khác 'auto'), trình duyệt sẽ tự động phân bổ không gian còn lại ở hai bên một cách đều nhau, giúp căn giữa phần tử trong phần tử chứa nó. 22 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Bạn có một phần tử `div` và muốn nó có đường viền màu xám nhạt (`#cccccc`) chỉ ở phía dưới, nét liền và dày 1px. Câu lệnh CSS nào sau đây thực hiện đúng yêu cầu? Câu hỏi kiểm tra cách thiết lập đường viền cho một cạnh cụ thể. Thuộc tính `border-bottom` cho phép thiết lập đường viền cho cạnh dưới với cú pháp shorthand tương tự `border`. 23 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Cho đoạn CSS: `.hop-nho { width: 50%; padding: 5%; border: 2px solid black; } .hop-lon { width: 300px; border: 1px solid red; }` Nếu một phần tử có class `hop-nho` nằm bên trong một phần tử có class `hop-lon`, thì chiều rộng của phần tử `hop-nho` (chỉ phần nội dung - content width) sẽ là bao nhiêu pixel? Câu hỏi yêu cầu phân tích kích thước tương đối và tuyệt đối trong ngữ cảnh lồng nhau. Phần tử `.hop-nho` có `width: 50%;` của phần tử chứa nó (`.hop-lon`). `.hop-lon` có `width: 300px;`. Do đó, chiều rộng nội dung của `.hop-nho` là 50% của 300px, tức là 150px. 24 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Thuộc tính CSS nào được sử dụng để kiểm soát loại hộp hiển thị của một phần tử (ví dụ: khối, nội tuyến, nội tuyến khối)? Câu hỏi kiểm tra thuộc tính cơ bản nhất để thay đổi cách hiển thị của phần tử. Thuộc tính `display` xác định loại hộp hiển thị của phần tử, ảnh hưởng đến cách nó tương tác với các phần tử khác trong layout. 25 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Bạn muốn tạo một khoảng trống *bên trong* phần tử, giữa nội dung và đường viền. Thuộc tính nào bạn cần sử dụng? Câu hỏi lặp lại khái niệm về padding nhưng dưới dạng ứng dụng. Khoảng trống bên trong đường viền là padding. 26 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Điều gì xảy ra khi bạn cố gắng thiết lập `width` và `height` cho một phần tử có `display: inline;` thuần túy? Câu hỏi kiểm tra đặc điểm giới hạn của phần tử inline. Phần tử inline thuần túy không chấp nhận thiết lập `width` và `height` theo cách thông thường; kích thước của nó được xác định bởi nội dung bên trong. 27 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Bạn có một phần tử `div` với nội dung văn bản. Để tạo một khoảng trống 10px xung quanh nội dung *bên trong* đường viền, bạn sẽ sử dụng thuộc tính nào với giá trị là 10px? Câu hỏi là một tình huống áp dụng cụ thể của padding. Khoảng trống bên trong đường viền, xung quanh nội dung, chính là padding. 28 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Trong cú pháp shorthand của thuộc tính `border` (`border: width style color;`), thứ tự của các giá trị có quan trọng không? Câu hỏi kiểm tra kiến thức về cú pháp shorthand. Đối với thuộc tính `border` shorthand, thứ tự của `width`, `style`, và `color` không quan trọng, trình duyệt sẽ tự động nhận diện chúng. 29 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Sự khác biệt chính giữa `margin` và `padding` trong Box Model là gì? Câu hỏi yêu cầu phân biệt hai khái niệm cốt lõi của Box Model. Margin tạo khoảng trống bên ngoài đường viền, ảnh hưởng đến vị trí tương đối với các phần tử khác. Padding tạo khoảng trống bên trong đường viền, giữa đường viền và nội dung. 30 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 06 Bạn có một danh sách các mục (` `) trong một danh sách không thứ tự (` `). Mặc định, các mục danh sách (` `) là phần tử khối. Nếu bạn muốn chúng nằm trên cùng một dòng (ví dụ: tạo menu ngang) và vẫn có thể kiểm soát chiều rộng/cao cũng như lề/đệm, bạn nên thay đổi thuộc tính `display` của thẻ ` ` thành giá trị nào? Câu hỏi là một tình huống áp dụng phổ biến trong thiết kế web (tạo menu ngang từ danh sách). Để các mục danh sách (mặc định là khối) nằm trên cùng một dòng nhưng vẫn giữ khả năng điều chỉnh kích thước và lề/đệm, giá trị `inline-block` là lựa chọn phù hợp. 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é!!! Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 07 Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 07 được xây dựng với nhiều câu hỏi chất lượng, sát với nội dung chương trình học, giúp bạn dễ dàng ôn tập và kiểm tra kiến thức hiệu quả. Hãy cùng bắt đầu làm bài tập trắc nghiệm ngay để nâng cao hiểu biết và chuẩn bị tốt cho kỳ thi sắp tới! Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào nằm sát nhất với nội dung thực tế của phần tử? A. Content B. Padding C. Border D. Margin Câu 2: Thuộc tính CSS `padding` dùng để làm gì? A. Tạo khoảng trống bên ngoài đường viền của phần tử. B. Tạo khoảng trống bên trong đường viền, xung quanh nội dung. C. Thiết lập kiểu và màu sắc cho đường viền. D. Ẩn phần tử khỏi hiển thị. Câu 3: Bạn muốn thêm một đường viền nét đứt màu xanh dương, dày 2px xung quanh một phần tử `div`. Đoạn mã CSS nào sau đây là đúng? A. border: blue 2px dashed; B. border-style: dashed; border-width: 2px; border-color: blue; C. border: 2px dashed blue; D. border-blue: 2px dashed; Câu 4: Một phần tử `div` có các thuộc tính CSS sau: `width: 100px; padding: 10px; border: 5px solid black; margin: 20px;`. Tổng chiều rộng thực tế mà phần tử này chiếm dụng trên trang (bao gồm cả margin) là bao nhiêu? A. 100px B. 120px C. 140px D. 170px Câu 5: Sự khác biệt cơ bản giữa phần tử khối (block) và phần tử nội tuyến (inline) liên quan đến cách chúng hiển thị chiều rộng và ngắt dòng là gì? A. Phần tử khối không thể thiết lập chiều rộng, còn phần tử nội tuyến thì có thể. B. Phần tử khối luôn bắt đầu trên một dòng mới và chiếm hết chiều rộng, còn phần tử nội tuyến không ngắt dòng và chỉ chiếm không gian vừa đủ. C. Phần tử khối chỉ chứa được văn bản, còn phần tử nội tuyến chứa được các phần tử khác. D. Phần tử khối có thể có margin, còn phần tử nội tuyến thì không. Câu 6: Bạn có một danh sách các mục menu được tạo bằng thẻ ` `. Để sắp xếp các mục này nằm ngang trên cùng một dòng và có thể thiết lập chiều rộng/chiều cao cho mỗi mục, bạn nên sử dụng thuộc tính `display` với giá trị nào cho thẻ ` `? A. inline B. block C. inline-block D. none Câu 7: Thuộc tính CSS `border-bottom-color` được sử dụng để thay đổi màu sắc của phần nào trong mô hình hộp? A. Khoảng trống bên trong (Padding) B. Đường viền (Border) C. Khoảng trống bên ngoài (Margin) D. Nội dung (Content) Câu 8: Để làm tròn các góc của đường viền một phần tử, bạn sử dụng thuộc tính CSS nào? A. border-radius B. border-style C. corner-radius D. border-round Câu 9: Bạn muốn ẩn một phần tử HTML sao cho nó không hiển thị trên trang và cũng không chiếm bất kỳ không gian nào trong bố cục. Thuộc tính `display` nào sau đây sẽ đạt được điều này? A. hidden B. visible: false; C. display: hidden; D. display: none; Câu 10: Nếu một phần tử `p` có thuộc tính `margin-bottom: 15px;`, điều này có ý nghĩa gì đối với khoảng cách xung quanh phần tử đó? A. Tạo ra khoảng trống 15px bên ngoài đường viền, ở phía dưới phần tử. B. Tạo ra khoảng trống 15px bên trong đường viền, ở phía dưới nội dung. C. Thêm một đường viền dày 15px ở phía dưới. D. Chỉ áp dụng cho phần tử nội tuyến. Câu 11: Thành phần nào trong mô hình hộp CSS đại diện cho khu vực chứa văn bản, hình ảnh hoặc các phần tử con khác của một phần tử HTML? A. Margin B. Border C. Content D. Padding Câu 12: Bạn muốn tạo ra một khoảng đệm 10px ở phía trên và phía dưới, và 20px ở hai bên trái phải cho nội dung bên trong một phần tử `div`. Đoạn mã CSS nào sau đây sử dụng thuộc tính viết tắt là đúng? A. padding: 10px 20px 10px 20px; B. padding: 10px 20px; C. padding: 20px 10px; D. padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; Câu 13: Đặc điểm chính của một phần tử được định kiểu với `display: inline-block;` là gì? A. Luôn bắt đầu trên một dòng mới và không thể thiết lập chiều rộng/chiều cao. B. Không bắt đầu trên dòng mới và không thể thiết lập chiều rộng/chiều cao. C. Luôn bắt đầu trên một dòng mới và có thể thiết lập chiều rộng/chiều cao. D. Không bắt đầu trên dòng mới nhưng có thể thiết lập chiều rộng/chiều cao. Câu 14: Trong CSS, cú pháp để chọn một phần tử HTML có `id` là A. .logo B. #logo C. id(logo) D. element#logo Câu 15: Trong CSS, cú pháp để chọn tất cả các phần tử HTML có `class` là A. #button B. class(button) C. .button D. element.button Câu 16: Một phần tử `div` có cả `id= A. Blue B. Red C. Cả hai màu D. Màu mặc định của trình duyệt Câu 17: Mục đích chính của việc sử dụng `class` trong CSS, thay vì chỉ sử dụng `id` hoặc tên thẻ, là gì? A. Để đảm bảo mỗi phần tử có một định dạng duy nhất. B. Chỉ có class mới có thể áp dụng cho phần tử nội tuyến. C. Class có độ ưu tiên cao nhất trong CSS. D. Để áp dụng cùng một kiểu định dạng cho nhiều phần tử khác nhau. Câu 18: Viết đoạn mã CSS sử dụng thuộc tính viết tắt để thiết lập margin cho một phần tử với margin trên là 10px, phải là 5px, dưới là 12px và trái là 8px. A. margin: 10px 5px 12px 8px; B. margin: 10px 12px 5px 8px; C. margin: 8px 5px 12px 10px; D. margin: 10px, 5px, 12px, 8px; Câu 19: Theo mặc định, phần tử `` trong HTML thuộc loại hiển thị nào và điều này ảnh hưởng thế nào đến việc thiết lập `width` và `height` cho nó? A. Block; không thể thiết lập width/height. B. Inline; không thể thiết lập width/height. C. Inline-block; có thể thiết lập width/height. D. Block; chỉ có thể thiết lập width. Câu 20: Bạn muốn thêm một đường viền nét liền màu đỏ, dày 3px chỉ ở phía bên trái của một phần tử. Thuộc tính CSS nào sau đây là phù hợp nhất? A. border-color-left: red; border-width-left: 3px; border-style-left: solid; B. border-left: 3px solid red; C. border: left 3px solid red; D. left-border: 3px solid red; Câu 21: Đơn vị đo lường CSS nào thường được sử dụng để thiết lập kích thước (ví dụ: font-size, padding, margin) một cách tương đối so với kích thước font của phần tử cha? A. em B. rem C. px D. % Câu 22: Đơn vị đo lường CSS nào thường được sử dụng để thiết lập kích thước (ví dụ: font-size, padding, margin) một cách tương đối so với kích thước font của phần tử gốc (``)? A. em B. rem C. px D. vh Câu 23: Tại sao `display: inline-block;` thường được ưa chuộng hơn `display: inline;` khi muốn sắp xếp các phần tử nằm ngang và cần kiểm soát chính xác chiều rộng, chiều cao, padding trên dưới và margin trên dưới của chúng? A. Vì `inline-block` làm cho phần tử chiếm toàn bộ chiều rộng. B. Vì `inline-block` luôn bắt đầu trên một dòng mới. C. Vì `inline` cho phép kiểm soát kích thước và margin/padding trên dưới tốt hơn. D. Vì `inline-block` cho phép thiết lập chiều rộng/chiều cao và margin/padding trên dưới, điều mà `inline` không làm được. Câu 24: Bạn có một phần tử `section`. Bạn muốn nội dung bên trong phần tử này có khoảng cách 25px so với tất cả các cạnh của đường viền (hoặc cạnh của phần tử nếu không có đường viền). Thuộc tính CSS nào bạn cần sử dụng và với giá trị nào? A. padding: 25px; B. margin: 25px; C. border-spacing: 25px; D. content-padding: 25px; Câu 25: Sự khác biệt chính giữa `visibility: hidden;` và `display: none;` trong CSS là gì? A. `visibility: hidden;` ẩn phần tử và không chiếm không gian, còn `display: none;` vẫn chiếm không gian. B. Cả hai đều ẩn phần tử và không chiếm không gian. C. `visibility: hidden;` ẩn phần tử nhưng vẫn chiếm không gian, còn `display: none;` ẩn phần tử và không chiếm không gian. D. `visibility: hidden;` chỉ áp dụng cho văn bản, còn `display: none;` áp dụng cho mọi loại phần tử. Câu 26: Trong mô hình hộp CSS, thành phần nào tạo ra khoảng trống bên ngoài đường viền của phần tử, tách nó ra khỏi các phần tử lân cận khác? A. Content B. Padding C. Border D. Margin Câu 27: Để loại bỏ khoảng margin mặc định mà trình duyệt thường áp dụng cho phần tử ``, bạn sẽ viết quy tắc CSS nào? A. body { margin: 0; } B. body { padding: 0; } C. body { border: none; } D. html, body { margin: 0; } Câu 28: Viết quy tắc CSS sử dụng bộ chọn class A. #highlight-box { border: 1px solid green; } B. .highlight-box { border: 1px solid green; } C. highlight-box { border: 1px solid green; } D. .highlight-box { border-color: green; border-width: 1px; border-style: solid; } Câu 29: Nếu một phần tử `div` bên trong một phần tử cha có chiều rộng 500px được thiết lập `width: 50%;`, chiều rộng thực tế của phần tử `div` này sẽ là bao nhiêu? A. 50px B. 50% C. 500px D. 250px Câu 30: Trong mô hình hộp CSS, thuộc tính `border` nằm ở vị trí nào? A. Giữa Margin và cạnh của phần tử. B. Giữa Padding và Margin. C. Giữa Content và Padding. D. Bên ngoài Margin. 1 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào nằm sát nhất với nội dung thực tế của phần tử? Content Padding Border Margin 2 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 2: Thuộc tính CSS `padding` dùng để làm gì? Tạo khoảng trống bên ngoài đường viền của phần tử. Tạo khoảng trống bên trong đường viền, xung quanh nội dung. Thiết lập kiểu và màu sắc cho đường viền. Ẩn phần tử khỏi hiển thị. 3 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 3: Bạn muốn thêm một đường viền nét đứt màu xanh dương, dày 2px xung quanh một phần tử `div`. Đoạn mã CSS nào sau đây là đúng? border: blue 2px dashed; border-style: dashed; border-width: 2px; border-color: blue; border: 2px dashed blue; border-blue: 2px dashed; 4 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 4: Một phần tử `div` có các thuộc tính CSS sau: `width: 100px; padding: 10px; border: 5px solid black; margin: 20px;`. Tổng chiều rộng *thực tế* mà phần tử này chiếm dụng trên trang (bao gồm cả margin) là bao nhiêu? 100px 120px 140px 170px 5 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 5: Sự khác biệt cơ bản giữa phần tử khối (block) và phần tử nội tuyến (inline) liên quan đến cách chúng hiển thị chiều rộng và ngắt dòng là gì? Phần tử khối không thể thiết lập chiều rộng, còn phần tử nội tuyến thì có thể. Phần tử khối luôn bắt đầu trên một dòng mới và chiếm hết chiều rộng, còn phần tử nội tuyến không ngắt dòng và chỉ chiếm không gian vừa đủ. Phần tử khối chỉ chứa được văn bản, còn phần tử nội tuyến chứa được các phần tử khác. Phần tử khối có thể có margin, còn phần tử nội tuyến thì không. 6 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 6: Bạn có một danh sách các mục menu được tạo bằng thẻ ` `. Để sắp xếp các mục này nằm ngang trên cùng một dòng và có thể thiết lập chiều rộng/chiều cao cho mỗi mục, bạn nên sử dụng thuộc tính `display` với giá trị nào cho thẻ ` `? inline block inline-block none 7 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 7: Thuộc tính CSS `border-bottom-color` được sử dụng để thay đổi màu sắc của phần nào trong mô hình hộp? Khoảng trống bên trong (Padding) Đường viền (Border) Khoảng trống bên ngoài (Margin) Nội dung (Content) 8 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 8: Để làm tròn các góc của đường viền một phần tử, bạn sử dụng thuộc tính CSS nào? border-radius border-style corner-radius border-round 9 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 9: Bạn muốn ẩn một phần tử HTML sao cho nó không hiển thị trên trang và cũng không chiếm bất kỳ không gian nào trong bố cục. Thuộc tính `display` nào sau đây sẽ đạt được điều này? hidden visible: false; display: hidden; display: none; 10 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 10: Nếu một phần tử `p` có thuộc tính `margin-bottom: 15px;`, điều này có ý nghĩa gì đối với khoảng cách xung quanh phần tử đó? Tạo ra khoảng trống 15px bên ngoài đường viền, ở phía dưới phần tử. Tạo ra khoảng trống 15px bên trong đường viền, ở phía dưới nội dung. Thêm một đường viền dày 15px ở phía dưới. Chỉ áp dụng cho phần tử nội tuyến. 11 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 11: Thành phần nào trong mô hình hộp CSS đại diện cho khu vực chứa văn bản, hình ảnh hoặc các phần tử con khác của một phần tử HTML? Margin Border Content Padding 12 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 12: Bạn muốn tạo ra một khoảng đệm 10px ở phía trên và phía dưới, và 20px ở hai bên trái phải cho nội dung bên trong một phần tử `div`. Đoạn mã CSS nào sau đây sử dụng thuộc tính viết tắt là đúng? padding: 10px 20px 10px 20px; padding: 10px 20px; padding: 20px 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; 13 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 13: Đặc điểm chính của một phần tử được định kiểu với `display: inline-block;` là gì? Luôn bắt đầu trên một dòng mới và không thể thiết lập chiều rộng/chiều cao. Không bắt đầu trên dòng mới và không thể thiết lập chiều rộng/chiều cao. Luôn bắt đầu trên một dòng mới và có thể thiết lập chiều rộng/chiều cao. Không bắt đầu trên dòng mới nhưng có thể thiết lập chiều rộng/chiều cao. 14 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 14: Trong CSS, cú pháp để chọn một phần tử HTML có `id` là "logo" là gì? .logo #logo id(logo) element#logo 15 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 15: Trong CSS, cú pháp để chọn tất cả các phần tử HTML có `class` là "button" là gì? #button class(button) .button element.button 16 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 16: Một phần tử `div` có cả `id="main"` và `class="highlight"`. Nếu có hai quy tắc CSS, một cho `#main` đặt `color: blue;` và một cho `.highlight` đặt `color: red;`, màu văn bản cuối cùng của phần tử `div` này sẽ là gì? Blue Red Cả hai màu Màu mặc định của trình duyệt 17 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 17: Mục đích chính của việc sử dụng `class` trong CSS, thay vì chỉ sử dụng `id` hoặc tên thẻ, là gì? Để đảm bảo mỗi phần tử có một định dạng duy nhất. Chỉ có class mới có thể áp dụng cho phần tử nội tuyến. Class có độ ưu tiên cao nhất trong CSS. Để áp dụng cùng một kiểu định dạng cho nhiều phần tử khác nhau. 18 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 18: Viết đoạn mã CSS sử dụng thuộc tính viết tắt để thiết lập margin cho một phần tử với margin trên là 10px, phải là 5px, dưới là 12px và trái là 8px. margin: 10px 5px 12px 8px; margin: 10px 12px 5px 8px; margin: 8px 5px 12px 10px; margin: 10px, 5px, 12px, 8px; 19 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 19: Theo mặc định, phần tử `` trong HTML thuộc loại hiển thị nào và điều này ảnh hưởng thế nào đến việc thiết lập `width` và `height` cho nó? Block; không thể thiết lập width/height. Inline; không thể thiết lập width/height. Inline-block; có thể thiết lập width/height. Block; chỉ có thể thiết lập width. 20 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 20: Bạn muốn thêm một đường viền nét liền màu đỏ, dày 3px chỉ ở phía bên trái của một phần tử. Thuộc tính CSS nào sau đây là phù hợp nhất? border-color-left: red; border-width-left: 3px; border-style-left: solid; border-left: 3px solid red; border: left 3px solid red; left-border: 3px solid red; 21 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 21: Đơn vị đo lường CSS nào thường được sử dụng để thiết lập kích thước (ví dụ: font-size, padding, margin) một cách tương đối so với kích thước font của phần tử *cha*? em rem px % 22 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 22: Đơn vị đo lường CSS nào thường được sử dụng để thiết lập kích thước (ví dụ: font-size, padding, margin) một cách tương đối so với kích thước font của phần tử *gốc* (``)? em rem px vh 23 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 23: Tại sao `display: inline-block;` thường được ưa chuộng hơn `display: inline;` khi muốn sắp xếp các phần tử nằm ngang và cần kiểm soát chính xác chiều rộng, chiều cao, padding trên dưới và margin trên dưới của chúng? Vì `inline-block` làm cho phần tử chiếm toàn bộ chiều rộng. Vì `inline-block` luôn bắt đầu trên một dòng mới. Vì `inline` cho phép kiểm soát kích thước và margin/padding trên dưới tốt hơn. Vì `inline-block` cho phép thiết lập chiều rộng/chiều cao và margin/padding trên dưới, điều mà `inline` không làm được. 24 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 24: Bạn có một phần tử `section`. Bạn muốn nội dung bên trong phần tử này có khoảng cách 25px so với tất cả các cạnh của đường viền (hoặc cạnh của phần tử nếu không có đường viền). Thuộc tính CSS nào bạn cần sử dụng và với giá trị nào? padding: 25px; margin: 25px; border-spacing: 25px; content-padding: 25px; 25 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 25: Sự khác biệt chính giữa `visibility: hidden;` và `display: none;` trong CSS là gì? `visibility: hidden;` ẩn phần tử và không chiếm không gian, còn `display: none;` vẫn chiếm không gian. Cả hai đều ẩn phần tử và không chiếm không gian. `visibility: hidden;` ẩn phần tử nhưng vẫn chiếm không gian, còn `display: none;` ẩn phần tử và không chiếm không gian. `visibility: hidden;` chỉ áp dụng cho văn bản, còn `display: none;` áp dụng cho mọi loại phần tử. 26 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 26: Trong mô hình hộp CSS, thành phần nào tạo ra khoảng trống *bên ngoài* đường viền của phần tử, tách nó ra khỏi các phần tử lân cận khác? Content Padding Border Margin 27 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 27: Để loại bỏ khoảng margin mặc định mà trình duyệt thường áp dụng cho phần tử ``, bạn sẽ viết quy tắc CSS nào? body { margin: 0; } body { padding: 0; } body { border: none; } html, body { margin: 0; } 28 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 28: Viết quy tắc CSS sử dụng bộ chọn class "highlight-box" để thêm một đường viền nét liền màu xanh lá cây, dày 1px cho tất cả các phần tử thuộc class này. #highlight-box { border: 1px solid green; } .highlight-box { border: 1px solid green; } highlight-box { border: 1px solid green; } .highlight-box { border-color: green; border-width: 1px; border-style: solid; } 29 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 29: Nếu một phần tử `div` bên trong một phần tử cha có chiều rộng 500px được thiết lập `width: 50%;`, chiều rộng thực tế của phần tử `div` này sẽ là bao nhiêu? 50px 50% 500px 250px 30 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 07 Câu 30: Trong mô hình hộp CSS, thuộc tính `border` nằm ở vị trí nào? Giữa Margin và cạnh của phần tử. Giữa Padding và Margin. Giữa Content và Padding. Bên ngoài Margin. 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é!!! Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 08 Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 08 được xây dựng với nhiều câu hỏi chất lượng, sát với nội dung chương trình học, giúp bạn dễ dàng ôn tập và kiểm tra kiến thức hiệu quả. Hãy cùng bắt đầu làm bài tập trắc nghiệm ngay để nâng cao hiểu biết và chuẩn bị tốt cho kỳ thi sắp tới! Câu 1: Trong CSS, thuộc tính nào sau đây được sử dụng để xác định cách một phần tử (element) được hiển thị trên trang web, ví dụ như hiển thị dạng khối (block), nội tuyến (inline) hay ẩn đi? A. display B. visibility C. position D. float Câu 2: Bạn có một đoạn văn bản được bọc bởi thẻ ``. Theo mặc định, thẻ `` là loại phần tử nào và hành vi hiển thị của nó ra sao? A. Phần tử khối (block), luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng. B. Phần tử khối (block), chỉ chiếm không gian vừa đủ nội dung và cho phép các phần tử khác trên cùng dòng. C. Phần tử nội tuyến (inline), không bắt đầu trên dòng mới và chỉ chiếm không gian vừa đủ nội dung. D. Phần tử nội tuyến (inline), luôn bắt đầu trên một dòng mới nhưng chỉ chiếm không gian vừa đủ nội dung. Câu 3: Khi áp dụng thuộc tính `display: block;` cho một phần tử nội tuyến (inline element) như `` hoặc ``, hành vi hiển thị của phần tử đó sẽ thay đổi như thế nào? A. Phần tử sẽ bị ẩn đi. B. Phần tử sẽ nằm trên cùng một dòng với các phần tử khác. C. Phần tử sẽ chiếm không gian vừa đủ nội dung nhưng vẫn bắt đầu trên dòng mới. D. Phần tử sẽ bắt đầu trên một dòng mới và mở rộng để chiếm toàn bộ chiều rộng của phần tử chứa nó. Câu 4: Bạn muốn hiển thị một danh sách các hình ảnh nhỏ cạnh nhau trên cùng một dòng, nhưng vẫn muốn có thể đặt chiều rộng và chiều cao cố định cho mỗi hình ảnh. Bạn nên sử dụng giá trị nào cho thuộc tính `display` của các thẻ ``? A. block B. inline-block C. inline D. none Câu 5: Mô hình hộp (Box Model) trong CSS mô tả cấu trúc của một phần tử HTML bao gồm các lớp nào từ trong ra ngoài? A. Content, Padding, Border, Margin B. Padding, Content, Border, Margin C. Margin, Border, Padding, Content D. Content, Border, Padding, Margin Câu 6: Thuộc tính CSS nào tạo ra khoảng trống bên trong đường viền (border) của một phần tử, giữa nội dung và đường viền? A. margin B. border C. padding D. outline Câu 7: Thuộc tính CSS nào tạo ra khoảng trống bên ngoài đường viền (border) của một phần tử, giữa phần tử đó và các phần tử lân cận? A. margin B. padding C. border D. space Câu 8: Bạn có một thẻ `div` với CSS sau: ```css div { width: 200px; padding: 10px; border: 5px solid black; margin: 15px; } ``` Nếu bạn đo tổng chiều rộng mà thẻ `div` này chiếm trên trang (bao gồm cả margin), kết quả sẽ là bao nhiêu? A. 200px B. 220px C. 230px D. 260px Câu 9: Thuộc tính `border` trong CSS là thuộc tính viết tắt (shorthand) cho các thuộc tính nào sau đây? A. border-width, border-radius, border-color B. border-top, border-bottom, border-left, border-right C. border-width, border-style, border-color D. border-spacing, border-collapse, border-color Câu 10: Bạn muốn tạo một đường viền chỉ ở phía dưới của một phần tử. Thuộc tính CSS nào sau đây là phù hợp nhất? A. border-top B. border-bottom C. border-left D. border-right Câu 11: Sự khác biệt chính giữa `padding` và `margin` là gì? A. Padding là khoảng trống bên trong đường viền, Margin là khoảng trống bên ngoài đường viền. B. Padding chỉ áp dụng cho phần tử nội tuyến, Margin chỉ áp dụng cho phần tử khối. C. Padding có tính kế thừa, Margin thì không. D. Padding xác định kích thước nội dung, Margin xác định kích thước đường viền. Câu 12: Theo mặc định, thuộc tính `width` và `height` có thể áp dụng trực tiếp và có hiệu quả cho loại phần tử nào? A. Phần tử khối (block) B. Phần tử nội tuyến (inline) C. Tất cả các phần tử HTML D. Chỉ các phần tử có ID Câu 13: Bạn muốn đặt chiều rộng của một thẻ `div` bằng 50% chiều rộng của phần tử chứa nó. Cú pháp CSS nào sau đây là đúng? A. width = 50%; B. width: 50px; C. width: 0.5; D. width: 50%; Câu 14: Khi hai phần tử khối nằm cạnh nhau theo chiều dọc và cả hai đều có `margin-bottom` và `margin-top` tương ứng, hiện tượng gì có thể xảy ra với khoảng cách giữa chúng? A. Khoảng cách giữa chúng sẽ bằng tổng của hai giá trị margin. B. Khoảng cách giữa chúng sẽ bằng hiệu của hai giá trị margin. C. Khoảng cách giữa chúng sẽ bằng giá trị margin lớn hơn. D. Không có khoảng cách nào được tạo ra. Câu 15: Bạn có một hình ảnh (``) và muốn nó không hiển thị trên trang web nhưng vẫn giữ nguyên không gian mà nó lẽ ra sẽ chiếm dụng. Bạn nên sử dụng thuộc tính CSS nào? A. display: none; B. visibility: hidden; C. opacity: 0; D. height: 0; width: 0; Câu 16: Thuộc tính `box-sizing: border-box;` trong CSS ảnh hưởng đến cách tính toán kích thước của phần tử như thế nào khi bạn thiết lập `width` và `height`? A. `width` và `height` sẽ bao gồm cả padding và border. B. `width` và `height` chỉ áp dụng cho phần nội dung (content). C. `width` và `height` sẽ bao gồm cả margin. D. Thuộc tính này không ảnh hưởng đến cách tính toán kích thước. Câu 17: Giả sử bạn có một thẻ `p` và muốn đặt viền nét đứt màu xanh dày 2px xung quanh nó. Cú pháp CSS nào sau đây là đúng? A. border: dashed 2px blue; B. border: blue dashed 2px; C. border: 2px blue dashed; D. border: 2px dashed blue; Câu 18: Thuộc tính `padding: 10px 20px;` khi áp dụng cho một phần tử sẽ tạo ra khoảng đệm như thế nào? A. 10px cho top và bottom, 20px cho left và right. B. 10px cho top và bottom, 20px cho left và right. C. 10px cho top và left, 20px cho bottom và right. D. 10px cho tất cả các cạnh, sau đó ghi đè 20px cho left và right. Câu 19: Bạn muốn đặt lề (margin) chỉ ở phía trên và phía dưới của một phần tử, mỗi bên 15px, và không có lề ở hai bên trái phải. Cú pháp CSS nào sau đây là đúng? A. margin-top: 15px; margin-bottom: 15px; B. margin: 15px; C. margin: 15px 0; D. margin-left: 0; margin-right: 0; margin-top: 15px; margin-bottom: 15px; Câu 20: Trong CSS, thuộc tính nào được sử dụng để làm tròn các góc của đường viền (border) của một phần tử? A. border-radius B. corner-style C. border-style D. outline-radius Câu 21: Bạn có một phần tử `div` với nội dung dài hơn kích thước cố định bạn đã đặt cho nó (`width` và `height`). Mặc định, nội dung thừa sẽ hiển thị như thế nào? A. Nội dung sẽ bị cắt bớt và ẩn đi. B. Nội dung sẽ tràn ra ngoài phạm vi của phần tử. C. Thanh cuộn sẽ tự động xuất hiện. D. Kích thước của phần tử sẽ tự động điều chỉnh để chứa hết nội dung. Câu 22: Để thanh cuộn (scrollbar) chỉ xuất hiện khi nội dung của một phần tử bị tràn ra ngoài (cả theo chiều ngang và dọc), bạn nên đặt thuộc tính `overflow` với giá trị nào? A. overflow: visible; B. overflow: hidden; C. overflow: auto; D. overflow: scroll; Câu 23: Bạn đang thiết kế một layout và muốn một khối nội dung (`div`) có chiều rộng tối đa là 800px nhưng vẫn co giãn theo cửa sổ trình duyệt khi cửa sổ nhỏ hơn 800px. Thuộc tính CSS nào sau đây là phù hợp nhất để đặt cho `div` đó? A. max-width: 800px; B. width: 800px; C. min-width: 800px; D. width: 100%; max-width: 800px; Câu 24: Khi sử dụng thuộc tính `display: none;`, điều gì xảy ra với không gian mà phần tử đó lẽ ra chiếm giữ trên layout? A. Không gian đó vẫn được giữ nguyên. B. Không gian đó được thay thế bằng một khoảng trắng. C. Chỉ chiều cao của phần tử bị loại bỏ, chiều rộng vẫn giữ nguyên. D. Phần tử bị xóa hoàn toàn khỏi luồng tài liệu và không chiếm bất kỳ không gian nào. Câu 25: Bạn có một đoạn văn bản trong thẻ ` ` và muốn thêm một khoảng đệm 10px ở phía trên và dưới, 20px ở phía trái và phải. CSS nào sau đây thực hiện điều đó một cách hiệu quả? A. padding: 10px 20px; B. padding: 10px 20px 10px 20px; C. padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; D. Tất cả các đáp án trên đều đúng. Câu 26: Trong Box Model, nếu bạn thiết lập `width: 300px; padding: 20px; border: 5px solid black;` và sử dụng `box-sizing: content-box;` (mặc định), tổng chiều rộng của phần tử sẽ là bao nhiêu? A. 300px B. 320px C. 340px D. 350px Câu 27: Bạn muốn tạo một đường viền chỉ có ở phía trên và phía dưới của một phần tử, mỗi bên có kiểu "dotted" và màu "red". CSS nào sau đây là phù hợp? A. border-top: 1px dotted red; border-bottom: 1px dotted red; B. border-left: dotted red; border-right: dotted red; C. border-style: dotted; border-color: red; D. border: dotted red; Câu 28: Khi nào thì nên sử dụng `class` thay vì `id` để định dạng khung cho các phần tử HTML? A. Khi muốn định dạng một phần tử duy nhất trên trang. B. Khi cần xác định một điểm neo cho liên kết. 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. D. Khi tên bộ chọn bắt đầu bằng số. Câu 29: Một thẻ `` theo mặc định là loại phần tử nào và điều này ảnh hưởng thế nào đến việc đặt `margin-top` và `margin-bottom` cho nó? A. Phần tử khối (block), `margin-top` và `margin-bottom` sẽ có hiệu quả. B. Phần tử nội tuyến (inline), `margin-top` và `margin-bottom` sẽ không có hiệu quả theo mặc định. C. Phần tử nội tuyến (inline), `margin-top` và `margin-bottom` sẽ có hiệu quả như phần tử khối. D. Phần tử khối (block), `margin-top` và `margin-bottom` sẽ không có hiệu quả. Câu 30: Bạn có một `div` chứa một đoạn văn bản. Bạn muốn đoạn văn bản này có khoảng đệm 15px so với viền của `div` chứa nó. Thuộc tính nào nên được áp dụng cho `div` để đạt được điều này? A. padding: 15px; B. margin: 15px; C. border: 15px; D. text-indent: 15px; 1 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 1: Trong CSS, thuộc tính nào sau đây được sử dụng để xác định cách một phần tử (element) được hiển thị trên trang web, ví dụ như hiển thị dạng khối (block), nội tuyến (inline) hay ẩn đi? display visibility position float Câu hỏi kiểm tra kiến thức về thuộc tính CSS cơ bản điều khiển hành vi hiển thị của phần tử, đó là thuộc tính `display`. Các lựa chọn khác liên quan đến kích thước, màu sắc hoặc bố cục cụ thể. 2 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 2: Bạn có một đoạn văn bản được bọc bởi thẻ ``. Theo mặc định, thẻ `` là loại phần tử nào và hành vi hiển thị của nó ra sao? Phần tử khối (block), luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng. Phần tử khối (block), chỉ chiếm không gian vừa đủ nội dung và cho phép các phần tử khác trên cùng dòng. Phần tử nội tuyến (inline), không bắt đầu trên dòng mới và chỉ chiếm không gian vừa đủ nội dung. Phần tử nội tuyến (inline), luôn bắt đầu trên một dòng mới nhưng chỉ chiếm không gian vừa đủ nội dung. Câu hỏi kiểm tra kiến thức về các loại phần tử HTML mặc định. Thẻ `` là phần tử nội tuyến (inline element), không tự động xuống dòng và chỉ chiếm không gian vừa đủ nội dung. 3 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 3: Khi áp dụng thuộc tính `display: block;` cho một phần tử nội tuyến (inline element) như `` hoặc ``, hành vi hiển thị của phần tử đó sẽ thay đổi như thế nào? Phần tử sẽ bị ẩn đi. Phần tử sẽ nằm trên cùng một dòng với các phần tử khác. Phần tử sẽ chiếm không gian vừa đủ nội dung nhưng vẫn bắt đầu trên dòng mới. Phần tử sẽ bắt đầu trên một dòng mới và mở rộng để chiếm toàn bộ chiều rộng của phần tử chứa nó. Câu hỏi kiểm tra khả năng áp dụng và hiểu tác dụng của thuộc tính `display`. Khi đặt `display: block;`, phần tử sẽ cư xử như một phần tử khối: bắt đầu trên dòng mới và chiếm toàn bộ chiều rộng có sẵn. 4 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 4: Bạn muốn hiển thị một danh sách các hình ảnh nhỏ cạnh nhau trên cùng một dòng, nhưng vẫn muốn có thể đặt chiều rộng và chiều cao cố định cho mỗi hình ảnh. Bạn nên sử dụng giá trị nào cho thuộc tính `display` của các thẻ ``? block inline-block inline none Câu hỏi yêu cầu áp dụng kiến thức về các giá trị `display`. `inline-block` cho phép phần tử nằm cạnh nhau như `inline` nhưng vẫn cho phép thiết lập kích thước như `block`. 5 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 5: Mô hình hộp (Box Model) trong CSS mô tả cấu trúc của một phần tử HTML bao gồm các lớp nào từ trong ra ngoài? Content, Padding, Border, Margin Padding, Content, Border, Margin Margin, Border, Padding, Content Content, Border, Padding, Margin Câu hỏi kiểm tra kiến thức về cấu trúc của Box Model. Thứ tự đúng từ trong ra ngoài là: Nội dung (Content), Đệm (Padding), Viền (Border), Lề (Margin). 6 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 6: Thuộc tính CSS nào tạo ra khoảng trống bên trong đường viền (border) của một phần tử, giữa nội dung và đường viền? margin border padding outline Câu hỏi kiểm tra kiến thức về Box Model. `padding` là khoảng trống giữa nội dung và đường viền. 7 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 7: Thuộc tính CSS nào tạo ra khoảng trống bên ngoài đường viền (border) của một phần tử, giữa phần tử đó và các phần tử lân cận? margin padding border space Câu hỏi kiểm tra kiến thức về Box Model. `margin` là khoảng trống bên ngoài đường viền, tạo khoảng cách giữa các phần tử. 8 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 8: Bạn có một thẻ `div` với CSS sau: ```css div { width: 200px; padding: 10px; border: 5px solid black; margin: 15px; } ``` Nếu bạn đo tổng chiều rộng mà thẻ `div` này chiếm trên trang (bao gồm cả margin), kết quả sẽ là bao nhiêu? 200px 220px 230px 260px Câu hỏi yêu cầu áp dụng kiến thức về Box Model để tính tổng kích thước. Tổng chiều rộng = width + 2*padding-left + 2*padding-right + 2*border-left + 2*border-right + 2*margin-left + 2*margin-right. Ở đây: 200 + 2*10 + 2*5 + 2*15 = 200 + 20 + 10 + 30 = 260px. 9 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 9: Thuộc tính `border` trong CSS là thuộc tính viết tắt (shorthand) cho các thuộc tính nào sau đây? border-width, border-radius, border-color border-top, border-bottom, border-left, border-right border-width, border-style, border-color border-spacing, border-collapse, border-color Câu hỏi kiểm tra kiến thức về cú pháp viết tắt trong CSS. Thuộc tính `border` gộp chung `border-width`, `border-style`, và `border-color`. 10 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 10: Bạn muốn tạo một đường viền chỉ ở phía dưới của một phần tử. Thuộc tính CSS nào sau đây là phù hợp nhất? border-top border-bottom border-left border-right Câu hỏi kiểm tra kiến thức về các thuộc tính border cụ thể cho từng cạnh. `border-bottom` cho phép định dạng viền riêng cho cạnh dưới. 11 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 11: Sự khác biệt chính giữa `padding` và `margin` là gì? Padding là khoảng trống bên trong đường viền, Margin là khoảng trống bên ngoài đường viền. Padding chỉ áp dụng cho phần tử nội tuyến, Margin chỉ áp dụng cho phần tử khối. Padding có tính kế thừa, Margin thì không. Padding xác định kích thước nội dung, Margin xác định kích thước đường viền. Câu hỏi yêu cầu phân biệt hai khái niệm cốt lõi trong Box Model. Padding là khoảng trống bên trong viền (giữa nội dung và viền), còn margin là khoảng trống bên ngoài viền (giữa viền và các phần tử khác). 12 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 12: Theo mặc định, thuộc tính `width` và `height` có thể áp dụng trực tiếp và có hiệu quả cho loại phần tử nào? Phần tử khối (block) Phần tử nội tuyến (inline) Tất cả các phần tử HTML Chỉ các phần tử có ID Câu hỏi kiểm tra khả năng áp dụng thuộc tính kích thước cho các loại phần tử. Theo mặc định, `width` và `height` chỉ có hiệu quả với phần tử khối (`block`) hoặc phần tử được đặt `display: inline-block;` hoặc `display: block;`. Phần tử nội tuyến (`inline`) sẽ bỏ qua các thuộc tính này. 13 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 13: Bạn muốn đặt chiều rộng của một thẻ `div` bằng 50% chiều rộng của phần tử chứa nó. Cú pháp CSS nào sau đây là đúng? width = 50%; width: 50px; width: 0.5; width: 50%; Câu hỏi kiểm tra cú pháp và c??ch sử dụng đơn vị phần trăm cho thuộc tính `width`. `width: 50%;` là cú pháp đúng. 14 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 14: Khi hai phần tử khối nằm cạnh nhau theo chiều dọc và cả hai đều có `margin-bottom` và `margin-top` tương ứng, hiện tượng gì có thể xảy ra với khoảng cách giữa chúng? Khoảng cách giữa chúng sẽ bằng tổng của hai giá trị margin. Khoảng cách giữa chúng sẽ bằng hiệu của hai giá trị margin. Khoảng cách giữa chúng sẽ bằng giá trị margin lớn hơn. Không có khoảng cách nào được tạo ra. Câu hỏi kiểm tra kiến thức về hiện tượng 'margin collapsing' (gộp lề) trong CSS. Lề trên của phần tử dưới và lề dưới của phần tử trên sẽ gộp lại, và khoảng cách thực tế giữa chúng sẽ bằng giá trị lề lớn hơn. 15 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 15: Bạn có một hình ảnh (``) và muốn nó không hiển thị trên trang web nhưng vẫn giữ nguyên không gian mà nó lẽ ra sẽ chiếm dụng. Bạn nên sử dụng thuộc tính CSS nào? display: none; visibility: hidden; opacity: 0; height: 0; width: 0; Câu hỏi phân biệt giữa `display: none;` và `visibility: hidden;`. `display: none;` ẩn phần tử và không giữ không gian. `visibility: hidden;` ẩn phần tử nhưng vẫn giữ không gian. 16 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 16: Thuộc tính `box-sizing: border-box;` trong CSS ảnh hưởng đến cách tính toán kích thước của phần tử như thế nào khi bạn thiết lập `width` và `height`? `width` và `height` sẽ bao gồm cả padding và border. `width` và `height` chỉ áp dụng cho phần nội dung (content). `width` và `height` sẽ bao gồm cả margin. Thuộc tính này không ảnh hưởng đến cách tính toán kích thước. Câu hỏi kiểm tra kiến thức về `box-sizing`. Với `border-box`, `width` và `height` sẽ bao gồm cả padding và border, giúp việc tính toán kích thước tổng thể dễ dàng hơn. 17 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 17: Giả sử bạn có một thẻ `p` và muốn đặt viền nét đứt màu xanh dày 2px xung quanh nó. Cú pháp CSS nào sau đây là đúng? border: dashed 2px blue; border: blue dashed 2px; border: 2px blue dashed; border: 2px dashed blue; Câu hỏi kiểm tra cú pháp của thuộc tính `border` viết tắt. Cú pháp đúng là `border: [độ dày] [kiểu] [màu];`. 18 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 18: Thuộc tính `padding: 10px 20px;` khi áp dụng cho một phần tử sẽ tạo ra khoảng đệm như thế nào? 10px cho top và bottom, 20px cho left và right. 10px cho top và bottom, 20px cho left và right. 10px cho top và left, 20px cho bottom và right. 10px cho tất cả các cạnh, sau đó ghi đè 20px cho left và right. Câu hỏi kiểm tra cách sử dụng giá trị viết tắt cho `padding`. Hai giá trị: giá trị đầu cho top/bottom, giá trị thứ hai cho left/right. 19 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 19: Bạn muốn đặt lề (margin) chỉ ở phía trên và phía dưới của một phần tử, mỗi bên 15px, và không có lề ở hai bên trái phải. Cú pháp CSS nào sau đây là đúng? margin-top: 15px; margin-bottom: 15px; margin: 15px; margin: 15px 0; margin-left: 0; margin-right: 0; margin-top: 15px; margin-bottom: 15px; Câu hỏi kiểm tra cú pháp viết tắt của `margin`. Cú pháp 4 giá trị: top, right, bottom, left. Cú pháp 2 giá trị: top/bottom, left/right. Để top/bottom là 15px và left/right là 0, dùng `margin: 15px 0;`. 20 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 20: Trong CSS, thuộc tính nào được sử dụng để làm tròn các góc của đường viền (border) của một phần tử? border-radius corner-style border-style outline-radius Câu hỏi kiểm tra kiến thức về thuộc tính làm tròn góc viền. `border-radius` được sử dụng cho mục đích này. 21 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 21: Bạn có một phần tử `div` với nội dung dài hơn kích thước cố định bạn đã đặt cho nó (`width` và `height`). Mặc định, nội dung thừa sẽ hiển thị như thế nào? Nội dung sẽ bị cắt bớt và ẩn đi. Nội dung sẽ tràn ra ngoài phạm vi của phần tử. Thanh cuộn sẽ tự động xuất hiện. Kích thước của phần tử sẽ tự động điều chỉnh để chứa hết nội dung. Câu hỏi kiểm tra hành vi mặc định khi nội dung tràn ra khỏi phần tử. Mặc định, nội dung thừa sẽ 'tràn' ra ngoài (`overflow: visible;`). 22 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 22: Để thanh cuộn (scrollbar) chỉ xuất hiện khi nội dung của một phần tử bị tràn ra ngoài (cả theo chiều ngang và dọc), bạn nên đặt thuộc tính `overflow` với giá trị nào? overflow: visible; overflow: hidden; overflow: auto; overflow: scroll; Câu hỏi kiểm tra cách sử dụng thuộc tính `overflow` để kiểm soát nội dung tràn. `overflow: auto;` sẽ hiển thị thanh cuộn khi cần thiết. 23 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 23: Bạn đang thiết kế một layout và muốn một khối nội dung (`div`) có chiều rộng tối đa là 800px nhưng vẫn co giãn theo cửa sổ trình duyệt khi cửa sổ nhỏ hơn 800px. Thuộc tính CSS nào sau đây là phù hợp nhất để đặt cho `div` đó? max-width: 800px; width: 800px; min-width: 800px; width: 100%; max-width: 800px; Câu hỏi kiểm tra cách sử dụng thuộc tính `max-width`. `max-width` giới hạn kích thước tối đa nhưng cho phép phần tử co lại. `width` cố định kích thước. 24 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 24: Khi sử dụng thuộc tính `display: none;`, điều gì xảy ra với không gian mà phần tử đó lẽ ra chiếm giữ trên layout? Không gian đó vẫn được giữ nguyên. Không gian đó được thay thế bằng một khoảng trắng. Chỉ chiều cao của phần tử bị loại bỏ, chiều rộng vẫn giữ nguyên. Phần tử bị xóa hoàn toàn khỏi luồng tài liệu và không chiếm bất kỳ không gian nào. Câu hỏi phân biệt `display: none;` và `visibility: hidden;`. `display: none;` xóa phần tử khỏi luồng tài liệu, không giữ không gian. 25 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 25: Bạn có một đoạn văn bản trong thẻ ` ` và muốn thêm một khoảng đệm 10px ở phía trên và dưới, 20px ở phía trái và phải. CSS nào sau đây thực hiện điều đó một cách hiệu quả? padding: 10px 20px; padding: 10px 20px 10px 20px; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; Tất cả các đáp án trên đều đúng. Câu hỏi kiểm tra cách sử dụng thuộc tính `padding` với 4 giá trị hoặc 2 giá trị. `padding: 10px 20px;` là cách viết tắt đúng cho top/bottom 10px và left/right 20px. 26 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 26: Trong Box Model, nếu bạn thiết lập `width: 300px; padding: 20px; border: 5px solid black;` và sử dụng `box-sizing: content-box;` (mặc định), tổng chiều rộng của phần tử sẽ là bao nhiêu? 300px 320px 340px 350px Câu hỏi kiểm tra tính toán kích thước với `box-sizing: content-box;`. Với `content-box`, `width` chỉ áp dụng cho nội dung. Tổng chiều rộng = width + 2*padding + 2*border. Tính toán: 300 + 2*20 + 2*5 = 300 + 40 + 10 = 350px. 27 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 27: Bạn muốn tạo một đường viền chỉ có ở phía trên và phía dưới của một phần tử, mỗi bên có kiểu 'dotted' và màu 'red'. CSS nào sau đây là phù hợp? border-top: 1px dotted red; border-bottom: 1px dotted red; border-left: dotted red; border-right: dotted red; border-style: dotted; border-color: red; border: dotted red; Câu hỏi kiểm tra cách áp dụng border cho từng cạnh. Cần sử dụng `border-top-style` và `border-bottom-style` cùng với `border-top-color` và `border-bottom-color` (hoặc viết tắt `border-top` và `border-bottom`). Lựa chọn 1 sử dụng cú pháp đúng cho từng cạnh. 28 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 28: Khi nào thì nên sử dụng `class` thay vì `id` để định dạng khung cho các phần tử HTML? Khi muốn định dạng một phần tử duy nhất trên trang. Khi cần xác định một điểm neo cho liên kết. Khi muốn áp dụng cùng một kiểu định dạng cho nhiều phần tử khác nhau. Khi tên bộ chọn bắt đầu bằng số. Câu hỏi kiểm tra hiểu biết về sự khác biệt và mục đích sử dụng của ID và Class. Class dùng để nhóm các phần tử có cùng kiểu định dạng, trong khi ID chỉ dùng cho một phần tử duy nhất. 29 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 29: Một thẻ `` theo mặc định là loại phần tử nào và điều này ảnh hưởng thế nào đến việc đặt `margin-top` và `margin-bottom` cho nó? Phần tử khối (block), `margin-top` và `margin-bottom` sẽ có hiệu quả. Phần tử nội tuyến (inline), `margin-top` và `margin-bottom` sẽ không có hiệu quả theo mặc định. Phần tử nội tuyến (inline), `margin-top` và `margin-bottom` sẽ có hiệu quả như phần tử khối. Phần tử khối (block), `margin-top` và `margin-bottom` sẽ không có hiệu quả. Câu hỏi kiểm tra loại phần tử mặc định của `` và ảnh hưởng của nó đến margin. `` là phần tử nội tuyến (inline). Margin trên/dưới không có hiệu quả với phần tử inline theo mặc định. 30 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 08 Câu 30: Bạn có một `div` chứa một đoạn văn bản. Bạn muốn đoạn văn bản này có khoảng đệm 15px so với viền của `div` chứa nó. Thuộc tính nào nên được áp dụng cho `div` để đạt được điều này? padding: 15px; margin: 15px; border: 15px; text-indent: 15px; Câu hỏi yêu cầu áp dụng kiến thức về `padding`. Khoảng trống giữa nội dung (đoạn văn bản) và viền của phần tử chứa (`div`) được tạo ra bằng cách đặt `padding` cho phần tử chứa. 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é!!! Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 09 Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 09 được xây dựng với nhiều câu hỏi chất lượng, sát với nội dung chương trình học, giúp bạn dễ dàng ôn tập và kiểm tra kiến thức hiệu quả. Hãy cùng bắt đầu làm bài tập trắc nghiệm ngay để nâng cao hiểu biết và chuẩn bị tốt cho kỳ thi sắp tới! Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào đại diện cho khoảng trống giữa nội dung của phần tử và đường viền của nó? A. Margin B. Padding C. Border D. Content Câu 2: Phần tử khối (block-level element) trong HTML/CSS có đặc điểm hiển thị mặc định như thế nào? A. Chỉ chiếm không gian vừa đủ cho nội dung và nằm trên cùng một dòng với các phần tử khác. B. Không thể thiết lập thuộc tính `width` và `height` trực tiếp. C. Luôn bắt đầu trên một dòng mới và kéo dài hết chiều rộng của phần tử cha. D. Mặc định ẩn đi trên trang web nếu không có nội dung. Câu 3: Thuộc tính CSS `display: inline;` được sử dụng để làm gì? A. Hiển thị phần tử như một phần tử nội tuyến, không ngắt dòng. B. Ẩn hoàn toàn phần tử khỏi hiển thị và không chiếm không gian. C. Hiển thị phần tử như một phần tử khối, luôn ngắt dòng. D. Hiển thị phần tử vừa như khối vừa như nội tuyến, cho phép đặt kích thước. Câu 4: Giả sử bạn có một đoạn văn ` ` và muốn thêm một đường viền màu xanh lá cây dày 2px xung quanh nó. Thuộc tính CSS nào sau đây là phù hợp nhất để thiết lập đường viền? A. outline B. box-shadow C. border-radius D. border Câu 5: Bạn muốn tạo khoảng trống bên ngoài đường viền của một phần tử để tách nó ra khỏi các phần tử xung quanh. Bạn nên sử dụng thuộc tính CSS nào? A. margin B. padding C. border D. outline Câu 6: Cho đoạn mã HTML sau: ` Nội dung `. Để áp dụng kiểu cho phần tử `div` này bằng bộ chọn lớp (class selector) trong CSS, bạn sẽ viết như thế nào? A. #hop-noi-dung { ... } B. div.hop-noi-dung { ... } C. .hop-noi-dung { ... } D. class="hop-noi-dung" { ... } Câu 7: Thuộc tính CSS `display: none;` khác với `visibility: hidden;` ở điểm nào quan trọng nhất liên quan đến không gian hiển thị? A. `display: none;` chỉ ẩn nội dung, còn `visibility: hidden;` ẩn cả nội dung và đường viền. B. `display: none;` làm phần tử không chiếm không gian, còn `visibility: hidden;` vẫn giữ không gian của phần tử. C. `display: none;` chỉ áp dụng cho phần tử khối, còn `visibility: hidden;` áp dụng cho cả khối và nội tuyến. D. `visibility: hidden;` có thể làm phần tử hiện lại bằng JavaScript, còn `display: none;` thì không thể. Câu 8: Bạn có hai phần tử `div` và muốn chúng hiển thị cạnh nhau trên cùng một dòng, đồng thời vẫn có thể thiết lập chiều rộng và chiều cao cho chúng. Loại hiển thị (`display`) nào là lựa chọn phù hợp nhất? A. block B. inline C. none D. inline-block Câu 9: Cho một phần tử `div` với CSS sau: `width: 200px; padding: 20px; border: 1px solid black; margin: 10px;`. Tổng chiều rộng thực tế mà phần tử này chiếm trên trang web (bao gồm cả lề) là bao nhiêu? A. 200px B. 262px C. 242px D. 252px Câu 10: Mã định danh (ID) trong HTML/CSS khác với lớp (Class) chủ yếu ở điểm nào? A. ID chỉ áp dụng cho phần tử khối, còn Class áp dụng cho cả khối và nội tuyến. B. Tên ID có thể chứa dấu cách, còn tên Class thì không. C. Mỗi phần tử chỉ nên có một ID duy nhất, còn có thể có nhiều Class. D. Bộ chọn ID dùng dấu chấm (.), còn bộ chọn Class dùng dấu thăng (#). Câu 11: Khi đặt tên cho ID và Class trong HTML/CSS, quy tắc nào sau đây là KHÔNG đúng? A. Tên không được chứa dấu cách. B. Tên có thể bắt đầu bằng một chữ số. C. Tên phân biệt chữ hoa và chữ thường (case-sensitive). D. Tên có thể chứa dấu gạch ngang (-) và dấu gạch dưới (_). Câu 12: Bạn muốn áp dụng một kiểu CSS cụ thể (ví dụ: `color: red;`) chỉ cho duy nhất một phần tử ` ` trong toàn bộ trang web của mình. Bộ chọn nào là phù hợp và hiệu quả nhất cho mục đích này? A. Bộ chọn ID B. Bộ chọn Class C. Bộ chọn phần tử (ví dụ: `p`) D. Bộ chọn Universal (*) Câu 13: Cho đoạn CSS sau: `.hop { padding: 10px 20px 5px 15px; }`. Khoảng đệm (padding) sẽ được áp dụng theo thứ tự nào? A. Trên, dưới, trái, phải. B. Phải, trái, trên, dưới. C. Trên, phải, dưới, trái. D. Trái, phải, trên, dưới. Câu 14: Thuộc tính `margin: auto;` thường được sử dụng kết hợp với `width` cố định cho phần tử khối (`display: block;`) để làm gì? A. Tự động điều chỉnh kích thước phần tử phù hợp với nội dung. B. Căn giữa phần tử khối theo chiều ngang trong phần tử chứa nó. C. Tạo khoảng trống ngẫu nhiên xung quanh phần tử. D. Làm cho phần tử tràn ra ngoài phần tử chứa nó. Câu 15: Phần tử nội tuyến (inline element) KHÔNG thể thiết lập trực tiếp hai thuộc tính CSS nào sau đây một cách hiệu quả? A. width và height B. color và font-size C. margin và padding D. border-style và border-color Câu 16: Bạn có một phần tử `span` và muốn nó có chiều rộng là 100px và chiều cao là 50px. Mặc định, điều này sẽ không hoạt động vì `span` là phần tử nội tuyến. Bạn cần thêm thuộc tính CSS nào để đạt được yêu cầu này? A. position: absolute; B. float: left; C. display: inline-block; D. overflow: hidden; Câu 17: Trong mô hình hộp, nếu thuộc tính `box-sizing` được đặt là `border-box`, điều gì sẽ xảy ra khi bạn thiết lập `width` và `height` cho một phần tử? A. `width` và `height` sẽ bao gồm cả padding và border. B. `width` và `height` chỉ áp dụng cho nội dung (content). C. Padding và border sẽ được thêm vào kích thước đã thiết lập, làm phần tử lớn hơn. D. Thuộc tính `margin` sẽ bị bỏ qua. Câu 18: Bạn đang thiết kế bố cục và muốn một khối nội dung có đường viền màu xám và khoảng đệm 15px bên trong đường viền đó. Đoạn CSS nào sau đây thực hiện đúng yêu cầu này? A. `.khoi { margin: 15px; border: 1px solid gray; }` B. `.khoi { border: 15px; padding: 1px solid gray; }` C. `.khoi { padding: 15px; margin: 1px solid gray; }` D. `.khoi { padding: 15px; border: 1px solid gray; }` Câu 19: Cho đoạn HTML ` Chào mừng! `. Để áp dụng kiểu chữ in đậm và màu xanh cho đoạn văn này sử dụng bộ chọn ID, bạn sẽ viết CSS như thế nào? A. `.doan-mo-dau { font-weight: bold; color: blue; }` B. `#doan-mo-dau { font-weight: bold; color: blue; }` C. `p#doan-mo-dau { font-weight: bold; color: blue; }` D. `id="doan-mo-dau" { font-weight: bold; color: blue; }` Câu 20: Thuộc tính CSS nào được sử dụng để thiết lập độ dày, kiểu dáng và màu sắc của đường viền xung quanh một phần tử? A. outline B. box-shadow C. border D. text-decoration Câu 21: Giả sử bạn có hai phần tử khối (`div`) nằm cạnh nhau trong mã HTML nhưng chúng không tự động cách nhau. Bạn muốn thêm khoảng cách 20px giữa chúng. Cách đơn giản nhất để làm điều này là sử dụng thuộc tính nào? A. margin B. padding C. border D. width Câu 22: Cho đoạn CSS: `.hop { border-top: 2px solid red; border-bottom: 1px dashed blue; }`. Điều này sẽ tạo ra đường viền như thế nào cho phần tử có lớp `hop`? A. Đường viền liền nét màu đỏ 2px ở tất cả các cạnh. B. Đường viền nét đứt màu xanh 1px ở tất cả các cạnh. C. Đường viền liền nét màu đỏ 2px ở trên và nét đứt màu xanh 1px ở trái và phải. D. Đường viền liền nét màu đỏ 2px ở trên và nét đứt màu xanh 1px ở dưới. Câu 23: Bạn muốn áp dụng cùng một tập hợp các kiểu CSS (ví dụ: màu nền, kiểu chữ) cho nhiều phần tử khác nhau trên trang web mà không cần lặp lại mã CSS cho từng phần tử. Phương pháp nào sau đây là hiệu quả nhất? A. Sử dụng bộ chọn ID cho từng phần tử. B. Gán cùng tên lớp (Class) cho các phần tử và sử dụng bộ chọn Class trong CSS. C. Sử dụng bộ chọn phần tử chung (ví dụ: `*`). D. Lặp lại cùng một khối CSS cho từng phần tử riêng lẻ. Câu 24: Xét một phần tử có nội dung, padding, border và margin. Thứ tự các thành phần này từ trong ra ngoài trong mô hình hộp chuẩn là gì? A. Content, Padding, Border, Margin B. Margin, Border, Padding, Content C. Padding, Content, Border, Margin D. Border, Padding, Content, Margin Câu 25: Bạn có một danh sách các mục (` `) và muốn thêm khoảng trống bên trong mỗi mục, giữa nội dung (`text`) và đường viền (nếu có). Thuộc tính nào nên được sử dụng? A. margin B. padding C. text-indent D. line-height Câu 26: Cho đoạn CSS sau: `.hop { margin: 10px; }`. Điều này sẽ tạo ra lề 10px ở những phía nào của phần tử có lớp `hop`? A. Chỉ lề trên và lề dưới. B. Chỉ lề trái và lề phải. C. Lề ở cả bốn phía (trên, phải, dưới, trái). D. Lề trên, phải và dưới, lề trái bằng 0. Câu 27: Trong CSS, thuộc tính `border-radius` được sử dụng để làm gì? A. Điều chỉnh khoảng cách giữa các ký tự trong nội dung. B. Tạo bóng đổ cho phần tử. C. Thiết lập kiểu đường viền (liền nét, nét đứt...). D. Làm tròn các góc của đường viền. Câu 28: Xét đoạn HTML ` Nội dung 1 Nội dung 2 ` và CSS `.hop1 { display: inline-block; width: 100px; } .hop2 { display: inline-block; width: 100px; }`. Hai phần tử `div` này sẽ hiển thị như thế nào trên trang? A. Hiển thị cạnh nhau trên cùng một dòng, mỗi phần tử rộng 100px. B. Mỗi phần tử hiển thị trên một dòng riêng biệt, mỗi phần tử rộng 100px. C. Hiển thị cạnh nhau nhưng chiều rộng sẽ tự động điều chỉnh theo nội dung. D. Hiển thị cạnh nhau nhưng không thể thiết lập chiều rộng cố định. Câu 29: Thuộc tính CSS nào sau đây được sử dụng để thiết lập lề dưới của một phần tử? A. margin-top B. margin-left C. margin-bottom D. margin-right Câu 30: Khi sử dụng nhiều class cho một phần tử HTML (ví dụ: ` `), các kiểu CSS từ các class này sẽ được áp dụng như thế nào? A. Chỉ kiểu từ class đầu tiên (`doan-van`) được áp dụng. B. Chỉ kiểu từ class cuối cùng (`chu-dam`) được áp dụng. C. Chỉ kiểu từ class có tên ngắn hơn được áp dụng. D. Kiểu từ tất cả các class được áp dụng, và quy tắc ưu tiên sẽ giải quyết xung đột nếu có. 1 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 1: Trong mô hình hộp (Box Model) của CSS, thành phần nào đại diện cho khoảng trống giữa nội dung của phần tử và đường viền của nó? Margin Padding Border Content Mô hình hộp CSS bao gồm nội dung (content), đệm (padding), đường viền (border) và lề (margin). Padding là khoảng trống giữa nội dung và border. 2 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 2: Phần tử khối (block-level element) trong HTML/CSS có đặc điểm hiển thị mặc định như thế nào? Chỉ chiếm không gian vừa đủ cho nội dung và nằm trên cùng một dòng với các phần tử khác. Không thể thiết lập thuộc tính `width` và `height` trực tiếp. Luôn bắt đầu trên một dòng mới và kéo dài hết chiều rộng của phần tử cha. Mặc định ẩn đi trên trang web nếu không có nội dung. Phần tử khối mặc định chiếm toàn bộ chiều rộng có sẵn của phần tử chứa nó và bắt đầu trên một dòng mới. 3 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 3: Thuộc tính CSS `display: inline;` được sử dụng để làm gì? Hiển thị phần tử như một phần tử nội tuyến, không ngắt dòng. Ẩn hoàn toàn phần tử khỏi hiển thị và không chiếm không gian. Hiển thị phần tử như một phần tử khối, luôn ngắt dòng. Hiển thị phần tử vừa như khối vừa như nội tuyến, cho phép đặt kích thước. `display: inline;` biến phần tử thành phần tử nội tuyến, chỉ chiếm không gian cần thiết và cho phép các phần tử khác nằm trên cùng một dòng. 4 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 4: Giả sử bạn có một đoạn văn ` ` và muốn thêm một đường viền màu xanh lá cây dày 2px xung quanh nó. Thuộc tính CSS nào sau đây là phù hợp nhất để thiết lập đường viền? outline box-shadow border-radius border Thuộc tính `border` trong CSS được sử dụng để thiết lập đường viền của phần tử. Cú pháp thông dụng là `border: width style color;`. 5 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 5: Bạn muốn tạo khoảng trống *bên ngoài* đường viền của một phần tử để tách nó ra khỏi các phần tử xung quanh. Bạn nên sử dụng thuộc tính CSS nào? margin padding border outline Margin là khoảng trống bên ngoài đường viền, dùng để tạo khoảng cách giữa các phần tử. 6 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 6: Cho đoạn mã HTML sau: ` Nội dung `. Để áp dụng kiểu cho phần tử `div` này bằng bộ chọn lớp (class selector) trong CSS, bạn sẽ viết như thế nào? #hop-noi-dung { ... } div.hop-noi-dung { ... } .hop-noi-dung { ... } class='hop-noi-dung' { ... } Bộ chọn lớp trong CSS bắt đầu bằng dấu chấm (.) theo sau là tên lớp. 7 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 7: Thuộc tính CSS `display: none;` khác với `visibility: hidden;` ở điểm nào quan trọng nhất liên quan đến không gian hiển thị? `display: none;` chỉ ẩn nội dung, còn `visibility: hidden;` ẩn cả nội dung và đường viền. `display: none;` làm phần tử không chiếm không gian, còn `visibility: hidden;` vẫn giữ không gian của phần tử. `display: none;` chỉ áp dụng cho phần tử khối, còn `visibility: hidden;` áp dụng cho cả khối và nội tuyến. `visibility: hidden;` có thể làm phần tử hiện lại bằng JavaScript, còn `display: none;` thì không thể. `display: none;` ẩn phần tử và loại bỏ nó khỏi luồng tài liệu, không chiếm bất kỳ không gian nào. `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian của nó trên trang. 8 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 8: Bạn có hai phần tử `div` và muốn chúng hiển thị cạnh nhau trên cùng một dòng, đồng thời vẫn có thể thiết lập chiều rộng và chiều cao cho chúng. Loại hiển thị (`display`) nào là lựa chọn phù hợp nhất? block inline none inline-block `display: inline-block;` cho phép phần tử hiển thị cạnh nhau như inline nhưng vẫn giữ các đặc điểm của block như khả năng thiết lập width/height. 9 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 9: Cho một phần tử `div` với CSS sau: `width: 200px; padding: 20px; border: 1px solid black; margin: 10px;`. Tổng chiều rộng thực tế mà phần tử này chiếm trên trang web (bao gồm cả lề) là bao nhiêu? 200px 262px 242px 252px Tổng chiều rộng = width + 2*padding + 2*border + 2*margin. Tính toán: 200 + 2*20 + 2*1 + 2*10 = 200 + 40 + 2 + 20 = 262px. 10 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 10: Mã định danh (ID) trong HTML/CSS khác với lớp (Class) chủ yếu ở điểm nào? ID chỉ áp dụng cho phần tử khối, còn Class áp dụng cho cả khối và nội tuyến. Tên ID có thể chứa dấu cách, còn tên Class thì không. Mỗi phần tử chỉ nên có một ID duy nhất, còn có thể có nhiều Class. Bộ chọn ID dùng dấu chấm (.), còn bộ chọn Class dùng dấu thăng (#). ID phải là duy nhất trên một trang HTML, dùng để định danh một phần tử cụ thể. Class có thể được sử dụng cho nhiều phần tử. 11 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 11: Khi đặt tên cho ID và Class trong HTML/CSS, quy tắc nào sau đây là KHÔNG đúng? Tên không được chứa dấu cách. Tên có thể bắt đầu bằng một chữ số. Tên phân biệt chữ hoa và chữ thường (case-sensitive). Tên có thể chứa dấu gạch ngang (-) và dấu gạch dưới (_). Tên ID và Class không được bắt đầu bằng một chữ số. Chúng có thể chứa chữ cái, chữ số, dấu gạch ngang (-) và dấu gạch dưới (_). 12 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 12: Bạn muốn áp dụng một kiểu CSS cụ thể (ví dụ: `color: red;`) chỉ cho *duy nhất* một phần tử ` ` trong toàn bộ trang web của mình. Bộ chọn nào là phù hợp và hiệu quả nhất cho mục đích này? Bộ chọn ID Bộ chọn Class Bộ chọn phần tử (ví dụ: `p`) Bộ chọn Universal (*) Bộ chọn ID (#) được sử dụng để định dạng một phần tử duy nhất với ID cụ thể. Mỗi ID phải là duy nhất trên trang. 13 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 13: Cho đoạn CSS sau: `.hop { padding: 10px 20px 5px 15px; }`. Khoảng đệm (padding) sẽ được áp dụng theo thứ tự nào? Trên, dưới, trái, phải. Phải, trái, trên, dưới. Trên, phải, dưới, trái. Trái, phải, trên, dưới. Khi sử dụng 4 giá trị cho padding (hoặc margin), thứ tự áp dụng là: trên, phải, dưới, trái (top, right, bottom, left). 14 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 14: Thuộc tính `margin: auto;` thường được sử dụng kết hợp với `width` cố định cho phần tử khối (`display: block;`) để làm gì? Tự động điều chỉnh kích thước phần tử phù hợp với nội dung. Căn giữa phần tử khối theo chiều ngang trong phần tử chứa nó. Tạo khoảng trống ngẫu nhiên xung quanh phần tử. Làm cho phần tử tràn ra ngoài phần tử chứa nó. Khi `margin-left` và `margin-right` được đặt là `auto` cho một phần tử khối có chiều rộng cố định, trình duyệt sẽ tự động tính toán lề trái và lề phải bằng nhau, giúp phần tử được căn giữa theo chiều ngang. 15 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 15: Phần tử nội tuyến (inline element) KHÔNG thể thiết lập trực tiếp hai thuộc tính CSS nào sau đây một cách hiệu quả? width và height color và font-size margin và padding border-style và border-color Phần tử nội tuyến chỉ chiếm không gian vừa đủ cho nội dung và không thể thiết lập chiều rộng (`width`) và chiều cao (`height`) cố định. Padding và margin theo chiều dọc cũng có hành vi không nhất quán. 16 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 16: Bạn có một phần tử `span` và muốn nó có chiều rộng là 100px và chiều cao là 50px. Mặc định, điều này sẽ không hoạt động vì `span` là phần tử nội tuyến. Bạn cần thêm thuộc tính CSS nào để đạt được yêu cầu này? position: absolute; float: left; display: inline-block; overflow: hidden; Để một phần tử nội tuyến như `span` có thể chấp nhận thuộc tính `width` và `height`, bạn cần thay đổi kiểu hiển thị của nó thành `block` hoặc `inline-block`. `inline-block` là lựa chọn phổ biến để giữ các phần tử cạnh nhau nhưng vẫn kiểm soát được kích thước. 17 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 17: Trong mô hình hộp, nếu thuộc tính `box-sizing` được đặt là `border-box`, điều gì sẽ xảy ra khi bạn thiết lập `width` và `height` cho một phần tử? `width` và `height` sẽ bao gồm cả padding và border. `width` và `height` chỉ áp dụng cho nội dung (content). Padding và border sẽ được thêm vào kích thước đã thiết lập, làm phần tử lớn hơn. Thuộc tính `margin` sẽ bị bỏ qua. Với `box-sizing: border-box;`, thuộc tính `width` và `height` sẽ bao gồm cả padding và border. Chỉ có margin là nằm ngoài kích thước được thiết lập. 18 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 18: Bạn đang thiết kế bố cục và muốn một khối nội dung có đường viền màu xám và khoảng đệm 15px bên trong đường viền đó. Đoạn CSS nào sau đây thực hiện đúng yêu cầu này? `.khoi { margin: 15px; border: 1px solid gray; }` `.khoi { border: 15px; padding: 1px solid gray; }` `.khoi { padding: 15px; margin: 1px solid gray; }` `.khoi { padding: 15px; border: 1px solid gray; }` `border` thiết lập đường viền, `padding` thiết lập khoảng đệm bên trong đường viền. 19 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 19: Cho đoạn HTML ` Chào mừng! `. Để áp dụng kiểu chữ in đậm và màu xanh cho đoạn văn này sử dụng bộ chọn ID, bạn sẽ viết CSS như thế nào? `.doan-mo-dau { font-weight: bold; color: blue; }` `#doan-mo-dau { font-weight: bold; color: blue; }` `p#doan-mo-dau { font-weight: bold; color: blue; }` `id='doan-mo-dau' { font-weight: bold; color: blue; }` Bộ chọn ID bắt đầu bằng dấu thăng (#) theo sau là tên ID. Kiểu chữ in đậm dùng `font-weight: bold;`, màu chữ dùng `color: blue;`. 20 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 20: Thuộc tính CSS nào được sử dụng để thiết lập độ dày, kiểu dáng và màu sắc của đường viền xung quanh một phần tử? outline box-shadow border text-decoration Thuộc tính `border` là thuộc tính viết tắt cho `border-width`, `border-style` và `border-color`. 21 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 21: Giả sử bạn có hai phần tử khối (`div`) nằm cạnh nhau trong mã HTML nhưng chúng không tự động cách nhau. Bạn muốn thêm khoảng cách 20px giữa chúng. Cách đơn giản nhất để làm điều này là sử dụng thuộc tính nào? margin padding border width Margin tạo khoảng trống bên ngoài đường viền của phần tử, được dùng để tạo khoảng cách giữa các phần tử. 22 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 22: Cho đoạn CSS: `.hop { border-top: 2px solid red; border-bottom: 1px dashed blue; }`. Điều này sẽ tạo ra đường viền như thế nào cho phần tử có lớp `hop`? Đường viền liền nét màu đỏ 2px ở tất cả các cạnh. Đường viền nét đứt màu xanh 1px ở tất cả các cạnh. Đường viền liền nét màu đỏ 2px ở trên và nét đứt màu xanh 1px ở trái và phải. Đường viền liền nét màu đỏ 2px ở trên và nét đứt màu xanh 1px ở dưới. Thuộc tính `border-top` chỉ định đường viền phía trên, `border-bottom` chỉ định đường viền phía dưới. Các cạnh trái và phải sẽ không có đường viền. 23 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 23: Bạn muốn áp dụng cùng một tập hợp các kiểu CSS (v?? dụ: màu nền, kiểu chữ) cho nhiều phần tử khác nhau trên trang web mà không cần lặp lại mã CSS cho từng phần tử. Phương pháp nào sau đây là hiệu quả nhất? Sử dụng bộ chọn ID cho từng phần tử. Gán cùng tên lớp (Class) cho các phần tử và sử dụng bộ chọn Class trong CSS. Sử dụng bộ chọn phần tử chung (ví dụ: `*`). Lặp lại cùng một khối CSS cho từng phần tử riêng lẻ. Sử dụng lớp (Class) cho phép áp dụng cùng một bộ kiểu CSS cho nhiều phần tử bằng cách gán cùng tên lớp cho chúng. 24 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 24: Xét một phần tử có nội dung, padding, border và margin. Thứ tự các thành phần này từ trong ra ngoài trong mô hình hộp chuẩn là gì? Content, Padding, Border, Margin Margin, Border, Padding, Content Padding, Content, Border, Margin Border, Padding, Content, Margin Mô hình hộp từ trong ra ngoài gồm: Content -> Padding -> Border -> Margin. 25 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 25: Bạn có một danh sách các mục (` `) và muốn thêm khoảng trống *bên trong* mỗi mục, giữa nội dung (`text`) và đường viền (nếu có). Thuộc tính nào nên được sử dụng? margin padding text-indent line-height Padding tạo khoảng trống giữa nội dung và đường viền/ranh giới của phần tử. 26 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 26: Cho đoạn CSS sau: `.hop { margin: 10px; }`. Điều này sẽ tạo ra lề 10px ở những phía nào của phần tử có lớp `hop`? Chỉ lề trên và lề dưới. Chỉ lề trái và lề phải. Lề ở cả bốn phía (trên, phải, dưới, trái). Lề trên, phải và dưới, lề trái bằng 0. Khi chỉ có một giá trị được cung cấp cho `margin` (hoặc `padding`), giá trị đó sẽ được áp dụng cho cả bốn phía: trên, phải, dưới, trái. 27 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 27: Trong CSS, thuộc tính `border-radius` được sử dụng để làm gì? Điều chỉnh khoảng cách giữa các ký tự trong nội dung. Tạo bóng đổ cho phần tử. Thiết lập kiểu đường viền (liền nét, nét đứt...). Làm tròn các góc của đường viền. `border-radius` được sử dụng để làm tròn các góc của đường viền của một phần tử. 28 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 28: Xét đoạn HTML ` Nội dung 1 Nội dung 2 ` và CSS `.hop1 { display: inline-block; width: 100px; } .hop2 { display: inline-block; width: 100px; }`. Hai phần tử `div` này sẽ hiển thị như thế nào trên trang? Hi??n thị cạnh nhau trên cùng một dòng, mỗi phần tử rộng 100px. Mỗi phần tử hiển thị trên một dòng riêng biệt, mỗi phần tử rộng 100px. Hiển thị cạnh nhau nhưng chiều rộng sẽ tự động điều chỉnh theo nội dung. Hiển thị cạnh nhau nhưng không thể thiết lập chiều rộng cố định. Cả hai `div` được đặt `display: inline-block;`, cho phép chúng hiển thị cạnh nhau trên cùng một dòng nếu có đủ không gian, và chúng có chiều rộng cố định 100px. 29 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 29: Thuộc tính CSS nào sau đây được sử dụng để thiết lập lề *dưới* của một phần tử? margin-top margin-left margin-bottom margin-right `margin-bottom` được sử dụng để thiết lập lề ở phía dưới của phần tử. 30 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Tags: Bộ đề 09 Câu 30: Khi sử dụng nhiều class cho một phần tử HTML (ví dụ: ` `), các kiểu CSS từ các class này sẽ được áp dụng như thế nào? Chỉ kiểu từ class đầu tiên (`doan-van`) được áp dụng. Chỉ kiểu từ class cuối cùng (`chu-dam`) được áp dụng. Chỉ kiểu từ class có tên ngắn hơn được áp dụng. Kiểu từ tất cả các class được áp dụng, và quy tắc ưu tiên sẽ giải quyết xung đột nếu có. Các kiểu từ tất cả các class được liệt kê sẽ được áp dụng cho phần tử. Nếu có xung đột giữa các thuộc tính từ các class khác nhau, quy tắc ưu tiên của CSS (specificity) sẽ quyết định thuộc tính nào được áp dụng cuối cùng. 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é!!! Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 10 Bài Tập Trắc nghiệm Tin học 12 - Kết nối tri thức - Bài 16: Định dạng khung - Đề 10 được xây dựng với nhiều câu hỏi chất lượng, sát với nội dung chương trình học, giúp bạn dễ dàng ôn tập và kiểm tra kiến thức hiệu quả. Hãy cùng bắt đầu làm bài tập trắc nghiệm ngay để nâng cao hiểu biết và chuẩn bị tốt cho kỳ thi sắp tới! Câu 1: Một lập trình viên web muốn tạo một khối nội dung (ví dụ: một đoạn văn) mà 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 của vùng chứa cha. Loại phần tử HTML nào thường có hành vi mặc định này? A. Phần tử khối (Block-level element) B. Phần tử nội tuyến (Inline element) C. Phần tử nội tuyến-khối (Inline-block element) D. Phần tử flex (Flex item) Câu 2: Cho đoạn mã HTML sau: ` Đây là một đoạn văn bản chứa một phần tử nội tuyến bên trong. `. Khi hiển thị trên trình duyệt, phần tử `` sẽ có đặc điểm bố cục như thế nào so với phần tử ` ` và văn bản xung quanh nó? A. Sẽ bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng của ` `. B. Sẽ tạo ra một khối riêng biệt, có thể thiết lập chiều cao và chiều rộng. C. Sẽ nằm trên cùng dòng với văn bản "Đây là một đoạn văn bản chứa" và "bên trong.", chỉ chiếm không gian vừa đủ cho nội dung của nó. D. Sẽ bị ẩn hoàn toàn khỏi hiển thị. Câu 3: Một nhà thiết kế web muốn hai phần tử ` ` xuất hiện cạnh nhau trên cùng một dòng thay vì mỗi phần tử chiếm một dòng riêng biệt. Thuộc tính CSS `display` nào có thể giúp đạt được mục tiêu này (trong các lựa chọn sau, không xét flexbox hay grid)? A. `display: block;` B. `display: none;` C. `display: inline;` D. `display: inline-block;` Câu 4: Thuộc tính CSS `display: none;` khác gì so với `visibility: hidden;` về mặt bố cục trang? A. `display: none;` ẩn phần tử nhưng vẫn giữ không gian, còn `visibility: hidden;` loại bỏ phần tử hoàn toàn. B. `display: none;` loại bỏ phần tử hoàn toàn khỏi luồng bố cục, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ không gian của nó. C. Cả hai đều có tác dụng giống nhau là ẩn phần tử và giữ không gian. D. Cả hai đều có tác dụng giống nhau là ẩn phần tử và loại bỏ không gian. Câu 5: Bạn đang xây dựng một trang web và muốn tạo một kiểu dáng đặc biệt (ví dụ: màu nền, viền) chỉ áp dụng cho một phần tử duy nhất trên toàn bộ trang. Bộ chọn CSS nào là phù hợp nhất để nhắm mục tiêu chính xác đến phần tử này? A. Bộ chọn ID (`#`) B. Bộ chọn lớp (`.`) C. Bộ chọn phần tử (ví dụ: `div`) D. Bộ chọn thuộc tính (`[]`) Câu 6: Bạn có nhiều phần tử ` ` trên trang, nhưng chỉ muốn một nhóm cụ thể các phần tử ` ` này có cùng một kiểu dáng (ví dụ: có viền nét đứt). Bộ chọn CSS nào là phù hợp nhất để áp dụng kiểu dáng này cho nhóm các phần tử đó? A. Bộ chọn ID (`#`) B. Bộ chọn lớp (`.`) C. Bộ chọn phần tử (ví dụ: `div`) D. Bộ chọn phổ quát (`*`) Câu 7: Cho đoạn mã HTML: ` A. `.container #header { ... }` B. `#header .container { ... }` C. `#header.container { ... }` D. `#header, .container { ... }` Câu 8: Khi đặt tên cho ID và lớp trong HTML/CSS, quy tắc nào sau đây là KHÔNG ĐÚNG? A. Tên có thể chứa chữ cái, số, dấu gạch ngang (-) và dấu gạch dưới (_). B. Tên có thể bắt đầu bằng một chữ số. C. Tên phải phân biệt chữ hoa và chữ thường. D. Tên không được chứa dấu cách. Câu 9: Một phần tử HTML có thể được gán bao nhiêu ID? A. Một ID duy nhất. B. Nhiều ID, phân cách bởi dấu cách. C. Nhiều ID, phân cách bởi dấu phẩy. D. Không thể gán ID cho phần tử. Câu 10: Một phần tử HTML có thể thuộc bao nhiêu lớp (class)? A. Chỉ một lớp duy nhất. B. Nhiều lớp, phân cách bởi dấu phẩy. C. Nhiều lớp, phân cách bởi dấu cách. D. Không thể gán lớp cho phần tử. Câu 11: Thuộc tính CSS `margin` được sử dụng để làm gì trong việc định dạng khung? 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ử. C. Thiết lập độ dày, kiểu và màu sắc của đường viền. D. Thiết lập kích thước thực tế của nội dung bên trong phần tử. Câu 12: Thuộc tính CSS `padding` được sử dụng để làm gì trong việc định dạng khung? 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ử. C. Thiết lập độ dày, kiểu và màu sắc của đường viền. D. Thiết lập kích thước thực tế của nội dung bên trong phần tử. Câu 13: Cho một phần tử `div` với CSS sau: `width: 100px; padding: 10px; border: 1px solid black; margin: 5px;`. Tổng chiều rộng thực tế 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. 100px B. 120px C. 122px D. 132px Câu 14: Khi hai phần tử khối (block-level elements) có thuộc tính `margin-bottom` và `margin-top` tiếp giáp với nhau theo chiều dọc, điều gì thường xảy ra với khoảng cách giữa chúng? A. Khoảng cách giữa chúng sẽ bằng tổng của `margin-bottom` của phần tử trên và `margin-top` của phần tử dưới. B. Khoảng cách giữa chúng sẽ bằng hiệu của giá trị lớn hơn trừ đi giá trị nhỏ hơn của hai lề. C. Khoảng cách giữa chúng sẽ bằng giá trị lớn hơn trong hai lề (`margin-bottom` của phần tử trên và `margin-top` của phần tử dưới). D. Không có khoảng cách nào được tạo ra nếu cả hai lề đều dương. Câu 15: Để tạo một đường viền chỉ ở phía dưới của một phần tử, thuộc tính CSS nào là phù hợp nhất? A. `border-style: bottom;` B. `border-color: bottom;` C. `border: bottom 1px solid black;` D. `border-bottom: 1px solid black;` Câu 16: Trong HTML, thẻ nào được sử dụng để định nghĩa một bảng (table)? A. ` ` B. ` ` C. ` ` trong bảng HTML dùng để định nghĩa thành phần nào? A. Ô dữ liệu (cell) B. Hàng (row) C. Cột (column) D. Tiêu đề bảng (caption) Câu 18: Để định nghĩa một ô dữ liệu thông thường trong bảng HTML, ta sử dụng thẻ nào? A. ` ` B. ` ` D. ` ` Câu 17: Thẻ ` ` C. ` ` D. ` ` Câu 19: Thẻ ` ` trong bảng HTML có mục đích gì? A. Định nghĩa một hàng mới. B. Định nghĩa một ô dữ liệu thông thường. C. Tạo đường viền cho bảng. D. Định nghĩa một ô tiêu đề trong bảng. Câu 20: Một nhà phát triển muốn tạo một bảng đơn giản với 3 hàng và 2 cột, trong đó hàng đầu tiên là tiêu đề. Cấu trúc HTML cơ bản nào sau đây thể hiện đúng yêu cầu đó? A. ` ... ... ... ... ... ... ` B. ` ... ... ... ... ... ... ` C. ` ... ... ... ... ... ... ` D. ` ... ... ... ... ` Câu 21: Để loại bỏ khoảng cách giữa các ô trong bảng (border-spacing) khi định dạng bảng bằng CSS, ta sử dụng thuộc tính nào? A. `cell-spacing: 0;` B. `border-spacing: 0;` C. `padding: 0;` D. `margin: 0;` Câu 22: Để làm cho các đường viền của các ô trong bảng dính liền với nhau thay vì có khoảng cách, thuộc tính CSS nào được áp dụng cho thẻ ` `? A. `border-collapse: collapse;` B. `border-spacing: 0;` C. `border-style: solid;` D. `padding: 0;` Câu 23: Bạn có một phần tử `span` (mặc định là nội tuyến) và muốn nó có thể thiết lập chiều rộng (`width`) và chiều cao (`height`) như một phần tử khối, nhưng vẫn nằm cùng dòng với các phần tử khác nếu đủ chỗ. Thuộc tính `display` nào phù hợp? A. `display: block;` B. `display: inline;` C. `display: none;` D. `display: inline-block;` Câu 24: Cho CSS rule: `.highlight { background-color: yellow; padding: 5px; }`. Nếu áp dụng lớp `highlight` cho một phần tử `p`, kiểu dáng nào sẽ được áp dụng cho phần tử đó? A. Chỉ có màu nền vàng được áp dụng. B. Chỉ có khoảng trống 5px bên ngoài viền được tạo ra. C. Màu nền vàng được áp dụng và có khoảng trống 5px giữa nội dung và viền của phần tử. D. Phần tử sẽ bị ẩn đi. Câu 25: Bạn muốn tạo một đường viền màu đỏ, nét liền, dày 2px xung quanh một phần tử `div`. Cú pháp CSS nào sau đây là đúng và đầy đủ? A. `border: red solid 2px;` B. `border: 2px solid red;` C. `border-color: red; border-style: solid; border-width: 2px;` (Đây là cách viết đầy đủ, nhưng phương án 2 là cú pháp rút gọn phổ biến và đúng) D. `border-width: 2px; border-color: red; border-style: solid;` (Cách viết đầy đủ đúng, nhưng phương án 2 là cú pháp rút gọn phổ biến và đúng) Câu 26: Cho đoạn CSS: `#main-content { margin-top: 20px; }`. Đoạn CSS này sẽ tạo ra khoảng trống 20px ở vị trí nào của phần tử có ID là `main-content`? A. Phía trên của phần tử. B. Phía dưới của phần tử. C. Phía bên trái của phần tử. D. Phía bên phải của phần tử. Câu 27: Khi thiết lập thuộc tính `padding` với bốn giá trị, ví dụ: `padding: 10px 20px 5px 15px;`, thứ tự áp dụng các giá trị này tương ứng với các cạnh nào của khung? A. Trên, dưới, trái, phải. B. Trái, phải, trên, dưới. C. Trên, trái, dưới, phải. D. Trên, phải, dưới, trái. Câu 28: Bạn muốn làm cho một hình ảnh (thẻ ``, mặc định là nội tuyến) có thể căn giữa độc lập trên một dòng riêng của nó và có thể thiết lập lề trên/dưới. Bạn nên thay đổi thuộc tính `display` của hình ảnh thành giá trị nào? A. `display: block;` B. `display: inline;` C. `display: none;` D. `display: inline-table;` Câu 29: Trong CSS Box Model, thành phần nào nằm giữa `padding` và `margin`? A. Content. B. Margin. C. Border. D. Không có thành phần nào. Câu 30: Bạn đang định dạng một bảng và muốn tất cả các ô dữ liệu (` `) và ô tiêu đề (` `) có khoảng trống bên trong 8px. CSS rule nào sau đây đạt được điều đó một cách hiệu quả nhất? A. `table { padding: 8px; }` B. `td, th { padding: 8px; }` C. `td th { padding: 8px; }` D. `table td, table th { margin: 8px; }` 1 / 30 Category: Bài Tập 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 lập trình viên web muốn tạo một khối nội dung (ví dụ: một đoạn văn) mà 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 của vùng chứa cha. Loại phần tử HTML nào thường có hành vi mặc định này? Phần tử khối (Block-level element) Phần tử nội tuyến (Inline element) Phần tử nội tuyến-khối (Inline-block element) Phần tử flex (Flex item) Câu hỏi kiểm tra hiểu biết về hành vi mặc định của các loại phần tử HTML. Phần tử khối (block-level element) theo mặc định sẽ bắt đầu trên một dòng mới và kéo dài hết chiều rộng của phần tử chứa nó. 2 / 30 Category: Bài Tập 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: Cho đoạn mã HTML sau: ` Đây là một đoạn văn bản chứa một phần tử nội tuyến bên trong. `. Khi hiển thị trên trình duyệt, phần tử `` sẽ có đặc điểm bố cục như thế nào so với phần tử ` ` và văn bản xung quanh nó? Sẽ bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng của `<p>`. Sẽ tạo ra một khối riêng biệt, có thể thiết lập chiều cao và chiều rộng. Sẽ nằm trên cùng dòng với văn bản 'Đây là một đoạn văn bản chứa' và 'bên trong.', chỉ chiếm không gian vừa đủ cho nội dung của nó. Sẽ bị ẩn hoàn toàn khỏi hiển thị. Câu hỏi yêu cầu phân tích cách phần tử nội tuyến (``) hoạt động trong ngữ cảnh của phần tử khối (` `). Phần tử nội tuyến nằm cùng dòng với nội dung khác và không ngắt dòng. 3 / 30 Category: Bài Tập 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: Một nhà thiết kế web muốn hai phần tử ` ` xuất hiện cạnh nhau trên cùng một dòng thay vì mỗi phần tử chiếm một dòng riêng biệt. Thuộc tính CSS `display` nào có thể giúp đạt được mục tiêu này (trong các lựa chọn sau, không xét flexbox hay grid)? `display: block;` `display: none;` `display: inline;` `display: inline-block;` Câu hỏi yêu cầu áp dụng thuộc tính `display` để thay đổi hành vi bố cục mặc định của phần tử. `div` là phần tử khối. Để chúng nằm cạnh nhau, cần thay đổi cách hiển thị của chúng. `inline-block` cho phép phần tử nằm cùng dòng nhưng vẫn giữ được các thuộc tính khối như chiều rộng, chiều cao. 4 / 30 Category: Bài Tập 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: Thuộc tính CSS `display: none;` khác gì so với `visibility: hidden;` về mặt bố cục trang? `display: none;` ẩn phần tử nhưng vẫn giữ không gian, còn `visibility: hidden;` loại bỏ phần tử hoàn toàn. `display: none;` loại bỏ phần tử hoàn toàn khỏi luồng bố cục, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ không gian của nó. Cả hai đều có tác dụng giống nhau là ẩn phần tử và giữ không gian. Cả hai đều có tác dụng giống nhau là ẩn phần tử và loại bỏ không gian. Câu hỏi yêu cầu phân biệt hai thuộc tính ẩn phần tử. `display: none;` loại bỏ phần tử hoàn toàn khỏi luồng bố cục, không chiếm không gian. `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian mà nó lẽ ra chiếm giữ. 5 / 30 Category: Bài Tập 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: Bạn đang xây dựng một trang web và muốn tạo một kiểu dáng đặc biệt (ví dụ: màu nền, viền) chỉ áp dụng cho một phần tử duy nhất trên toàn bộ trang. Bộ chọn CSS nào là phù hợp nhất để nhắm mục tiêu chính xác đến phần tử này? Bộ chọn ID (`#`) Bộ chọn lớp (`.`) Bộ chọn phần tử (ví dụ: `div`) Bộ chọn thuộc tính (`[]`) Câu hỏi yêu cầu chọn bộ chọn CSS phù hợp với yêu cầu định dạng một phần tử duy nhất. Bộ chọn ID (`#`) được thiết kế để nhắm mục tiêu đến một phần tử có ID duy nhất. 6 / 30 Category: Bài Tập 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: Bạn có nhiều phần tử ` ` trên trang, nhưng chỉ muốn một nhóm cụ thể các phần tử ` ` này có cùng một kiểu dáng (ví dụ: có viền nét đứt). Bộ chọn CSS nào là phù hợp nhất để áp dụng kiểu dáng này cho nhóm các phần tử đó? Bộ chọn ID (`#`) Bộ chọn lớp (`.`) Bộ chọn phần tử (ví dụ: `div`) Bộ chọn phổ quát (`*`) Câu hỏi yêu cầu chọn bộ chọn CSS phù hợp với yêu cầu định dạng một nhóm các phần tử có cùng đặc điểm. Bộ chọn lớp (`.`) được sử dụng để áp dụng kiểu dáng cho nhiều phần tử. 7 / 30 Category: Bài Tập 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: Cho đoạn mã HTML: ` ... `. Để áp dụng kiểu dáng cho phần tử này dựa trên cả ID và lớp của nó, cú pháp bộ chọn CSS nào là đúng? `.container #header { ... }` `#header .container { ... }` `#header.container { ... }` `#header, .container { ... }` Câu hỏi kiểm tra cú pháp kết hợp bộ chọn ID và lớp. Để chọn một phần tử có cả ID và lớp cụ thể, ta viết `#ID.Class`. 8 / 30 Category: Bài Tập 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: Khi đặt tên cho ID và lớp trong HTML/CSS, quy tắc nào sau đây là KHÔNG ĐÚNG? Tên có thể chứa chữ cái, số, dấu gạch ngang (-) và dấu gạch dưới (_). Tên có thể bắt đầu bằng một chữ số. Tên phải phân biệt chữ hoa và chữ thường. Tên không được chứa dấu cách. Câu hỏi kiểm tra quy tắc đặt tên cho ID và Class. Tên ID và Class không được bắt đầu bằng số. 9 / 30 Category: Bài Tập 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: Một phần tử HTML có thể được gán bao nhiêu ID? Một ID duy nhất. Nhiều ID, phân cách bởi dấu cách. Nhiều ID, phân cách bởi dấu phẩy. Không thể gán ID cho phần tử. Câu hỏi kiểm tra quy tắc sử dụng thuộc tính ID. Mỗi phần tử HTML chỉ nên có một ID duy nhất. 10 / 30 Category: Bài Tập 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 phần tử HTML có thể thuộc bao nhiêu lớp (class)? Chỉ một lớp duy nhất. Nhiều lớp, phân cách bởi dấu phẩy. Nhiều lớp, phân cách bởi dấu cách. Không thể gán lớp cho phần tử. Câu hỏi kiểm tra quy tắc sử dụng thuộc tính class. Một phần tử có thể thuộc nhiều lớp bằng cách liệt kê tên các lớp cách nhau bởi dấu cách. 11 / 30 Category: Bài Tập 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: Thuộc tính CSS `margin` được sử dụng để làm gì trong việc định dạng khung? 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ử. Thiết lập độ dày, kiểu và màu sắc của đường viền. Thiết lập kích thước thực tế của nội dung bên trong phần tử. Câu hỏi kiểm tra hiểu biết về thuộc tính `margin` trong Box Model. Margin tạo khoảng trống bên ngoài đường viền của phần tử, tạo khoảng cách giữa phần tử đó với các phần tử xung quanh. 12 / 30 Category: Bài Tập 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: Thuộc tính CSS `padding` được sử dụng để làm gì trong việc định dạng khung? 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ử. Thiết lập độ dày, kiểu và màu sắc của đường viền. Thiết lập kích thước thực tế của nội dung bên trong phần tử. Câu hỏi kiểm tra hiểu biết về thuộc tính `padding` trong Box Model. Padding 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. 13 / 30 Category: Bài Tập 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: Cho một phần tử `div` với CSS sau: `width: 100px; padding: 10px; border: 1px solid black; margin: 5px;`. Tổng chiều rộng thực tế 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? 100px 120px 122px 132px Câu hỏi yêu cầu áp dụng kiến thức Box Model để tính tổng không gian chiếm bởi phần tử. Tổng chiều rộng = width + 2*padding-left + 2*padding-right + 2*border-left + 2*border-right + 2*margin-left + 2*margin-right. Ở đây: 100 + 2*10 + 2*1 + 2*5 = 100 + 20 + 2 + 10 = 132px. 14 / 30 Category: Bài Tập 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: Khi hai phần tử khối (block-level elements) có thuộc tính `margin-bottom` và `margin-top` tiếp giáp với nhau theo chiều dọc, điều gì thường xảy ra với khoảng cách giữa chúng? Khoảng cách giữa chúng sẽ bằng tổng của `margin-bottom` của phần tử trên và `margin-top` của phần tử dưới. Khoảng cách giữa chúng sẽ bằng hiệu của giá trị lớn hơn trừ đi giá trị nhỏ hơn của hai lề. Khoảng cách giữa chúng sẽ bằng giá trị lớn hơn trong hai lề (`margin-bottom` của phần tử trên và `margin-top` của phần tử dưới). Không có khoảng cách nào được tạo ra nếu cả hai lề đều dương. Câu hỏi kiểm tra hiện tượng 'margin collapsing' (gộp lề). Khi lề trên và lề dưới của hai phần tử khối tiếp giáp, chúng sẽ gộp lại thành một lề duy nhất có giá trị bằng giá trị lớn hơn trong hai lề đó. 15 / 30 Category: Bài Tập 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: Để tạo một đường viền chỉ ở phía dưới của một phần tử, thuộc tính CSS nào là phù hợp nhất? `border-style: bottom;` `border-color: bottom;` `border: bottom 1px solid black;` `border-bottom: 1px solid black;` Câu hỏi kiểm tra thuộc tính cụ thể để định dạng viền. `border-bottom` cho phép thiết lập kiểu, độ dày và màu sắc cho viền dưới. 16 / 30 Category: Bài Tập 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: Trong HTML, thẻ nào được sử dụng để định nghĩa một bảng (table)? `<table>` `<tr>` `<td>` `<th>` Câu hỏi kiểm tra kiến thức cơ bản về cấu trúc bảng HTML. Thẻ ` ` là thẻ gốc để tạo bảng. 17 / 30 Category: Bài Tập 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: Thẻ ` ` trong bảng HTML dùng để định nghĩa thành phần nào? Ô dữ liệu (cell) Hàng (row) Cột (column) Tiêu đề bảng (caption) Câu hỏi kiểm tra kiến thức về các thẻ trong cấu trúc bảng. ` ` (table row) định nghĩa một hàng trong bảng. 18 / 30 Category: Bài Tập 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: Để định nghĩa một ô dữ liệu thông thường trong bảng HTML, ta sử dụng thẻ nào? `<tr>` `<th>` `<td>` `<caption>` Câu hỏi kiểm tra kiến thức về các thẻ trong cấu trúc bảng. ` ` (table data) định nghĩa một ô dữ liệu thông thường. 19 / 30 Category: Bài Tập 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: Thẻ ` ` trong bảng HTML có mục đích gì? Định nghĩa một hàng mới. Định nghĩa một ô dữ liệu thông thường. Tạo đường viền cho bảng. Định nghĩa một ô tiêu đề trong bảng. Câu hỏi kiểm tra mục đích của thẻ ` `. ` ` (table header) định nghĩa ô tiêu đề, thường được trình duyệt hiển thị in đậm và căn giữa theo mặc định. 20 / 30 Category: Bài Tập 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: Một nhà phát triển muốn tạo một bảng đơn giản với 3 hàng và 2 cột, trong đó hàng đầu tiên là tiêu đề. Cấu trúc HTML cơ bản nào sau đây thể hiện đúng yêu cầu đó? `<table><tr><th>...</th><th>...</th></tr><tr><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td></td></tr></table>` `<table><tr><td>...</td><td>...</td></tr><tr><th>...</th><th>...</th></tr><tr><td>...</td><td>...</td></td></tr></table>` `<table><th>...</th><th>...</th><tr><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td></td></tr></table>` `<table><tr><th>...</th></tr><tr><th>...</th></tr><tr><td>...</td></tr><tr><td>...</td></tr></table>` Câu hỏi yêu cầu áp dụng kiến thức về cấu trúc bảng để tạo ra mã HTML. Cần 1 thẻ ` `, bên trong có 3 thẻ ` `. Hàng đầu tiên (` ` đầu tiên) chứa 2 thẻ ` ` thứ 2 và 3) mỗi hàng chứa 2 thẻ ` `. Hai hàng còn lại (` `. 21 / 30 Category: Bài Tập 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: Để loại bỏ khoảng cách giữa các ô trong bảng (border-spacing) khi định dạng bảng bằng CSS, ta sử dụng thuộc tính nào? `cell-spacing: 0;` `border-spacing: 0;` `padding: 0;` `margin: 0;` Câu hỏi kiểm tra thuộc tính CSS chuyên dùng cho bảng để kiểm soát khoảng cách giữa các ô. `border-spacing` kiểm soát khoảng cách giữa các đường viền của ô liền kề. Đặt nó bằng 0 sẽ loại bỏ khoảng cách này. 22 / 30 Category: Bài Tập 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: Để làm cho các đường viền của các ô trong bảng dính liền với nhau thay vì có khoảng cách, thuộc tính CSS nào được áp dụng cho thẻ ` `? `border-collapse: collapse;` `border-spacing: 0;` `border-style: solid;` `padding: 0;` Câu hỏi kiểm tra thuộc tính CSS chuyên dùng cho bảng để làm các đường viền gộp lại. `border-collapse: collapse;` làm cho đường viền của các ô liền kề gộp lại thành một đường viền duy nhất. 23 / 30 Category: Bài Tập 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: Bạn có một phần tử `span` (mặc định là nội tuyến) và muốn nó có thể thiết lập chiều rộng (`width`) và chiều cao (`height`) như một phần tử khối, nhưng vẫn nằm cùng dòng với các phần tử khác nếu đủ chỗ. Thuộc tính `display` nào phù hợp? `display: block;` `display: inline;` `display: none;` `display: inline-block;` Câu hỏi yêu cầu thay đổi hành vi hiển thị của phần tử. `inline-block` kết hợp đặc điểm của cả `inline` (nằm cùng dòng) và `block` (có thể thiết lập kích thước, padding, margin). 24 / 30 Category: Bài Tập 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: Cho CSS rule: `.highlight { background-color: yellow; padding: 5px; }`. Nếu áp dụng lớp `highlight` cho một phần tử `p`, kiểu dáng nào sẽ được áp dụng cho phần tử đó? Chỉ có màu nền vàng được áp dụng. Chỉ có khoảng trống 5px bên ngoài viền được tạo ra. Màu nền vàng được áp dụng và có khoảng trống 5px giữa nội dung và viền của phần tử. Phần tử sẽ bị ẩn đi. Câu hỏi kiểm tra khả năng diễn giải CSS rule và áp dụng cho phần tử. Lớp `.highlight` thiết lập màu nền vàng và padding 5px xung quanh nội dung. 25 / 30 Category: Bài Tập 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: Bạn muốn tạo một đường viền màu đỏ, nét liền, dày 2px xung quanh một phần tử `div`. Cú pháp CSS nào sau đây là đúng và đầy đủ? `border: red solid 2px;` `border: 2px solid red;` `border-color: red; border-style: solid; border-width: 2px;` (Đây là cách viết đầy đủ, nhưng phương án 2 là cú pháp rút gọn phổ biến và đúng) `border-width: 2px; border-color: red; border-style: solid;` (Cách viết đầy đủ đúng, nhưng phương án 2 là cú pháp rút gọn phổ biến và đúng) Câu hỏi kiểm tra cú pháp thuộc tính `border` rút gọn. Cú pháp là `border: [độ dày] [kiểu] [màu];`. 26 / 30 Category: Bài Tập 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: Cho đoạn CSS: `#main-content { margin-top: 20px; }`. Đoạn CSS này sẽ tạo ra khoảng trống 20px ở vị trí nào của phần tử có ID là `main-content`? Phía trên của phần tử. Phía dưới của phần tử. Phía bên trái của phần tử. Phía bên phải của phần tử. Câu hỏi kiểm tra hiểu biết về các thuộc tính lề riêng lẻ. `margin-top` tạo khoảng trống ở phía trên của phần tử. 27 / 30 Category: Bài Tập 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: Khi thiết lập thuộc tính `padding` với bốn giá trị, ví dụ: `padding: 10px 20px 5px 15px;`, thứ tự áp dụng các giá trị này tương ứng với các cạnh nào của khung? Trên, dưới, trái, phải. Trái, phải, trên, dưới. Trên, trái, dưới, phải. Trên, phải, dưới, trái. Câu hỏi kiểm tra thứ tự giá trị trong thuộc tính `padding` (hoặc `margin`) khi có 4 giá trị. Thứ tự là: trên, phải, dưới, trái (theo chiều kim đồng hồ, bắt đầu từ trên). 28 / 30 Category: Bài Tập 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: Bạn muốn làm cho một hình ảnh (thẻ ``, mặc định là nội tuyến) có thể căn giữa độc lập trên một dòng riêng của nó và có thể thiết lập lề trên/dưới. Bạn nên thay đổi thuộc tính `display` của hình ảnh thành giá trị nào? `display: block;` `display: inline;` `display: none;` `display: inline-table;` Câu hỏi yêu cầu thay đổi hành vi hiển thị của phần tử để đạt được mục tiêu cụ thể. `` mặc định là `inline`. Để nó có thể căn giữa (đòi hỏi hành vi khối hoặc inline-block trong một số trường hợp) và có lề trên/dưới (chỉ áp dụng cho block/inline-block), cần chuyển nó thành `block` hoặc `inline-block`. `block` là lựa chọn phổ biến nhất để căn giữa một phần tử bằng `margin: auto;`. 29 / 30 Category: Bài Tập 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: Trong CSS Box Model, thành phần nào nằm giữa `padding` và `margin`? Content. Margin. Border. Không có thành phần nào. Câu hỏi kiểm tra cấu trúc của CSS Box Model. Thứ tự từ trong ra ngoài là: Content -> Padding -> Border -> Margin. 30 / 30 Category: Bài Tập 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 đang định dạng một bảng và muốn tất cả các ô dữ liệu (` `) và ô tiêu đề (` `) có khoảng trống bên trong 8px. CSS rule nào sau đây đạt được điều đó một cách hiệu quả nhất? `table { padding: 8px; }` `td, th { padding: 8px; }` `td th { padding: 8px; }` `table td, table th { margin: 8px; }` Câu hỏi yêu cầu áp dụng thuộc tính `padding` cho nhiều bộ chọn. `padding` tạo khoảng trống bên trong ô. Sử dụng bộ chọn nhóm `td, th` cho phép áp dụng cùng một kiểu dáng cho cả hai loại ô. Đề trắc nghiệm liên quan: Đề Trắc nghiệm Tin học 12 – Bài 21: Hội thảo hướng nghiệp (Kết Nối Tri Thức) Đề Trắc nghiệm Tin học 12 – Bài 20: Nhóm nghề quản trị thuộc ngành Công nghệ thông tin (Kết Nối Tri Thức) Đề Trắc nghiệm Tin học 12 – Bài 9: Tạo danh sách, bảng (Kết Nối Tri Thức) Đề Trắc nghiệm Tin học 12 – Bài 8: Định dạng văn bản (Kết Nối Tri Thức) Đề Trắc nghiệm Tin học 12 – Bài 27: Biểu mẫu trên trang web (Kết Nối Tri Thức) Viết một bình luận Bình luận Tên Email Trang web Tìm kiếm cho: