15+ Đề Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

CSS ngoài dòng (external CSS)

`. Định dạng khung này được gọi là gì?

CSS nhúng (embedded CSS)

CSS nội tuyến (inline CSS)

CSS liên kết (linked CSS)

15 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

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

16 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

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

17 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

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

Margin, Border, Padding, Content

Border, Margin, Padding, Content

Content, Padding, Border, Margin

Content, Border, Padding, Margin

18 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

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

`outline` nằm bên trong `padding`, `border` nằm ngoài.

`outline` ảnh hưởng đến kích thước hộp, `border` thì không.

`outline` có thể bo tròn góc, `border` thì không.

`outline` không chiếm không gian trong mô hình hộp, `border` thì có.

19 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

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

Class có thể áp dụng cho nhiều phần tử, ID chỉ dùng cho một phần tử duy nhất.

Class có độ ưu tiên cao hơn ID, dễ dàng ghi đè định dạng.

ID giúp trang web tải nhanh hơn khi định dạng nhiều khung.

Class hỗ trợ nhiều thuộc tính định dạng khung hơn ID.

20 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

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

21 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

Câu 21: Cho CSS: `.box { width: 100%; max-width: 500px; }`. Điều này có ý nghĩa gì về chiều rộng khung của phần tử có class 'box'?

Chiều rộng luôn cố định 500px.

Chiều rộng tối đa 500px, có thể nhỏ hơn nếu phần tử cha hẹp hơn.

Chiều rộng luôn chiếm 100% màn hình.

Chiều rộng là 100px hoặc 500px tùy thuộc vào nội dung.

22 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

Câu 22: Khi kiểm tra phần tử bằng công cụ Inspect của trình duyệt, bạn có thể xem thông tin chi tiết về mô hình hộp của khung ở đâu?

Tab 'Elements' > 'Styles'

Tab 'Console'

Tab 'Sources'

Tab 'Elements' > 'Computed' hoặc 'Layout'

23 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

Câu 23: Để tạo hiệu ứng đổ bóng cho khung, ta sử dụng thuộc tính CSS nào?

24 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

Câu 24: Trong CSS, đơn vị đo chiều dài nào sau đây thường được sử dụng để định kích thước khung linh hoạt theo kích thước phông chữ của phần tử cha?

px (pixel)

cm (centimeter)

pt (point)

25 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

Câu 25: Nếu bạn muốn đường viền khung chỉ hiển thị khi người dùng di chuột qua phần tử, bạn có thể sử dụng CSS selector nào?

26 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

Câu 26: Thuộc tính CSS `box-sizing: border-box;` có tác dụng gì đối với kích thước khung?

Padding và border được tính vào tổng chiều rộng và chiều cao của phần tử.

Margin được tính vào tổng chiều rộng và chiều cao của phần tử.

Chỉ border được tính vào tổng chiều rộng và chiều cao của phần tử.

Không có tác dụng thay đổi cách tính kích thước khung.

27 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

Câu 27: Trong ngữ cảnh định dạng khung, 'reset CSS' thường được sử dụng để làm gì?

Tăng tốc độ tải trang web.

Loại bỏ các định dạng mặc định của trình duyệt để có nền tảng thống nhất.

Tự động tạo khung cho tất cả các phần tử HTML.

Thay đổi màu sắc mặc định của đường viền khung.

28 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

29 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

Câu 29: Khi thiết kế giao diện người dùng (UI), việc sử dụng khung có vai trò quan trọng nào?

Phân chia và nhóm các phần nội dung, tạo cấu trúc rõ ràng.

Tăng tốc độ xử lý của trình duyệt.

Cải thiện thứ hạng tìm kiếm trên Google.

Giảm dung lượng trang web.

30 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 1

Câu 30: Trong CSS, thuộc tính `clip-path` có thể được sử dụng để làm gì với khung của một phần tử?

Thay đổi màu sắc đường viền khung theo hiệu ứng gradient.

Tạo hiệu ứng hoạt hình cho đường viền khung.

Làm cho đường viền khung trở nên trong suốt.

Tạo hình dạng khung không phải hình chữ nhật (ví dụ: hình tròn, đa giác).

` và thẻ `` đại diện cho hai loại phần tử khác nhau về cách hiển thị. Điểm khác biệt chính giữa phần tử `div` và `span` là gì?

Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 02

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 02 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.

Câu 1: Trong HTML, thẻ `

A. `
` là phần tử khối, bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn, trong khi `` là phần tử nội tuyến, không tạo dòng mới và chỉ chiếm không gian cần thiết.
B. `
` chỉ được sử dụng để chứa văn bản, còn `` chứa được cả văn bản và hình ảnh.
C. `
` có thể định dạng được chiều cao và chiều rộng, còn `` thì không.
D. `
` là phần tử cũ, ít được sử dụng trong HTML5, thay vào đó người ta dùng ``.

Câu 2: Thuộc tính CSS `display` có nhiều giá trị khác nhau. Giá trị nào sau đây của thuộc tính `display` sẽ khiến một phần tử biến mất hoàn toàn khỏi trang web, không chiếm bất kỳ không gian nào, và không hiển thị?

A. `inline`
B. `block`
C. `hidden`
D. `none`

Câu 3: Xét đoạn mã CSS sau: `#tieude { color: blue; } .chude { font-size: 16px; }`. Bộ chọn nào đang được sử dụng để định dạng cho phần tử có `id` là `tieude`?

A. `.chude`
B. `#tieude`
C. `tieude`
D. Không có bộ chọn nào định dạng cho phần tử `id` `tieude`

Câu 4: Khi nào thì việc sử dụng bộ chọn `class` trong CSS được ưu tiên hơn so với bộ chọn `id`?

A. Khi chỉ có một phần tử duy nhất trên trang cần được định dạng.
B. Khi cần định dạng một phần tử cụ thể và duy nhất, không có phần tử nào khác có cùng định dạng.
C. Khi muốn áp dụng cùng một kiểu định dạng cho nhiều phần tử khác nhau trên trang web.
D. Bộ chọn `id` luôn được ưu tiên hơn và nên được sử dụng trong mọi trường hợp.

Câu 5: Giả sử bạn có một đoạn văn bản và bạn muốn một vài từ trong đoạn văn đó có màu sắc khác biệt nhưng vẫn nằm trên cùng một dòng. Loại phần tử HTML nào phù hợp nhất để bao bọc những từ đó?

A. `
`
B. ``

Câu 6: Trong CSS, thuộc tính `border` được sử dụng để tạo đường viền xung quanh một phần tử. Để thiết lập đường viền liền nét, màu đỏ, và dày 2 pixel, cú pháp CSS nào sau đây là đúng?

A. `border: red 2px;`
B. `border-style: solid; border-color: red; border-width: 2px;`
C. `border: 2px solid red;`
D. `border-width: 2px, border-style: solid, border-color: red;`

Câu 7: Xét đoạn mã HTML: `

A. Một class

B. Hai class

C. Ba class

D. Không có class nào

Câu 8: Trong HTML, thẻ nào được sử dụng để tạo một hàng trong bảng?

A. `
`

Câu 9: Thẻ `

` cho hàng.

9 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 9: Thẻ `

` và thẻ `

` đều được sử dụng trong bảng HTML, nhưng chúng có mục đích khác nhau. Mục đích chính của việc sử dụng thẻ `

` thay vì `

` là gì?

A. `

` chỉ được sử dụng cho hàng tiêu đề của bảng, còn `

` cho các hàng dữ liệu.

B. `

` không thể chứa văn bản, chỉ chứa được hình ảnh, còn `

` thì ngược lại.

C. `

` tạo ra ô có đường viền đậm hơn `

D. `

` thường được dùng cho các ô tiêu đề của bảng hoặc cột, với nội dung mặc định được in đậm và căn giữa, giúp nhấn mạnh tiêu đề.

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

A. `padding`
B. `margin`
C. `border-spacing`
D. `line-height`

Câu 11: Bạn muốn tạo một bố cục trang web mà trong đó các phần tử con được sắp xếp theo hàng ngang, và có thể tự động xuống dòng khi không đủ không gian. Thuộc tính `display` với giá trị nào sau đây sẽ phù hợp nhất?

A. `block`
B. `inline`
C. `inline-block`
D. `flex`

Câu 12: Trong CSS, bộ chọn nào có độ ưu tiên cao nhất khi có xung đột về quy tắc định dạng?

A. Bộ chọn class
B. Bộ chọn ID
C. Bộ chọn phần tử (tag name)
D. Bộ chọn phổ quát (*)

Câu 13: Bạn cần định dạng tất cả các thẻ `

` trên trang web có màu chữ xanh lá cây. Quy tắc CSS nào sau đây sẽ thực hiện điều này?

A. `p { color: green; }`
B. `.p { color: green; }`
C. `#p { color: green; }`
D. `element.p { color: green; }`

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

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

Câu 15: Trong CSS, để nhóm nhiều bộ chọn lại với nhau và áp dụng cùng một bộ quy tắc định dạng, bạn sử dụng dấu gì để phân tách các bộ chọn?

A. Dấu chấm phẩy (;)
B. Dấu cách ( )
C. Dấu phẩy (,)
D. Dấu hai chấm (:)

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

A. Làm đậm chữ cho tất cả các phần tử có class `container` và `text`.

B. Làm đậm chữ cho phần tử có id `container` và tất cả các phần tử có class `text`.

C. Không có tác dụng gì vì cú pháp CSS sai.

D. Làm đậm chữ cho tất cả các phần tử có class `text` nằm bên trong phần tử có class `container`.

Câu 17: Điều gì xảy ra khi bạn thiết lập `display: inline;` cho một phần tử `

A. Phần tử `
` sẽ biến mất khỏi trang.
B. Phần tử `
` sẽ trở thành phần tử khối và chiếm toàn bộ chiều rộng.
C. Phần tử `
` sẽ trở thành phần tử nội tuyến và chỉ chiếm không gian cần thiết cho nội dung của nó, không tạo dòng mới.
D. Không có gì thay đổi, `
` vẫn luôn là phần tử khối.

Câu 18: Trong CSS, bạn có thể sử dụng giá trị phần trăm (%) cho thuộc tính `width`. Giá trị phần trăm này được tính dựa trên kích thước của phần tử nào?

A. Phần tử cha chứa nó.
B. Chính bản thân phần tử đó.
C. Kích thước màn hình hiển thị.
D. Không có cơ sở nào, phần trăm là giá trị tuyệt đối.

Câu 19: Khi đặt tên cho `id` hoặc `class` trong HTML và CSS, quy tắc nào sau đây là đúng?

A. Tên có thể bắt đầu bằng chữ số.
B. Tên nên bắt đầu bằng chữ cái và chỉ chứa chữ cái, chữ số, dấu gạch ngang (-) và dấu gạch dưới (_).
C. Tên có thể chứa dấu cách.
D. Tên phân biệt chữ hoa và chữ thường, ví dụ `.Text` và `.text` là khác nhau.

Câu 20: Cho đoạn mã HTML: `

Tên	Tuổi
An	20

`. Đoạn mã này sẽ tạo ra một bảng có bao nhiêu hàng dữ liệu (không tính hàng tiêu đề)?

A. Một hàng
B. Hai hàng
C. Ba hàng
D. Không có hàng dữ liệu nào

Câu 21: Nếu bạn muốn tạo khoảng cách giữa các ô trong một bảng HTML, thuộc tính CSS nào bạn sẽ sử dụng?

A. `padding`
B. `margin`
C. `border-collapse`
D. `border-spacing`

Câu 22: Thuộc tính CSS `float` thường được sử dụng để làm gì trong bố cục trang web?

A. Ẩn một phần tử khỏi trang.
B. Đặt một phần tử nổi về bên trái hoặc bên phải và cho phép các phần tử khác bao quanh nó.
C. Thay đổi màu sắc của phần tử.
D. Tạo hiệu ứng động cho phần tử.

Câu 23: Trong CSS, giá trị `inherit` của một thuộc tính có nghĩa là gì?

A. Thiết lập thuộc tính về giá trị mặc định.
B. Ngăn chặn thuộc tính được áp dụng cho phần tử.
C. Phần tử sẽ kế thừa giá trị của thuộc tính đó từ phần tử cha gần nhất của nó.
D. Không có ý nghĩa gì, giá trị `inherit` không tồn tại trong CSS.

Câu 24: Bạn muốn đảm bảo rằng một phần tử luôn ở một vị trí cố định trên màn hình, ngay cả khi người dùng cuộn trang. Thuộc tính `position` với giá trị nào sẽ giúp bạn đạt được điều này?

A. `relative`
B. `fixed`
C. `absolute`
D. `static`

Câu 25: Sự khác biệt chính giữa `position: relative;` và `position: absolute;` trong CSS là gì?

A. `relative` tạo vị trí cố định, `absolute` tạo vị trí tương đối.
B. `absolute` không thể di chuyển phần tử, `relative` có thể.
C. `relative` định vị dựa trên phần tử gốc, `absolute` dựa trên phần tử cha.
D. `relative` định vị phần tử tương đối so với vị trí ban đầu của nó trong luồng tài liệu, trong khi `absolute` định vị phần tử tương đối so với phần tử tổ tiên đã được định vị gần nhất (hoặc viewport nếu không có).`

Câu 26: Trong CSS, thuộc tính `z-index` có tác dụng gì?

A. Thay đổi kích thước phần tử theo chiều dọc.
B. Thay đổi độ trong suốt của phần tử.
C. Xác định thứ tự xếp chồng của các phần tử khi chúng chồng lên nhau.
D. Không có tác dụng cụ thể, đây là thuộc tính không còn được sử dụng.

Câu 27: Cho CSS: `#box1 { width: 100px; padding: 20px; border: 1px solid black; }`. Tổng chiều rộng thực tế mà phần tử có `id=

A. 100px
B. 142px
C. 120px
D. 101px

Câu 28: Bạn muốn tạo một danh sách các mục mà không có dấu chấm đầu dòng. Thuộc tính CSS nào bạn sẽ sử dụng cho thẻ `

A. `text-decoration: none;`
B. `display: none;`
C. `list-style-type: none;`
D. `list-style-image: none;`

Câu 29: Trong HTML, thuộc tính `id` của một phần tử phải như thế nào trong phạm vi một trang web?

A. Có thể trùng lặp nếu các phần tử có cùng chức năng.
B. Không cần thiết phải duy nhất, có thể sử dụng lại nhiều lần.
C. Phải duy nhất trong phạm vi một phần của trang, nhưng có thể lặp lại ở phần khác.
D. Phải hoàn toàn duy nhất, mỗi `id` chỉ được sử dụng cho một phần tử duy nhất trên toàn bộ trang HTML.

Câu 30: Để thay đổi phông chữ của tất cả các phần tử văn bản trên trang web, bạn nên định nghĩa quy tắc CSS ở đâu?

A. Trong bộ chọn `body` hoặc `html`.
B. Trong bộ chọn `p` (đoạn văn).
C. Trong bộ chọn `span` (văn bản nội tuyến).
D. Chỉ có thể thay đổi phông chữ cho từng phần tử riêng lẻ.

` và thẻ `

` đều được sử dụng trong bảng HTML, nhưng chúng có mục đích khác nhau. Mục đích chính của việc sử dụng thẻ `

` thay vì `

` là gì?

`<th>` chỉ được sử dụng cho hàng tiêu đề của bảng, còn `<td>` cho các hàng dữ liệu.

`<th>` không thể chứa văn bản, chỉ chứa được hình ảnh, còn `<td>` thì ngược lại.

`<th>` tạo ra ô có đường viền đậm hơn `<td>`.

`<th>` thường được dùng cho các ô tiêu đề của bảng hoặc cột, với nội dung mặc định được in đậm và căn giữa, giúp nhấn mạnh tiêu đề.

` (tiêu đề ô) và `

` (dữ liệu ô) trong bảng, liên quan đến ngữ nghĩa và hiển thị mặc định.

10 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

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

11 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

12 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 12: Trong CSS, bộ chọn nào có độ ưu tiên cao nhất khi có xung đột về quy tắc định dạng?

Bộ chọn class

Bộ chọn phần tử (tag name)

Bộ chọn phổ quát (*)

13 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 13: Bạn cần định dạng tất cả các thẻ `

` trên trang web có màu chữ xanh lá cây. Quy tắc CSS nào sau đây sẽ thực hiện điều này?

`p { color: green; }`

`.p { color: green; }`

`#p { color: green; }`

`element.p { color: green; }`

14 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

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

Tạo đường viền xung quanh phần tử.

Tạo khoảng cách giữa phần tử và các phần tử xung quanh.

Định dạng màu nền cho phần tử.

Thay đổi kích thước chữ trong phần tử.

15 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 15: Trong CSS, để nhóm nhiều bộ chọn lại với nhau và áp dụng cùng một bộ quy tắc định dạng, bạn sử dụng dấu gì để phân tách các bộ chọn?

16 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

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

Nội dung 1

Nội dung 2

`. Quy tắc CSS ` .container .text { font-weight: bold; } ` có tác dụng gì?

Làm đậm chữ cho tất cả các phần tử có class `container` và `text`.

Làm đậm chữ cho phần tử có id `container` và tất cả các phần tử có class `text`.

Không có tác dụng gì vì cú pháp CSS sai.

Làm đậm chữ cho tất cả các phần tử có class `text` nằm bên trong phần tử có class `container`.

17 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 17: Điều gì xảy ra khi bạn thiết lập `display: inline;` cho một phần tử `

Phần tử `<div>` sẽ biến mất khỏi trang.

Phần tử `<div>` sẽ trở thành phần tử khối và chiếm toàn bộ chiều rộng.

Phần tử `<div>` sẽ trở thành phần tử nội tuyến và chỉ chiếm không gian cần thiết cho nội dung của nó, không tạo dòng mới.

Không có gì thay đổi, `<div>` vẫn luôn là phần tử khối.

18 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 18: Trong CSS, bạn có thể sử dụng giá trị phần trăm (%) cho thuộc tính `width`. Giá trị phần trăm này được tính dựa trên kích thước của phần tử nào?

Phần tử cha chứa nó.

Chính bản thân phần tử đó.

Kích thước màn hình hiển thị.

Không có cơ sở nào, phần trăm là giá trị tuyệt đối.

19 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 19: Khi đặt tên cho `id` hoặc `class` trong HTML và CSS, quy tắc nào sau đây là đúng?

Tên có thể bắt đầu bằng chữ số.

Tên nên bắt đầu bằng chữ cái và chỉ chứa chữ cái, chữ số, dấu gạch ngang (-) và dấu gạch dưới (_).

Tên có thể chứa dấu cách.

Tên phân biệt chữ hoa và chữ thường, ví dụ `.Text` và `.text` là khác nhau.

20 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 20: Cho đoạn mã HTML: `

Tên	Tuổi
An	20

`. Đoạn mã này sẽ tạo ra một bảng có bao nhiêu hàng dữ liệu (không tính hàng tiêu đề)?

Một hàng

Hai hàng

Ba hàng

Không có hàng dữ liệu nào

21 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 21: Nếu bạn muốn tạo khoảng cách giữa các ô trong một bảng HTML, thuộc tính CSS nào bạn sẽ sử dụng?

22 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 22: Thuộc tính CSS `float` thường được sử dụng để làm gì trong bố cục trang web?

Ẩn một phần tử khỏi trang.

Đặt một phần tử nổi về bên trái hoặc bên phải và cho phép các phần tử khác bao quanh nó.

Thay đổi màu sắc của phần tử.

Tạo hiệu ứng động cho phần tử.

23 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 23: Trong CSS, giá trị `inherit` của một thuộc tính có nghĩa là gì?

Thiết lập thuộc tính về giá trị mặc định.

Ngăn chặn thuộc tính được áp dụng cho phần tử.

Phần tử sẽ kế thừa giá trị của thuộc tính đó từ phần tử cha gần nhất của nó.

Không có ý nghĩa gì, giá trị `inherit` không tồn tại trong CSS.

24 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

25 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 25: Sự khác biệt chính giữa `position: relative;` và `position: absolute;` trong CSS là gì?

`relative` tạo vị trí cố định, `absolute` tạo vị trí tương đối.

`absolute` không thể di chuyển phần tử, `relative` có thể.

`relative` định vị dựa trên phần tử gốc, `absolute` dựa trên phần tử cha.

`relative` định vị phần tử tương đối so với vị trí ban đầu của nó trong luồng tài liệu, trong khi `absolute` định vị phần tử tương đối so với phần tử tổ tiên đã được định vị gần nhất (hoặc viewport nếu không có).`

26 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 26: Trong CSS, thuộc tính `z-index` có tác dụng gì?

Thay đổi kích thước phần tử theo chiều dọc.

Thay đổi độ trong suốt của phần tử.

Xác định thứ tự xếp chồng của các phần tử khi chúng chồng lên nhau.

Không có tác dụng cụ thể, đây là thuộc tính không còn được sử dụng.

27 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 27: Cho CSS: `#box1 { width: 100px; padding: 20px; border: 1px solid black; }`. Tổng chiều rộng thực tế mà phần tử có `id="box1"` chiếm trên trang web là bao nhiêu?

28 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 28: Bạn muốn tạo một danh sách các mục mà không có dấu chấm đầu dòng. Thuộc tính CSS nào bạn sẽ sử dụng cho thẻ `

`text-decoration: none;`

`display: none;`

`list-style-type: none;`

`list-style-image: none;`

29 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 29: Trong HTML, thuộc tính `id` của một phần tử phải như thế nào trong phạm vi một trang web?

Có thể trùng lặp nếu các phần tử có cùng chức năng.

Không cần thiết phải duy nhất, có thể sử dụng lại nhiều lần.

Phải duy nhất trong phạm vi một phần của trang, nhưng có thể lặp lại ở phần khác.

Phải hoàn toàn duy nhất, mỗi `id` chỉ được sử dụng cho một phần tử duy nhất trên toàn bộ trang HTML.

30 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 2

Câu 30: Để thay đổi phông chữ của tất cả các phần tử văn bản trên trang web, bạn nên định nghĩa quy tắc CSS ở đâu?

Trong bộ chọn `body` hoặc `html`.

Trong bộ chọn `p` (đoạn văn).

Trong bộ chọn `span` (văn bản nội tuyến).

Chỉ có thể thay đổi phông chữ cho từng phần tử riêng lẻ.

` trên trang web có cùng một kiểu dáng (ví dụ: màu nền, đường viền). Bộ chọn CSS nào là phù hợp nhất để áp dụng kiểu dáng chung cho nhóm này?

Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 03

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 03 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.

Câu 1: Trong HTML và CSS, sự khác biệt cơ bản về hành vi hiển thị mặc định giữa phần tử khối (block-level) và phần tử nội tuyến (inline-level) là gì?

A. Phần tử khối chỉ chiếm không gian vừa đủ nội dung, còn phần tử nội tuyến luôn chiếm toàn bộ chiều rộng.
B. Phần tử khối cho phép đặt nội dung bên cạnh nó trên cùng một dòng, còn phần tử nội tuyến thì không.
C. Phần tử khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn, còn phần tử nội tuyến nằm trên cùng một dòng với các phần tử khác và chỉ chiếm không gian cần thiết.
D. Phần tử khối không thể chứa phần tử nội tuyến, còn phần tử nội tuyến có thể chứa phần tử khối.

Câu 2: Bạn muốn tạo một đoạn văn bản riêng biệt, luôn bắt đầu trên một dòng mới và có thể thiết lập chiều rộng cố định. Loại phần tử HTML nào thường có hành vi mặc định phù hợp nhất với yêu cầu này?

A. Phần tử khối (block-level)
B. Phần tử nội tuyến (inline-level)
C. Phần tử inline-block
D. Không có loại phần tử mặc định nào có hành vi này.

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

A. Chỉ định màu nền cho phần tử.
B. Thiết lập khoảng cách lề ngoài (margin) cho phần tử.
C. Đặt đường viền (border) cho phần tử.
D. Kiểm soát cách một phần tử HTML được hiển thị (ví dụ: khối, nội tuyến, ẩn).

Câu 4: Bạn có một phần tử `` (mặc định là inline) và muốn nó hiển thị trên một dòng riêng, giống như một đoạn văn bản `

`, nhưng vẫn giữ nguyên thẻ ``. Bạn sẽ sử dụng thuộc tính CSS `display` với giá trị nào?

A. block
B. inline
C. none
D. inline-block

Câu 5: Để làm ẩn hoàn toàn một phần tử HTML khỏi trang web, không chiếm không gian và không hiển thị, bạn sử dụng thuộc tính CSS `display` với giá trị nào?

A. hidden
B. none
C. invisible
D. collapse

Câu 6: Bạn muốn định dạng một nhóm các phần tử `

A. Bộ chọn ID
B. Bộ chọn phần tử (`div`)
C. Bộ chọn Class
D. Bộ chọn thuộc tính

Câu 7: Mã định danh (ID) trong HTML được sử dụng để làm gì?

A. Định dạng chung cho nhiều phần tử.
B. Xác định loại nội dung của phần tử.
C. Nhóm các phần tử có cùng hành vi.
D. Xác định duy nhất một phần tử cụ thể trên trang web.

Câu 8: Quy tắc đặt tên cho ID và Class trong CSS/HTML là gì?

A. Có thể bắt đầu bằng số hoặc dấu gạch ngang.
B. Không được bắt đầu bằng số hoặc dấu gạch ngang.
C. Bắt buộc phải chứa ít nhất một dấu gạch dưới (_).
D. Phải viết hoa toàn bộ.

Câu 9: Cú pháp chính xác để tạo một bộ chọn CSS nhắm mục tiêu đến một phần tử có ID là "header" là gì?

A. #header { ... }
B. .header { ... }
C. id="header" { ... }
D. element#header { ... }

Câu 10: Cú pháp chính xác để tạo một bộ chọn CSS nhắm mục tiêu đến tất cả các phần tử có Class là "highlight" là gì?

A. #highlight { ... }
B. class="highlight" { ... }
C. .highlight { ... }
D. element.highlight { ... }

Câu 11: Một phần tử HTML có thể được áp dụng nhiều Class cùng lúc được không? Nếu có, làm thế nào?

A. Không, mỗi phần tử chỉ có thể có một Class duy nhất.
B. Có, bằng cách sử dụng dấu phẩy để phân tách các tên Class trong thuộc tính `class="class1,class2"`.
C. Có, bằng cách sử dụng dấu chấm để phân tách các tên Class trong thuộc tính `class="class1.class2"`.
D. Có, bằng cách liệt kê các tên Class cách nhau bởi dấu cách trong thuộc tính `class="class1 class2"`.

Câu 12: Bạn có một phần tử `

` với `id="intro"` và `class="text large"`. CSS nào sau đây sẽ áp dụng cho phần tử này?

A. .intro { color: blue; }
B. p#text { color: red; }
C. #large { color: green; }
D. Tất cả các CSS sau đều có thể áp dụng: `#intro { color: blue; }`, `.text { font-size: large; }`, `.large { font-weight: bold; }`.

Câu 13: Trong cấu trúc bảng HTML, thẻ `

A. Tạo một hàng (row) trong bảng.
B. Định nghĩa toàn bộ cấu trúc bảng.
C. Tạo một ô dữ liệu (cell) trong bảng.
D. Định nghĩa tiêu đề cho bảng.

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

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

Câu 17: Xem đoạn mã HTML sau: `

Nội dung 1

Nội dung 2`. Nếu bạn áp dụng CSS `.box { border: 1px solid black; }`, kết quả hiển thị sẽ như thế nào?

A. Cả hai phần tử `div` và `span` sẽ có đường viền màu đen.
B. Chỉ phần tử `div` có đường viền màu đen.
C. Chỉ phần tử `span` có đường viền màu đen.
D. Không có phần tử nào có đường viền vì `div` và `span` là hai loại khác nhau.

Câu 18: Giả sử bạn có CSS như sau: `#myElement { color: red; }`. Nếu bạn áp dụng ID "myElement" cho một phần tử ``, màu chữ của phần tử đó sẽ là gì?

A. Màu đen (mặc định).
B. Màu xanh dương (blue).
C. Màu đỏ (red).
D. Không có màu nào được áp dụng vì `span` là inline.

Câu 19: Bạn muốn tạo một khung viền (border) xung quanh một đoạn văn bản `

`. Thuộc tính CSS nào sau đây liên quan đến việc thiết lập khung?

A. border
B. outline
C. frame
D. box-shadow

Câu 20: Xem xét đoạn HTML: `

Đoạn văn.

`. Nếu bạn áp dụng CSS `.container { display: inline; }`, điều gì có khả năng xảy ra với phần tử `

` bên trong?

A. Phần tử `
` sẽ tự động chuyển thành inline.
B. Phần tử `
` vẫn giữ hành vi mặc định là block, nhưng phần tử `div` chứa nó sẽ hiển thị như inline.
C. Phần tử `
` sẽ bị ẩn đi.
D. Trang web sẽ báo lỗi cú pháp CSS.

Câu 21: Bạn muốn tạo một hộp (box) có chiều rộng và chiều cao cố định, và các hộp này có thể nằm cạnh nhau trên cùng một dòng nếu có đủ không gian, nhưng vẫn có thể thiết lập lề trên/dưới (margin-top/bottom). Bạn nên sử dụng giá trị nào cho thuộc tính `display`?

A. block
B. inline
C. none
D. inline-block

Câu 22: Điều nào sau đây là SAI khi nói về phần tử nội tuyến (inline-level)?

A. Chúng không bắt đầu trên một dòng mới.
B. Chúng chỉ chiếm không gian vừa đủ nội dung của chúng.
C. Bạn có thể thiết lập chiều rộng (`width`) và chiều cao (`height`) cố định cho chúng một cách hiệu quả.
D. Các thuộc tính lề trên/dưới (margin-top/bottom) và đệm trên/dưới (padding-top/bottom) có thể có hành vi không mong muốn hoặc không áp dụng được đầy đủ.

Câu 23: Bạn có một danh sách các mục (`

` trong thẻ `

`?
- A. block
- B. none
- C. table-cell
- D. inline-block

Câu 24: Giả sử bạn có một phần tử ``. CSS nào sau đây sẽ làm thay đổi màu nền của nút này thành xanh lá cây?

A. #submitBtn { background-color: green; }
B. .submitBtn { background-color: green; }
C. button[id="submitBtn"] { background-color: green; }
D. element#submitBtn { background-color: green; }

Câu 25: Trong một bảng HTML, thẻ `

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

A. Phần tử inline theo mặc định chỉ chiếm không gian cần thiết cho nội dung và bỏ qua các thiết lập `width` và `height` cố định.

A. Định nghĩa chân trang của bảng.
B. Nhóm các hàng tiêu đề của bảng.
C. Cung cấp tiêu đề hoặc mô tả cho bảng.
D. Định nghĩa phần thân của bảng.

Câu 26: Bạn có một phần tử ``. Bạn muốn áp dụng các kiểu dáng từ cả hai lớp "responsive-img" và "small". CSS nào sau đây sẽ nhắm mục tiêu chính xác đến phần tử này?

A. .responsive-img, .small { ... }
B. .responsive-img.small { ... }
C. #responsive-img #small { ... }
D. img .responsive-img .small { ... }

Câu 27: Tại sao việc áp dụng thuộc tính `width: 200px;` cho một phần tử `` (mặc định là inline) trong CSS thường không có hiệu quả hiển thị như mong đợi?

B. Thẻ `` không hỗ trợ thuộc tính `width` trong CSS.

C. Bạn cần sử dụng thuộc tính `size` thay vì `width` cho phần tử ``.

D. Chỉ các phần tử block mới có thể nhận thuộc tính `width`.

Câu 28: Xem xét đoạn mã HTML: `

Tiêu đề

Nội dung.

`. CSS nào sau đây sẽ chỉ áp dụng màu xanh cho đoạn văn bản có class "content" nằm bên trong phần tử có id "main"?

A. .content { color: blue; }
B. #main { color: blue; }
C. div p { color: blue; }
D. #main .content { color: blue; }

Câu 29: Bạn muốn tạo một đường viền màu đỏ, nét liền, dày 2 pixel xung quanh một hình ảnh. Thuộc tính CSS `border` đầy đủ sẽ là gì?

A. border: 2px solid red;
B. border-width: 2px; border-style: solid; border-color: red;
C. border: red solid 2px;
D. border-color: red; border-style: solid; border-thickness: 2px;

Câu 30: Điều gì xảy ra khi bạn đặt thuộc tính `display: inline-block;` cho một phần tử `` (mặc định là inline)?

A. Phần tử trở thành block và chiếm toàn bộ chiều rộng.
B. Phần tử bị ẩn khỏi trang.
C. Phần tử vẫn nằm trên cùng dòng với các phần tử khác (như inline) nhưng bạn có thể thiết lập chiều rộng, chiều cao, lề trên/dưới (như block).
D. Hành vi của phần tử không thay đổi vì `` đã là inline.

1 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 1: Trong HTML và CSS, sự khác biệt cơ bản về hành vi hiển thị mặc định giữa phần tử khối (block-level) và phần tử nội tuyến (inline-level) là gì?

Phần tử khối chỉ chiếm không gian vừa đủ nội dung, còn phần tử nội tuyến luôn chiếm toàn bộ chiều rộng.

Phần tử khối cho phép đặt nội dung bên cạnh nó trên cùng một dòng, còn phần tử nội tuyến thì không.

Phần tử khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn, còn phần tử nội tuyến nằm trên cùng một dòng với các phần tử khác và chỉ chiếm không gian cần thiết.

Phần tử khối không thể chứa phần tử nội tuyến, còn phần tử nội tuyến có thể chứa phần tử khối.

2 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Phần tử khối (block-level)

Phần tử nội tuyến (inline-level)

Phần tử inline-block

Không có loại phần tử mặc định nào có hành vi này.

3 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

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

Chỉ định màu nền cho phần tử.

Thiết lập khoảng cách lề ngoài (margin) cho phần tử.

Đặt đường viền (border) cho phần tử.

Kiểm soát cách một phần tử HTML được hiển thị (ví dụ: khối, nội tuyến, ẩn).

4 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 4: Bạn có một phần tử `` (mặc định là inline) và muốn nó hiển thị trên một dòng riêng, giống như một đoạn văn bản `

`, nhưng vẫn giữ nguyên thẻ ``. Bạn sẽ sử dụng thuộc tính CSS `display` với giá trị nào?

5 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 5: Để làm ẩn hoàn toàn một phần tử HTML khỏi trang web, không chiếm không gian và không hiển thị, bạn sử dụng thuộc tính CSS `display` với giá trị nào?

6 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 6: Bạn muốn định dạng một nhóm các phần tử `

` trên trang web có cùng một kiểu dáng (ví dụ: màu nền, đường viền). Bộ chọn CSS nào là phù hợp nhất để áp dụng kiểu dáng chung cho nhóm này?

Định dạng chung cho nhiều phần tử.

Bộ chọn phần tử (`div`)

Bộ chọn Class

Bộ chọn thuộc tính

7 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 7: Mã định danh (ID) trong HTML được sử dụng để làm gì?

Xác định loại nội dung của phần tử.

Nhóm các phần tử có cùng hành vi.

Xác định duy nhất một phần tử cụ thể trên trang web.

8 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 8: Quy tắc đặt tên cho ID và Class trong CSS/HTML là gì?

Có thể bắt đầu bằng số hoặc dấu gạch ngang.

Không được bắt đầu bằng số hoặc dấu gạch ngang.

Bắt buộc phải chứa ít nhất một dấu gạch dưới (_).

Phải viết hoa toàn bộ.

9 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 9: Cú pháp chính xác để tạo một bộ chọn CSS nhắm mục tiêu đến một phần tử có ID là 'header' là gì?

#header { ... }

.header { ... }

id='header' { ... }

element#header { ... }

10 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 10: Cú pháp chính xác để tạo một bộ chọn CSS nhắm mục tiêu đến tất cả các phần tử có Class là 'highlight' là gì?

#highlight { ... }

class='highlight' { ... }

.highlight { ... }

element.highlight { ... }

11 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 11: Một phần tử HTML có thể được áp dụng nhiều Class cùng lúc được không? Nếu có, làm thế nào?

Không, mỗi phần tử chỉ có thể có một Class duy nhất.

Có, bằng cách sử dụng dấu phẩy để phân tách các tên Class trong thuộc tính `class='class1,class2'`.

Có, bằng cách sử dụng dấu chấm để phân tách các tên Class trong thuộc tính `class='class1.class2'`.

Có, bằng cách liệt kê các tên Class cách nhau bởi dấu cách trong thuộc tính `class='class1 class2'`.

12 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 12: Bạn có một phần tử `

` với `id='intro'` và `class='text large'`. CSS nào sau đây sẽ áp dụng cho phần tử này?

.intro { color: blue; }

p#text { color: red; }

#large { color: green; }

Tất cả các CSS sau đều có thể áp dụng: `#intro { color: blue; }`, `.text { font-size: large; }`, `.large { font-weight: bold; }`.

13 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 13: Trong cấu trúc bảng HTML, thẻ `

Tạo một hàng (row) trong bảng.

Định nghĩa toàn bộ cấu trúc bảng.

Tạo một ô dữ liệu (cell) trong bảng.

Định nghĩa tiêu đề cho bảng.

14 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

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

15 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

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

<tr>

<th>

<td>

16 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

17 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 17: Xem đoạn mã HTML sau: `

Nội dung 1

Nội dung 2`. Nếu bạn áp dụng CSS `.box { border: 1px solid black; }`, kết quả hiển thị sẽ như thế nào?

Cả hai phần tử `div` và `span` sẽ có đường viền màu đen.

Chỉ phần tử `div` có đường viền màu đen.

Chỉ phần tử `span` có đường viền màu đen.

Không có phần tử nào có đường viền vì `div` và `span` là hai loại khác nhau.

18 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 18: Giả sử bạn có CSS như sau: `#myElement { color: red; }`. Nếu bạn áp dụng ID 'myElement' cho một phần tử ``, màu chữ của phần tử đó sẽ là gì?

Màu đen (mặc định).

Màu xanh dương (blue).

Màu đỏ (red).

Không có màu nào được áp dụng vì `span` là inline.

19 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 19: Bạn muốn tạo một khung viền (border) xung quanh một đoạn văn bản `

`. Thuộc tính CSS nào sau đây liên quan đến việc thiết lập khung?

20 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 20: Xem xét đoạn HTML: `

Đoạn văn.

`. Nếu bạn áp dụng CSS `.container { display: inline; }`, điều gì có khả năng xảy ra với phần tử `

` bên trong?

Phần tử `<p>` sẽ tự động chuyển thành inline.

Phần tử `<p>` vẫn giữ hành vi mặc định là block, nhưng phần tử `div` chứa nó sẽ hiển thị như inline.

Phần tử `<p>` sẽ bị ẩn đi.

Trang web sẽ báo lỗi cú pháp CSS.

21 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

22 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 22: Điều nào sau đây là SAI khi nói về phần tử nội tuyến (inline-level)?

Chúng không bắt đầu trên một dòng mới.

Chúng chỉ chiếm không gian vừa đủ nội dung của chúng.

Bạn có thể thiết lập chiều rộng (`width`) và chiều cao (`height`) cố định cho chúng một cách hiệu quả.

Các thuộc tính lề trên/dưới (margin-top/bottom) và đệm trên/dưới (padding-top/bottom) có thể có hành vi không mong muốn hoặc không áp dụng được đầy đủ.

23 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 23: Bạn có một danh sách các mục (`

24 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 24: Giả sử bạn có một phần tử ``. CSS nào sau đây sẽ làm thay đổi màu nền của nút này thành xanh lá cây?

#submitBtn { background-color: green; }

.submitBtn { background-color: green; }

button[id='submitBtn'] { background-color: green; }

element#submitBtn { background-color: green; }

25 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 25: Trong một bảng HTML, thẻ `

Định nghĩa chân trang của bảng.

Nhóm các hàng tiêu đề của bảng.

Cung cấp tiêu đề hoặc mô tả cho bảng.

Định nghĩa phần thân của bảng.

26 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 26: Bạn có một phần tử ``. Bạn muốn áp dụng các kiểu dáng từ cả hai lớp 'responsive-img' và 'small'. CSS nào sau đây sẽ nhắm mục tiêu chính xác đến phần tử này?

.responsive-img, .small { ... }

.responsive-img.small { ... }

#responsive-img #small { ... }

img .responsive-img .small { ... }

27 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 27: Tại sao việc áp dụng thuộc tính `width: 200px;` cho một phần tử `` (mặc định là inline) trong CSS thường không có hiệu quả hiển thị như mong đợi?

Phần tử inline theo mặc định chỉ chiếm không gian cần thiết cho nội dung và bỏ qua các thiết lập `width` và `height` cố định.

Thẻ `<a>` không hỗ trợ thuộc tính `width` trong CSS.

Bạn cần sử dụng thuộc tính `size` thay vì `width` cho phần tử `<a>`.

Chỉ các phần tử block mới có thể nhận thuộc tính `width`.

28 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 28: Xem xét đoạn mã HTML: `

Tiêu đề

Nội dung.

`. CSS nào sau đây sẽ chỉ áp dụng màu xanh cho đoạn văn bản có class 'content' nằm bên trong phần tử có id 'main'?

.content { color: blue; }

#main { color: blue; }

div p { color: blue; }

#main .content { color: blue; }

29 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 29: Bạn muốn tạo một đường viền màu đỏ, nét liền, dày 2 pixel xung quanh một hình ảnh. Thuộc tính CSS `border` đầy đủ sẽ là gì?

border: 2px solid red;

border-width: 2px; border-style: solid; border-color: red;

border: red solid 2px;

border-color: red; border-style: solid; border-thickness: 2px;

30 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 3

Câu 30: Điều gì xảy ra khi bạn đặt thuộc tính `display: inline-block;` cho một phần tử `` (mặc định là inline)?

Phần tử trở thành block và chiếm toàn bộ chiều rộng.

Phần tử bị ẩn khỏi trang.

Phần tử vẫn nằm trên cùng dòng với các phần tử khác (như inline) nhưng bạn có thể thiết lập chiều rộng, chiều cao, lề trên/dưới (như block).

Hành vi của phần tử không thay đổi vì `<img>` đã là inline.

Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 04

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 04 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.

Câu 1: Trong mô hình hộp CSS (CSS Box Model), thành phần nào nằm ngoài cùng, tạo khoảng trống giữa các phần tử và không bao gồm đường viền hay đệm?

A. Content (Nội dung)
B. Padding (Đệm)
C. Border (Đường viền)
D. Margin (Lề ngoài)

Câu 2: Giả sử bạn có một phần tử `div` với CSS sau: `width: 200px; padding: 10px; border: 5px solid black; margin: 15px;`. Theo mô hình hộp mặc định (`box-sizing: content-box;`), tổng chiều rộng mà phần tử này chiếm trên trang là bao nhiêu?

A. 200px
B. 220px
C. 250px
D. 280px

Câu 3: Thuộc tính CSS `display: inline-block;` mang lại đặc điểm kết hợp nào cho một phần tử?

A. Phần tử nằm trên cùng một dòng với các phần tử inline khác nhưng vẫn có thể thiết lập chiều rộng, chiều cao, lề trên/dưới.
B. Phần tử luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có thể, nhưng không thể thiết lập chiều cao.
C. Phần tử bị ẩn hoàn toàn khỏi trang và không chiếm bất kỳ không gian nào.
D. Phần tử nằm trên cùng một dòng và chỉ chiếm không gian vừa đủ nội dung, không thể thiết lập chiều rộng hay chiều cao rõ ràng.

Câu 4: Bạn muốn ẩn một phần tử khỏi trang web sao cho nó không còn chiếm bất kỳ không gian nào trong bố cục. Thuộc tính CSS nào phù hợp nhất để đạt được điều này?

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

Câu 5: Sự khác biệt cơ bản nhất giữa bộ chọn ID và bộ chọn Class trong CSS là gì?

A. Bộ chọn ID dùng cho các phần tử HTML5 mới, còn Class dùng cho các phần tử cũ hơn.
B. Bộ chọn ID có độ ưu tiên thấp hơn Class khi áp dụng CSS.
C. Một ID chỉ được sử dụng cho một phần tử duy nhất trên trang, trong khi một Class có thể được áp dụng cho nhiều phần tử.
D. Bộ chọn ID chỉ có thể định dạng màu sắc và phông chữ, còn Class có thể định dạng bố cục.

Câu 6: Bạn có đoạn HTML sau: `

` dùng để tạo bảng. Để xác định một hàng trong bảng, bạn sử dụng thẻ nào?

`. Để áp dụng kiểu CSS chỉ khi phần tử `div` có cả hai class `box` và `primary`, bạn sẽ sử dụng bộ chọn CSS nào?

A. .box .primary
B. .box, .primary
C. #box.primary
D. .box.primary

Câu 7: Khi sử dụng thuộc tính `margin` trong CSS, giá trị âm có ý nghĩa gì?

A. Luôn gây ra lỗi hiển thị.
B. Làm cho phần tử chồng lấn lên các phần tử liền kề.
C. Làm tăng khoảng trống giữa các phần tử.
D. Chỉ có tác dụng khi sử dụng thuộc tính `position: absolute;`.

Câu 8: Thuộc tính CSS `box-sizing: border-box;` thay đổi cách tính kích thước của phần tử như thế nào?

A. Chiều rộng và chiều cao đã đặt sẽ bao gồm cả padding và border, nội dung sẽ co lại cho vừa.
B. Chiều rộng và chiều cao đã đặt chỉ áp dụng cho nội dung, padding và border được thêm vào bên ngoài.
C. Padding được tính vào kích thước, nhưng border thì không.
D. Border được tính vào kích thước, nhưng padding thì không.

Câu 9: Bạn muốn tạo một đường viền chỉ ở phía dưới của một phần tử `div` với độ dày 2px, kiểu nét đứt và màu xanh lam. Đoạn CSS nào sau đây thực hiện đúng yêu cầu đó?

A. border: 2px dashed blue;
B. border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: blue;
C. border-bottom: 2px dashed blue;
D. border-style: dashed; border-color: blue; border-width: 2px;

Câu 10: Trong HTML, thẻ `

Câu 11: Thẻ `

` trong cấu trúc bảng HTML thường được sử dụng với mục đích gì về mặt ngữ nghĩa?

A. Đại diện cho các ô tiêu đề của cột hoặc hàng.
B. Đại diện cho các ô dữ liệu thông thường.
C. Xác định phần thân của bảng.
D. Xác định phần chân của bảng.

Câu 12: Bạn muốn đảm bảo rằng một phần tử `img` không bao giờ vượt quá chiều rộng của phần tử chứa nó, đồng thời vẫn giữ nguyên tỉ lệ khung hình. Thuộc tính CSS nào là quan trọng nhất để sử dụng?

A. width: 100%; height: auto;
B. height: 100%; width: auto;
C. min-width: 100%;
D. max-width: 100%; height: auto;

Câu 13: Giả sử bạn có một khối `div` với nội dung quá dài so với kích thước cố định của nó. Bạn muốn nội dung thừa bị cắt bớt và không hiển thị. Thuộc tính CSS nào sẽ giúp bạn làm điều này?

A. overflow: hidden;
B. overflow: scroll;
C. overflow: auto;
D. text-overflow: ellipsis;

Câu 14: Thuộc tính `visibility: hidden;` khác với `display: none;` ở điểm nào?

A. `visibility: hidden;` chỉ làm ẩn nội dung, còn `display: none;` làm ẩn cả phần tử và khung.
B. `visibility: hidden;` không thể áp dụng cho phần tử inline.
C. `visibility: hidden;` ẩn phần tử nhưng vẫn giữ lại không gian mà nó chiếm trong bố cục, còn `display: none;` ẩn phần tử và loại bỏ nó khỏi luồng bố cục.
D. `visibility: hidden;` làm cho phần tử trong suốt, còn `display: none;` làm cho nó vô hình.

Câu 15: Bạn có một danh sách các mục (`

`) bên trong một thẻ `

mỗi

A. li:last-child { border-bottom: none; }
B. li:not(:last-child) { border-bottom: 1px solid grey; }
C. ul > li { border-bottom: 1px solid grey; } li:last-child { border-bottom: none; }
D. li + li { border-top: 1px solid grey; }

Câu 16: Khi hai phần tử khối liền kề theo chiều dọc đều có lề ngoài (`margin`), hiện tượng gì có thể xảy ra với các lề này theo mặc định?

A. Các lề dọc có thể gộp lại (margin collapsing), chỉ lấy giá trị lề lớn hơn.
B. Các lề ngang có thể gộp lại.
C. Các lề luôn được cộng lại tạo ra khoảng trống lớn hơn.
D. Lề của phần tử thứ hai sẽ bị bỏ qua.

Câu 17: Đơn vị đo nào trong CSS thường được sử dụng để thiết lập kích thước liên quan đến kích thước phông chữ của phần tử gốc (root element - ``), giúp dễ dàng thay đổi kích thước tổng thể của bố cục chỉ bằng cách thay đổi phông chữ gốc?

A. px
B. em
C. %
D. rem

Câu 18: Bạn muốn tạo một khối `div` có chiều rộng bằng 50% chiều rộng của phần tử chứa nó và chiều cao cố định là 150px. Đoạn CSS nào sau đây thực hiện đúng yêu cầu đó?

A. width: 50%; height: 150px;
B. width: 50px; height: 150%;
C. max-width: 50%; min-height: 150px;
D. width: 50vw; height: 150vh;

Câu 19: Khi nào bạn nên cân nhắc sử dụng thuộc tính `outline` thay vì `border` trong CSS?

A. Khi muốn đường viền được tính vào kích thước của phần tử.
B. Khi muốn tạo khoảng trống giữa đường viền và nội dung.
C. Khi muốn tạo một đường nét xung quanh phần tử mà không ảnh hưởng đến bố cục (không chiếm không gian).
D. Khi muốn tạo đường viền cho các phần tử inline.

Câu 20: Bạn có một khối văn bản trong một `div`. Bạn muốn thêm khoảng trống bên trong khối `div` giữa nội dung văn bản và đường viền của `div`. Thuộc tính CSS nào được sử dụng cho mục đích này?

A. margin
B. padding
C. border-spacing
D. line-height

Câu 21: Cho đoạn CSS sau: `div { margin: 10px 20px 15px; }`. Giá trị `10px`, `20px`, `15px` lần lượt áp dụng cho các lề nào của phần tử `div`?

A. Trên, Dưới, Trái/Phải
B. Trên/Dưới, Trái, Phải
C. Trên, Trái, Phải/Dưới
D. Trên, Trái/Phải, Dưới

Câu 22: Bạn có một phần tử `span` (mặc định là inline). Nếu bạn áp dụng CSS `width: 100px; height: 50px;` cho phần tử này, điều gì sẽ xảy ra theo mặc định?

A. Chiều rộng sẽ là 100px và chiều cao sẽ là 50px.
B. Chiều rộng sẽ là 100px, nhưng chiều cao sẽ tự động điều chỉnh theo nội dung.
C. Các thuộc tính `width` và `height` sẽ bị bỏ qua vì phần tử inline không nhận kích thước rõ ràng.
D. Phần tử sẽ tự động chuyển thành phần tử block và nhận kích thước đã đặt.

Câu 23: Để tạo một khoảng trống giữa các ô (`

` hoặc `

`) trong một bảng HTML mà không thêm border-spacing, bạn có thể sử dụng thuộc tính CSS nào trên các ô đó?

A. padding
B. margin
C. border-width
D. outline

Câu 24: Trong bối cảnh thiết kế đáp ứng (responsive design), tại sao việc sử dụng đơn vị phần trăm (%) cho chiều rộng (`width`) của các khối (block elements) lại phổ biến hơn đơn vị pixel cố định?

A. Đơn vị phần trăm tải trang nhanh hơn.
B. Chiều rộng theo phần trăm sẽ tự động co giãn theo kích thước của phần tử chứa, giúp bố cục thích ứng với các kích thước màn hình khác nhau.
C. Đơn vị phần trăm chỉ hoạt động trên thiết bị di động.
D. Đơn vị phần trăm cho phép áp dụng lề âm dễ dàng hơn.

Câu 25: Bạn có một phần tử `div` với `width: 300px;`. Nếu bạn thêm `padding: 20px;` và `box-sizing: border-box;`, chiều rộng thực tế của vùng nội dung bên trong `div` là bao nhiêu?

A. 260px
B. 300px
C. 340px
D. Không thể xác định nếu không biết border-width.

Câu 26: Để tạo hiệu ứng khi người dùng di chuột qua một phần tử, làm thay đổi màu nền và đường viền của nó, bạn sẽ sử dụng bộ chọn giả (pseudo-class) nào kết hợp với bộ chọn của phần tử?

A. :active
B. :focus
C. :visited
D. :hover

Câu 27: Giả sử bạn có đoạn HTML `

`. Để áp dụng kiểu CSS chỉ cho thẻ `

` nằm bên trong thẻ `div` có id là "header", bạn sử dụng bộ chọn nào?

A. div h1

B. #header h1

C. .header h1

D. h1#header

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

A. Làm tròn các góc của phần tử.
B. Điều chỉnh khoảng cách giữa các chữ cái trong đường viền.
C. Thay đổi kiểu đường viền.
D. Tạo bóng cho phần tử.

Câu 29: Bạn muốn tạo một đường viền cho một phần tử, nhưng đường viền này không được phép bị cắt bởi bất kỳ nội dung nào tràn ra ngoài phần tử. Thuộc tính nào liên quan đến `overflow` có thể cần xem xét kết hợp với border?

A. overflow-border: hidden;
B. border-overflow: visible;
C. Kết hợp `overflow: hidden;` hoặc `overflow: auto;` trên phần tử chứa nội dung.
D. Sử dụng thuộc tính `clip`.

Câu 30: Khi bạn áp dụng thuộc tính `border` với một giá trị duy nhất (ví dụ: `border: 1px solid black;`), giá trị này sẽ được áp dụng cho những cạnh nào của phần tử?

A. Chỉ cạnh trên và cạnh dưới.
B. Chỉ cạnh trái và cạnh phải.
C. Chỉ cạnh dưới.
D. Tất cả bốn cạnh (trên, dưới, trái, phải).

1 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 1: Trong mô hình hộp CSS (CSS Box Model), thành phần nào nằm ngoài cùng, tạo khoảng trống giữa các phần tử và không bao gồm đường viền hay đệm?

2 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

3 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 3: Thuộc tính CSS `display: inline-block;` mang lại đặc điểm kết hợp nào cho một phần tử?

Phần tử nằm trên cùng một dòng với các phần tử inline khác nhưng vẫn có thể thiết lập chiều rộng, chiều cao, lề trên/dưới.

Phần tử luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có thể, nhưng không thể thiết lập chiều cao.

Phần tử bị ẩn hoàn toàn khỏi trang và không chiếm bất kỳ không gian nào.

Phần tử nằm trên cùng một dòng và chỉ chiếm không gian vừa đủ nội dung, không thể thiết lập chiều rộng hay chiều cao rõ ràng.

4 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

visibility: hidden;

display: none;

opacity: 0;

height: 0; overflow: hidden;

5 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 5: Sự khác biệt cơ bản nhất giữa bộ chọn ID và bộ chọn Class trong CSS là gì?

Bộ chọn ID dùng cho các phần tử HTML5 mới, còn Class dùng cho các phần tử cũ hơn.

Bộ chọn ID có độ ưu tiên thấp hơn Class khi áp dụng CSS.

Một ID chỉ được sử dụng cho một phần tử duy nhất trên trang, trong khi một Class có thể được áp dụng cho nhiều phần tử.

Bộ chọn ID chỉ có thể định dạng màu sắc và phông chữ, còn Class có thể định dạng bố cục.

6 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 6: Bạn có đoạn HTML sau: `

Luôn gây ra lỗi hiển thị.

`. Để áp dụng kiểu CSS chỉ khi phần tử `div` có cả hai class `box` và `primary`, bạn sẽ sử dụng bộ chọn CSS nào?

7 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 7: Khi sử dụng thuộc tính `margin` trong CSS, giá trị âm có ý nghĩa gì?

Làm cho phần tử chồng lấn lên các phần tử liền kề.

Làm tăng khoảng trống giữa các phần tử.

Chỉ có tác dụng khi sử dụng thuộc tính `position: absolute;`.

8 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 8: Thuộc tính CSS `box-sizing: border-box;` thay đổi cách tính kích thước của phần tử như thế nào?

Chiều rộng và chiều cao đã đặt sẽ bao gồm cả padding và border, nội dung sẽ co lại cho vừa.

Chiều rộng và chiều cao đã đặt chỉ áp dụng cho nội dung, padding và border được thêm vào bên ngoài.

Padding được tính vào kích thước, nhưng border thì không.

Border được tính vào kích thước, nhưng padding thì không.

9 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

border: 2px dashed blue;

border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: blue;

border-bottom: 2px dashed blue;

border-style: dashed; border-color: blue; border-width: 2px;

10 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 10: Trong HTML, thẻ `

` dùng để tạo bảng. Để xác định một *hàng* trong bảng, bạn sử dụng thẻ nào?

11 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 11: Thẻ `

` trong cấu trúc bảng HTML thường được sử dụng với mục đích gì về mặt ngữ nghĩa?

Đại diện cho các ô tiêu đề của cột hoặc hàng.

Đại diện cho các ô dữ liệu thông thường.

Xác định phần thân của bảng.

Xác định phần chân của bảng.

12 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

width: 100%; height: auto;

height: 100%; width: auto;

min-width: 100%;

max-width: 100%; height: auto;

13 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

overflow: hidden;

overflow: scroll;

overflow: auto;

text-overflow: ellipsis;

14 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 14: Thuộc tính `visibility: hidden;` khác với `display: none;` ở điểm nào?

`visibility: hidden;` chỉ làm ẩn nội dung, còn `display: none;` làm ẩn cả phần tử và khung.

`visibility: hidden;` không thể áp dụng cho phần tử inline.

`visibility: hidden;` ẩn phần tử nhưng vẫn giữ lại không gian mà nó chiếm trong bố cục, còn `display: none;` ẩn phần tử và loại bỏ nó khỏi luồng bố cục.

`visibility: hidden;` làm cho phần tử trong suốt, còn `display: none;` làm cho nó vô hình.

15 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 15: Bạn có một danh sách các mục (`

`) bên trong một thẻ `

li:last-child { border-bottom: none; }

li:not(:last-child) { border-bottom: 1px solid grey; }

ul > li { border-bottom: 1px solid grey; } li:last-child { border-bottom: none; }

li + li { border-top: 1px solid grey; }

16 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 16: Khi hai phần tử khối liền kề theo chiều dọc đều có lề ngoài (`margin`), hiện tượng gì có thể xảy ra với các lề này theo mặc định?

Các lề dọc có thể gộp lại (margin collapsing), chỉ lấy giá trị lề lớn hơn.

Các lề ngang có thể gộp lại.

Các lề luôn được cộng lại tạo ra khoảng trống lớn hơn.

Lề của phần tử thứ hai sẽ bị bỏ qua.

17 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

rem

18 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

width: 50%; height: 150px;

width: 50px; height: 150%;

max-width: 50%; min-height: 150px;

width: 50vw; height: 150vh;

19 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 19: Khi nào bạn nên cân nhắc sử dụng thuộc tính `outline` thay vì `border` trong CSS?

Khi muốn đường viền được tính vào kích thước của phần tử.

Khi muốn tạo khoảng trống giữa đường viền và nội dung.

Khi muốn tạo một đường nét xung quanh phần tử mà không ảnh hưởng đến bố cục (không chiếm không gian).

Khi muốn tạo đường viền cho các phần tử inline.

20 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

21 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 21: Cho đoạn CSS sau: `div { margin: 10px 20px 15px; }`. Giá trị `10px`, `20px`, `15px` lần lượt áp dụng cho các lề nào của phần tử `div`?

Trên, Dưới, Trái/Phải

Trên/Dưới, Trái, Phải

Trên, Trái, Phải/Dưới

Trên, Trái/Phải, Dưới

22 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 22: Bạn có một phần tử `span` (mặc định là inline). Nếu bạn áp dụng CSS `width: 100px; height: 50px;` cho phần tử này, điều gì sẽ xảy ra theo mặc định?

Chiều rộng sẽ là 100px và chiều cao sẽ là 50px.

Chiều rộng sẽ là 100px, nhưng chiều cao sẽ tự động điều chỉnh theo nội dung.

Các thuộc tính `width` và `height` sẽ bị bỏ qua vì phần tử inline không nhận kích thước rõ ràng.

Phần tử sẽ tự động chuyển thành phần tử block và nhận kích thước đã đặt.

23 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 23: Để tạo một khoảng trống giữa các ô (`

` hoặc `

`) trong một bảng HTML mà không thêm border-spacing, bạn có thể sử dụng thuộc tính CSS nào trên các ô đó?

24 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Đơn vị phần trăm tải trang nhanh hơn.

Chiều rộng theo phần trăm sẽ tự động co giãn theo kích thước của phần tử chứa, giúp bố cục thích ứng với các kích thước màn hình khác nhau.

Đơn vị phần trăm chỉ hoạt động trên thiết bị di động.

Đơn vị phần trăm cho phép áp dụng lề âm dễ dàng hơn.

25 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

260px

300px

340px

Không thể xác định nếu không biết border-width.

26 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

27 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Câu 27: Giả sử bạn có đoạn HTML `

`. Để áp dụng kiểu CSS chỉ cho thẻ `

` nằm bên trong thẻ `div` có id là 'header', bạn sử dụng bộ chọn nào?

28 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

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

Làm tròn các góc của phần tử.

Điều chỉnh khoảng cách giữa các chữ cái trong đường viền.

Thay đổi kiểu đường viền.

Tạo bóng cho phần tử.

29 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

overflow-border: hidden;

border-overflow: visible;

Kết hợp `overflow: hidden;` hoặc `overflow: auto;` trên phần tử chứa nội dung.

Sử dụng thuộc tính `clip`.

30 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 4

Chỉ cạnh trên và cạnh dưới.

Chỉ cạnh trái và cạnh phải.

Chỉ cạnh dưới.

Tất cả bốn cạnh (trên, dưới, trái, phải).

D. Màu mặc định của trình duyệt.

Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

Trắc nghiệm Công nghệ 10 Kết nối tri thức Bài 21: Phương pháp, phương tiện hỗ trợ thiết kế kĩ thuật

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 05

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 05 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.

Câu 1: Mô hình hộp (CSS Box Model) trong thiết kế web mô tả cấu trúc của một phần tử HTML dưới dạng các lớp lồng nhau. Thứ tự các lớp từ ngoài vào trong là gì?

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

Câu 2: Cho đoạn mã CSS sau:
```css
div {
margin: 10px 20px 15px 5px;
}
```
Lề ngoài (margin) của phần tử `div` sẽ được áp dụng như thế nào?

A. Tất cả các cạnh đều là 10px.
B. Lề trên 10px, lề dưới 20px, lề trái 15px, lề phải 5px.
C. Lề trên 10px, lề phải 20px, lề dưới 15px, lề trái 5px.
D. Lề trên và dưới 10px, lề trái và phải 20px.

Câu 3: Thuộc tính CSS nào được sử dụng để tạo khoảng trống bên trong đường viền (border) của một phần tử, giữa đường viền và nội dung?

A. margin
B. padding
C. border-spacing
D. outline

Câu 4: Cho một phần tử `div` có chiều rộng nội dung (content width) là 200px. Nếu CSS áp dụng là `padding: 10px; border: 5px solid black; margin: 15px; box-sizing: content-box;`, thì tổng chiều rộng thực tế của phần tử `div` trên trang (bao gồm margin) là bao nhiêu?

A. 200px
B. 230px
C. 240px
D. 270px

Câu 5: Tiếp tục từ Câu 4, nếu CSS áp dụng là `padding: 10px; border: 5px solid black; margin: 15px; box-sizing: border-box; width: 200px;`, thì tổng chiều rộng thực tế của phần tử `div` trên trang (bao gồm margin) là bao nhiêu?

A. 200px
B. 230px
C. 240px
D. 270px

Câu 6: Hiện tượng gộp lề (margin collapsing) xảy ra khi lề trên (margin-top) và lề dưới (margin-bottom) của hai phần tử khối liền kề gặp nhau. Lề gộp lại sẽ có giá trị bằng:

A. Giá trị lớn hơn giữa hai lề.
B. Tổng giá trị của hai lề.
C. Giá trị nhỏ hơn giữa hai lề.
D. Hiệu giá trị của hai lề.

Câu 7: Phần tử có thuộc tính `display: block;` trong CSS thường có đặc điểm bố cục như thế nào?

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

Câu 8: Phần tử có thuộc tính `display: inline;` trong CSS có đặc điểm bố cục nào sau đây?

A. Luôn bắt đầu trên một dòng mới.
B. Có thể thiết lập chiều rộng và chiều cao tùy ý.
C. Tự động chiếm toàn bộ chiều rộng của phần tử cha.
D. Nằm trên cùng một dòng với các phần tử nội tuyến khác và chỉ chiếm không gian cần thiết.

Câu 9: Bạn muốn hiển thị nhiều hình ảnh nhỏ (là phần tử ``, mặc định là `inline`) trên cùng một dòng, nhưng mỗi hình ảnh cần có lề trên/dưới và một chiều rộng/chiều cao cố định. Bạn nên sử dụng giá trị nào cho thuộc tính `display`?

A. inline-block
B. block
C. inline
D. none

Câu 10: Sự khác biệt chính giữa `display: none;` và `visibility: hidden;` trong CSS là gì?

A. `display: none;` chỉ ẩn nội dung, còn `visibility: hidden;` ẩn cả nội dung và phần tử.
B. `display: none;` loại bỏ hoàn toàn phần tử khỏi luồng bố cục, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian của nó trên trang.
C. `visibility: hidden;` làm cho phần tử trong suốt, còn `display: none;` làm cho nó không hiển thị.
D. Không có sự khác biệt đáng kể giữa hai thuộc tính này.

Câu 11: Để định dạng duy nhất cho một phần tử HTML cụ thể trên trang web, bộ chọn CSS nào là phù hợp nhất?

A. Bộ chọn ID (ví dụ: `#myElement`)
B. Bộ chọn Class (ví dụ: `.myClass`)
C. Bộ chọn phần tử (ví dụ: `div`)
D. Bộ chọn thuộc tính (ví dụ: `[type=

Câu 12: Bạn muốn áp dụng cùng một kiểu định dạng (ví dụ: khung viền màu xanh, lề trong 5px) cho nhiều phần tử `div` và `p` khác nhau trên trang mà không cần viết lại CSS cho từng loại phần tử. Bạn nên sử dụng bộ chọn nào?

A. Bộ chọn ID
B. Bộ chọn Class
C. Bộ chọn phần tử theo tên (`div, p`)
D. Bộ chọn hậu duệ (`div p`)

Câu 13: Một phần tử HTML có thể có bao nhiêu lớp (class)?

A. Chỉ một lớp duy nhất.
B. Tối đa ba lớp.
C. Nhiều lớp, cách nhau bằng dấu cách.
D. Nhiều lớp, cách nhau bằng dấu phẩy.

Câu 14: Để căn giữa một phần tử khối (ví dụ: `div`) nằm ngang trong phần tử cha của nó, phương pháp phổ biến nhất sử dụng thuộc tính `margin` là gì?

A. margin: center;
B. margin: auto 0;
C. margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0;
D. margin: 0 auto;

Câu 15: Cho đoạn mã HTML và CSS sau:
```html

A. Màu đen (black)

B. Màu đỏ (red)

C. Không có đường viền.

Câu 16: Khi nào bạn nên sử dụng thuộc tính `outline` thay vì `border` trong CSS?

A. Khi muốn đường viền hiển thị bên trong padding.
B. Khi muốn đường viền là một phần của kích thước phần tử theo `box-sizing: content-box;`.
C. Khi muốn tạo một đường viền không chiếm không gian trong bố cục trang và không ảnh hưởng đến kích thước tổng thể của phần tử.
D. Khi muốn đường viền có bán kính bo tròn (border-radius).

Câu 17: Thuộc tính `border-radius` trong CSS dùng để làm gì?

A. Bo tròn các góc của đường viền.
B. Thiết lập khoảng cách giữa các ô trong bảng.
C. Tạo bóng cho phần tử.
D. Định dạng kiểu đường viền (nét liền, nét đứt...).

Câu 18: Cho đoạn mã CSS sau:
```css
p {
padding: 10px;
}
.highlight {
padding: 20px;
}
#intro {
padding: 5px;
}
```
Nếu một phần tử `

` có cả `class=

A. 10px (từ bộ chọn phần tử)
B. 20px (từ bộ chọn class)
C. 5px (từ bộ chọn ID)
D. Tổng của tất cả các giá trị: 10px + 20px + 5px = 35px.

Câu 19: Điều gì xảy ra khi bạn áp dụng `width: 50%;` cho một phần tử `div`?

A. Chiều rộng của div sẽ là 50px.
B. Chiều rộng của div sẽ bằng 50% chiều rộng của phần tử cha chứa nó.
C. Chiều rộng của div sẽ bằng 50% chiều rộng màn hình.
D. Thuộc tính `width` sẽ không có tác dụng vì div là phần tử khối.

Câu 20: Cho đoạn mã HTML và CSS:
```html

A. Hiển thị trên cùng dòng với các phần tử nội tuyến khác, có khung viền và kích thước 100px x 50px.

B. Hiển thị trên một dòng mới, có khung viền và kích thước 100px x 50px.

C. Hiển thị trên cùng dòng nhưng thuộc tính width/height sẽ bị bỏ qua.

D. Không hiển thị do `span` mặc định là `inline`.

Câu 21: Bạn muốn tạo một khoảng trống giữa hai phần tử khối liền kề theo chiều dọc. Thuộc tính nào trong Box Model được sử dụng cho mục đích này?

A. padding-top hoặc padding-bottom
B. border-top hoặc border-bottom
C. margin-top hoặc margin-bottom
D. height

Câu 22: Để loại bỏ hoàn toàn đường viền (border) của một phần tử, bạn có thể sử dụng thuộc tính `border-style` với giá trị nào?

A. border-style: none;
B. border: 0;
C. border-width: 0;
D. Cả A, B, C đều có thể loại bỏ hoặc làm cho đường viền không hiển thị.

Câu 23: Trong một bảng HTML (`

`), thuộc tính CSS nào giúp kiểm soát khoảng cách giữa các ô (cells)?

A. border-spacing
B. padding
C. margin
D. cell-spacing

Câu 24: Thuộc tính `border-collapse: collapse;` áp dụng cho phần tử `

` có tác dụng gì?

A. Gộp lề của các ô trong bảng.
B. Gộp các đường viền liền kề giữa các ô và hàng/cột thành một đường viền duy nhất.
C. Ẩn tất cả các đường viền trong bảng.
D. Làm cho đường viền của bảng co lại theo nội dung.

Câu 25: Bạn muốn đặt lề trên và dưới là 10px, còn lề trái và phải là 20px cho một phần tử. Cách viết tắt đúng cho thuộc tính `padding` là gì?

A. padding: 10px 20px;
B. padding: 10px 20px 10px 20px;
C. padding: 10px 10px 20px 20px;
D. padding: 20px 10px;

Câu 26: Giả sử bạn có một phần tử `div` với nội dung là một đoạn văn bản. Bạn muốn tạo một khoảng cách 15px giữa đoạn văn bản và đường viền của `div`. Bạn nên sử dụng thuộc tính nào và giá trị bao nhiêu?

A. margin: 15px;
B. padding: 15px;
C. border-width: 15px;
D. space: 15px;

Câu 27: Thuộc tính CSS nào cho phép bạn kiểm soát kiểu của đường viền (ví dụ: nét liền, nét đứt, nét chấm...)?

A. border-width
B. border-color
C. border-style
D. border-format

Câu 28: Khi áp dụng lề dọc (margin-top, margin-bottom) cho các phần tử `inline`, kết quả hiển thị trên trình duyệt thường như thế nào?

A. Lề dọc thường không có tác dụng.
B. Lề dọc được áp dụng đầy đủ, đẩy các dòng văn bản lên/xuống.
C. Lề trên có tác dụng nhưng lề dưới thì không.
D. Lề dưới có tác dụng nhưng lề trên thì không.

Câu 29: Bạn muốn tạo một khung viền màu xám, độ dày 2px, kiểu nét đứt cho một phần tử. Cách viết tắt (shorthand) đúng cho thuộc tính `border` là gì?

A. border: gray 2px dashed;
B. border: 2px gray dashed;
C. border: dashed gray 2px;
D. border: 2px dashed gray;

Câu 30: Sự khác biệt cơ bản về cách thức hoạt động của `box-sizing: content-box;` (mặc định) và `box-sizing: border-box;` khi thiết lập `width` và `height` là gì?

A. `content-box`: `width/height` chỉ áp dụng cho nội dung; `border-box`: `width/height` bao gồm cả padding và border.
B. `content-box`: `width/height` bao gồm cả margin; `border-box`: `width/height` chỉ áp dụng cho nội dung.
C. `content-box`: `width/height` bao gồm cả padding và border; `border-box`: `width/height` chỉ áp dụng cho nội dung.
D. `content-box`: `width/height` không bao gồm gì cả; `border-box`: `width/height` bao gồm tất cả (margin, border, padding, content).

1 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Border, Padding, Margin, Content

Content, Padding, Border, Margin

Padding, Border, Margin, Content

Margin, Border, Padding, Content

2 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 2: Cho đoạn mã CSS sau:
```css
div {
margin: 10px 20px 15px 5px;
}
```
Lề ngoài (margin) của phần tử `div` sẽ được áp dụng như thế nào?

Tất cả các cạnh đều là 10px.

Lề trên 10px, lề dưới 20px, lề trái 15px, lề phải 5px.

Lề trên 10px, lề phải 20px, lề dưới 15px, lề trái 5px.

Lề trên và dưới 10px, lề trái và phải 20px.

3 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 3: Thuộc tính CSS nào được sử dụng để tạo khoảng trống *bên trong* đường viền (border) của một phần tử, giữa đường viền và nội dung?

4 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

5 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

6 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Giá trị lớn hơn giữa hai lề.

Tổng giá trị của hai lề.

Giá trị nhỏ hơn giữa hai lề.

Hiệu giá trị của hai lề.

7 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 7: Phần tử có thuộc tính `display: block;` trong CSS thường có đặc điểm bố cục như thế nào?

Chỉ chiếm không gian vừa đủ nội dung và không ngắt dòng.

Cho phép các phần tử khác nằm cạnh nó trên cùng một dòng.

Luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn.

Không thể thiết lập chiều rộng và chiều cao cố định.

8 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 8: Phần tử có thuộc tính `display: inline;` trong CSS có đặc điểm bố cục nào sau đây?

Luôn bắt đầu trên một dòng mới.

Có thể thiết lập chiều rộng và chiều cao tùy ý.

Tự động chiếm toàn bộ chiều rộng của phần tử cha.

Nằm trên cùng một dòng với các phần tử nội tuyến khác và chỉ chiếm không gian cần thiết.

9 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

10 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 10: Sự khác biệt chính giữa `display: none;` và `visibility: hidden;` trong CSS là gì?

`display: none;` chỉ ẩn nội dung, còn `visibility: hidden;` ẩn cả nội dung và phần tử.

`display: none;` loại bỏ hoàn toàn phần tử khỏi luồng bố cục, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian của nó trên trang.

`visibility: hidden;` làm cho phần tử trong suốt, còn `display: none;` làm cho nó không hiển thị.

Không có sự khác biệt đáng kể giữa hai thuộc tính này.

11 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 11: Để định dạng duy nhất cho một phần tử HTML cụ thể trên trang web, bộ chọn CSS nào là phù hợp nhất?

Bộ chọn ID (ví dụ: `#myElement`)

Bộ chọn Class (ví dụ: `.myClass`)

Bộ chọn phần tử (ví dụ: `div`)

Bộ chọn thuộc tính (ví dụ: `[type="text"]`)

12 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Bộ chọn phần tử theo tên (`div, p`)

Bộ chọn Class

Bộ chọn hậu duệ (`div p`)

13 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 13: Một phần tử HTML có thể có bao nhiêu lớp (class)?

Chỉ một lớp duy nhất.

Tối đa ba lớp.

Nhiều lớp, cách nhau bằng dấu cách.

Nhiều lớp, cách nhau bằng dấu phẩy.

14 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 14: Để căn giữa một phần tử khối (ví dụ: `div`) nằm ngang trong phần tử cha của nó, phương pháp phổ biến nhất sử dụng thuộc tính `margin` là gì?

margin: center;

margin: auto 0;

margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0;

margin: 0 auto;

15 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 15: Cho đoạn mã HTML và CSS sau:
```html

Màu mặc định của trình duyệt.

```
```css
.box {
border: 1px solid black;
}
.special-box {
border-color: red;
}
```
Đường viền của phần tử `div` sẽ có màu gì?

Màu đen (black)

Màu đỏ (red)

Không có đường viền.

16 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 16: Khi nào bạn nên sử dụng thuộc tính `outline` thay vì `border` trong CSS?

Khi muốn đường viền hiển thị bên trong padding.

Khi muốn đường viền là một phần của kích thước phần tử theo `box-sizing: content-box;`.

Khi muốn tạo một đường viền không chiếm không gian trong bố cục trang và không ảnh hưởng đến kích thước tổng thể của phần tử.

Khi muốn đường viền có bán kính bo tròn (border-radius).

17 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 17: Thuộc tính `border-radius` trong CSS dùng để làm gì?

Bo tròn các góc của đường viền.

Thiết lập khoảng cách giữa các ô trong bảng.

Tạo bóng cho phần tử.

Định dạng kiểu đường viền (nét liền, nét đứt...).

18 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 18: Cho đoạn mã CSS sau:
```css
p {
padding: 10px;
}
.highlight {
padding: 20px;
}
#intro {
padding: 5px;
}
```
Nếu một phần tử `

` có cả `class="highlight"` và `id="intro"`, thì giá trị `padding` cuối cùng được áp dụng cho phần tử này là bao nhiêu?

10px (từ bộ chọn phần tử)

20px (từ bộ chọn class)

5px (từ bộ chọn ID)

Tổng của tất cả các giá trị: 10px + 20px + 5px = 35px.

19 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 19: Điều gì xảy ra khi bạn áp dụng `width: 50%;` cho một phần tử `div`?

Chiều rộng của div sẽ là 50px.

Chiều rộng của div sẽ bằng 50% chiều rộng của phần tử cha chứa nó.

Chiều rộng của div sẽ bằng 50% chiều rộng màn hình.

Thuộc tính `width` sẽ không có tác dụng vì div là phần tử khối.

20 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 20: Cho đoạn mã HTML và CSS:
```html
Inline Block
```
Phần tử `` này sẽ hiển thị như thế nào?

Hiển thị trên cùng dòng với các phần tử nội tuyến khác, có khung viền và kích thước 100px x 50px.

Hiển thị trên một dòng mới, có khung viền và kích thước 100px x 50px.

Hiển thị trên cùng dòng nhưng thuộc tính width/height sẽ bị bỏ qua.

Không hiển thị do `span` mặc định là `inline`.

21 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 21: Bạn muốn tạo một khoảng trống giữa hai phần tử khối liền kề theo chiều dọc. Thuộc tính nào trong Box Model được sử dụng cho mục đích này?

padding-top hoặc padding-bottom

border-top hoặc border-bottom

margin-top hoặc margin-bottom

height

22 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 22: Để loại bỏ hoàn toàn đường viền (border) của một phần tử, bạn có thể sử dụng thuộc tính `border-style` với giá trị nào?

border-style: none;

border: 0;

border-width: 0;

Cả A, B, C đều có thể loại bỏ hoặc làm cho đường viền không hiển thị.

23 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 23: Trong một bảng HTML (`

`), thuộc tính CSS nào giúp kiểm soát khoảng cách giữa các ô (cells)?

24 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 24: Thuộc tính `border-collapse: collapse;` áp dụng cho phần tử `

` có tác dụng gì?

Gộp lề của các ô trong bảng.

Gộp các đường viền liền kề giữa các ô và hàng/cột thành một đường viền duy nhất.

Ẩn tất cả các đường viền trong bảng.

Làm cho đường viền của bảng co lại theo nội dung.

25 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 25: Bạn muốn đặt lề trên và dưới là 10px, còn lề trái và phải là 20px cho một phần tử. Cách viết tắt đúng cho thuộc tính `padding` là gì?

padding: 10px 20px;

padding: 10px 20px 10px 20px;

padding: 10px 10px 20px 20px;

padding: 20px 10px;

26 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

27 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 27: Thuộc tính CSS nào cho phép bạn kiểm soát kiểu của đường viền (ví dụ: nét liền, nét đứt, nét chấm...)?

28 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 28: Khi áp dụng lề dọc (margin-top, margin-bottom) cho các phần tử `inline`, kết quả hiển thị trên trình duyệt thường như thế nào?

Lề dọc thường không có tác dụng.

Lề dọc được áp dụng đầy đủ, đẩy các dòng văn bản lên/xuống.

Lề trên có tác dụng nhưng lề dưới thì không.

Lề dưới có tác dụng nhưng lề trên thì không.

29 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 29: Bạn muốn tạo một khung viền màu xám, độ dày 2px, kiểu nét đứt cho một phần tử. Cách viết tắt (shorthand) đúng cho thuộc tính `border` là gì?

border: gray 2px dashed;

border: 2px gray dashed;

border: dashed gray 2px;

border: 2px dashed gray;

30 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 5

Câu 30: Sự khác biệt cơ bản về cách thức hoạt động của `box-sizing: content-box;` (mặc định) và `box-sizing: border-box;` khi thiết lập `width` và `height` là gì?

`content-box`: `width/height` chỉ áp dụng cho nội dung; `border-box`: `width/height` bao gồm cả padding và border.

`content-box`: `width/height` bao gồm cả margin; `border-box`: `width/height` chỉ áp dụng cho nội dung.

`content-box`: `width/height` bao gồm cả padding và border; `border-box`: `width/height` chỉ áp dụng cho nội dung.

`content-box`: `width/height` không bao gồm gì cả; `border-box`: `width/height` bao gồm tất cả (margin, border, padding, content).

A. Nằm cùng dòng với các phần tử nội tuyến khác (nếu có) và không ngắt dòng.

Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 06

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 06 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.

Câu 1: Xét đoạn mã HTML sau:
```html

B. Luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn.

C. Bị ẩn hoàn toàn khỏi trang web.

D. Hiển thị dưới dạng một khối nhưng chỉ chiếm không gian vừa đủ nội dung.

Câu 2: Để một phần tử `

` (mặc định là block) hiển thị trên cùng một dòng với các phần tử khác và chỉ chiếm không gian vừa đủ nội dung của nó, bạn cần áp dụng thuộc tính CSS `display` với giá trị nào?

A. block
B. inline
C. none
D. inline-block

Câu 3: Bạn muốn tạo một khối vuông có kích thước cố định (ví dụ: 100px x 100px) và muốn các khối này nằm cạnh nhau trên một dòng cho đến khi hết chỗ thì tự động xuống dòng. Bạn nên sử dụng giá trị nào cho thuộc tính `display`?

A. inline
B. block
C. none
D. inline-block

Câu 4: Thuộc tính CSS `display: none;` khác với `visibility: hidden;` như thế nào?

A. `display: none;` ẩn phần tử nhưng vẫn giữ không gian của nó trên layout, còn `visibility: hidden;` loại bỏ hoàn toàn phần tử khỏi layout.
B. Cả hai thuộc tính đều ẩn phần tử và loại bỏ không gian của nó khỏi layout.
C. `display: none;` ẩn phần tử và loại bỏ không gian của nó khỏi layout, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ không gian của nó.
D. Cả hai thuộc tính đều ẩn phần tử nhưng vẫn giữ không gian của nó trên layout.

Câu 5: Bạn cần định dạng màu nền cho một tiêu đề duy nhất trên trang web (ví dụ: tiêu đề chính). Bạn nên sử dụng bộ chọn CSS nào để đảm bảo chỉ có tiêu đề đó được áp dụng kiểu?

A. Bộ chọn ID (#)
B. Bộ chọn Class (.)
C. Bộ chọn phần tử (ví dụ: h1)
D. Bộ chọn nhóm (,)

Câu 6: Bạn có nhiều đoạn văn bản cần cùng một kiểu định dạng (ví dụ: màu chữ xanh, chữ nghiêng). Bạn nên sử dụng bộ chọn CSS nào để áp dụng kiểu cho tất cả các đoạn văn bản này một cách dễ dàng?

A. Bộ chọn ID (#)
B. Bộ chọn Class (.)
C. Bộ chọn phần tử (ví dụ: p)
D. Bộ chọn con (>)

Câu 7: Cho đoạn mã HTML `

A. id.gioi-thieu

B. .gioi#thieu

C. #gioi-thieu

D. gioi-thieu

Câu 8: Một phần tử HTML có thể có bao nhiêu mã định danh (ID)?

A. Không giới hạn số lượng
B. Chỉ một ID duy nhất trên toàn bộ trang
C. Một ID cho mỗi class mà nó thuộc về
D. Tùy thuộc vào loại phần tử (inline hoặc block)

Câu 9: Một phần tử HTML có thể thuộc về bao nhiêu lớp (Class)?

A. Không giới hạn số lượng, bằng cách liệt kê các tên class cách nhau bởi dấu cách.
B. Chỉ một class duy nhất.
C. Tối đa 3 class.
D. Không thể thuộc về nhiều class cùng lúc.

Câu 10: Cho đoạn mã HTML `

A. Chỉ có viền đen, không có nền vàng.

B. Chỉ có nền vàng, không có viền đen.

C. Không có viền và không có nền.

D. Có cả viền đen và nền vàng.

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

B.	C.

Câu 12: Thẻ `

` của bảng.

D. Đại diện cho dữ liệu thông thường trong bảng.

Câu 13: Để thêm một đường viền (border) xung quanh toàn bộ bảng HTML, bạn sẽ áp dụng thuộc tính CSS `border` cho bộ chọn nào?

A. table
B. tr
C. th, td
D. caption

Câu 14: Để thêm đường viền cho từng ô dữ liệu (`

` trong bảng HTML có ý nghĩa ngữ nghĩa đặc biệt gì so với thẻ `

A. Không có ý nghĩa ngữ nghĩa đặc biệt, chỉ là cách viết tắt của `

B. Đại diện cho ô tiêu đề của bảng hoặc nhóm cột/hàng, thường được trình duyệt mặc định hiển thị chữ in đậm và căn giữa.

C. Chỉ được sử dụng trong phần `

`) và ô tiêu đề (`

`) trong bảng, bạn sẽ áp dụng thuộc tính CSS `border` cho bộ chọn nào?

A. table
B. tr
C. th, td
D. table tr

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

A. Tạo khoảng trống bên trong đường viền của phần tử (giữa nội dung và đường viền).
B. Tạo khoảng trống bên ngoài đường viền của phần tử (giữa phần tử này và các phần tử khác).
C. Đặt kiểu đường viền cho phần tử.
D. Đặt màu nền cho phần tử.

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

A. Tạo khoảng trống bên trong đường viền của phần tử.
B. Tạo khoảng trống bên ngoài đường viền của phần tử (giữa phần tử này và các phần tử khác).
C. Đặt độ dày của đường viền.
D. Căn chỉnh nội dung bên trong phần tử.

Câu 17: Xét CSS sau:
```css
.hop {
width: 100px;
height: 50px;
margin: 10px;
border: 1px solid black;
padding: 5px;
}
```
Một phần tử `

A. 100px

B. 100px (nội dung) + 5px (padding trái) + 5px (padding phải) = 110px

C. 100px (nội dung) + 5px (padding trái) + 5px (padding phải) + 1px (border trái) + 1px (border phải) = 112px

D. 100px (nội dung) + 5px (padding trái) + 5px (padding phải) + 1px (border trái) + 1px (border phải) + 10px (margin trái) + 10px (margin phải) = 132px

Câu 18: Thuộc tính CSS `width` và `height` có tác dụng như thế nào khi áp dụng cho một phần tử inline (ví dụ: ``)?

A. Áp dụng bình thường như với phần tử block.
B. Không có tác dụng.
C. Chỉ áp dụng nếu có thêm thuộc tính `display: block;`.
D. Chỉ áp dụng cho chiều rộng (`width`), chiều cao (`height`) không có tác dụng.

Câu 19: Thuộc tính CSS `margin-top` và `margin-bottom` có tác dụng như thế nào khi áp dụng cho một phần tử inline (ví dụ: ``)?

A. Áp dụng bình thường như với phần tử block, đẩy các phần tử trên và dưới ra xa.
B. Không có tác dụng.
C. Không có tác dụng trong việc tạo khoảng trống giữa các dòng, nhưng có thể ảnh hưởng đến vị trí nếu có các thuộc tính khác như `line-height` hoặc `vertical-align`.
D. Chỉ áp dụng nếu có thêm thuộc tính `display: inline-block;`.

Câu 20: Thuộc tính CSS `padding-top` và `padding-bottom` có tác dụng như thế nào khi áp dụng cho một phần tử inline (ví dụ: ``)?

A. Không có tác dụng.
B. Áp dụng bình thường và đẩy các phần tử trên/dưới ra xa.
C. Chỉ áp dụng nếu có thêm thuộc tính `display: inline-block;`.
D. Áp dụng, nhưng không đẩy các dòng văn bản khác ra xa, có thể làm che khuất nội dung của dòng trên hoặc dưới.

Câu 21: Bạn muốn tạo một bảng có đường viền đơn (single border) thay vì đường viền kép mặc định giữa các ô. Thuộc tính CSS nào được sử dụng phổ biến nhất để đạt được điều này?

A. border-spacing
B. border-collapse
C. table-layout
D. empty-cells

Câu 22: Giá trị nào của thuộc tính `border-collapse` sẽ làm cho các đường viền của các ô liền kề trong bảng gộp lại thành một đường viền duy nhất?

A. collapse
B. separate
C. inherit
D. initial

Câu 23: Bạn muốn thêm khoảng trống giữa đường viền của các ô trong bảng (khi `border-collapse` là `separate`). Thuộc tính CSS nào được sử dụng?

A. border-spacing
B. padding
C. margin
D. cell-spacing

Câu 24: Bạn có một danh sách các mục (`

`) trong HTML và muốn chúng hiển thị trên một dòng thay vì mỗi mục một dòng. Bạn nên áp dụng CSS nào cho các phần tử `

A. display: block;
B. display: inline;
C. visibility: hidden;
D. float: left;

Câu 25: Cho đoạn mã CSS:
```css
.hop-vien {
border: 2px dashed red;
border-radius: 10px;
}
```
Phần tử HTML nào áp dụng lớp `hop-vien` sẽ hiển thị như thế nào?

A. Có đường viền nét đứt màu đỏ với các góc bo tròn bán kính 10px.
B. Có đường viền nét liền màu đỏ với các góc vuông.
C. Có đường viền nét đứt màu đỏ nhưng góc vẫn vuông.
D. Không có đường viền vì `border-radius` chỉ áp dụng cho ảnh.

Câu 26: Khi đặt tên cho `id` và `class` trong CSS/HTML, quy tắc nào sau đây là KHÔNG ĐÚNG?

A. Tên có thể chứa chữ cái (a-z, A-Z), chữ số (0-9), dấu gạch ngang (-), và dấu gạch dưới (_).
B. Tên phân biệt chữ hoa và chữ thường.
C. Tên không được chứa dấu cách.
D. Tên BẮT BUỘC phải bắt đầu bằng một chữ cái hoặc dấu gạch dưới (_).

Câu 27: Bạn có hai phần tử `

A. 20px + 30px = 50px

B. 20px

C. 30px

D. 0px

Câu 28: Xét đoạn mã CSS:
```css
#header {
border-bottom: 1px solid blue;
}
```
Bộ chọn `#header` sẽ áp dụng kiểu cho phần tử nào trong HTML?

A. Tất cả các phần tử có tên thẻ là `header`.
B. Phần tử DUY NHẤT có thuộc tính `id=
C. Tất cả các phần tử có thuộc tính `class=
D. Phần tử đầu tiên có tên thẻ là `header`.

Câu 29: Bạn muốn tạo một đường viền chỉ ở phía dưới của một đoạn văn bản. Thuộc tính CSS nào sau đây là đúng cú pháp?

A. border-bottom: 1px solid black;
B. border: bottom 1px solid black;
C. border-style-bottom: solid;
D. bottom-border: 1px solid black;

Câu 30: Thuộc tính `padding-left` và `padding-right` có tác dụng như thế nào khi áp dụng cho một phần tử inline (ví dụ: ``)?

A. Áp dụng bình thường, tạo khoảng trống bên trái và bên phải nội dung.
B. Không có tác dụng.
C. Chỉ áp dụng nếu có thêm thuộc tính `display: block;`.
D. Chỉ áp dụng nếu có thêm thuộc tính `display: inline-block;`.

` trong bảng HTML có ý nghĩa ngữ nghĩa đặc biệt gì so với thẻ `

Không có ý nghĩa ngữ nghĩa đặc biệt, chỉ là cách viết tắt của `<td>`.

Đại diện cho ô tiêu đề của bảng hoặc nhóm cột/hàng, thường được trình duyệt mặc định hiển thị chữ in đậm và căn giữa.

Chỉ được sử dụng trong phần `<thead>` của bảng.

Đại diện cho dữ liệu thông thường trong bảng.

13 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 6

Câu 13: Để thêm một đường viền (border) xung quanh toàn bộ bảng HTML, bạn sẽ áp dụng thuộc tính CSS `border` cho bộ chọn nào?

table

th, td

caption

14 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 6

Câu 14: Để thêm đường viền cho từng ô dữ liệu (`

`) và ô tiêu đề (`

`) trong bảng, bạn sẽ áp dụng thuộc tính CSS `border` cho bộ chọn nào?

table

th, td

table tr

15 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 6

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

Tạo khoảng trống bên trong đường viền của phần tử (giữa nội dung và đường viền).

Tạo khoảng trống bên ngoài đường viền của phần tử (giữa phần tử này và các phần tử khác).

Đặt kiểu đường viền cho phần tử.

Đặt màu nền cho phần tử.

16 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 6

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

Tạo khoảng trống bên trong đường viền của phần tử.

Tạo khoảng trống bên ngoài đường viền của phần tử (giữa phần tử này và các phần tử khác).

Đặt độ dày của đường viền.

Căn chỉnh nội dung bên trong phần tử.

Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 07

Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung - Đề 07 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.

Câu 1: Trong CSS, thuộc tính `display` với giá trị nào sau đây được sử dụng để làm cho một phần tử HTML chiếm toàn bộ chiều rộng có sẵn của khối chứa nó và bắt đầu trên một dòng mới?

A. inline
B. block
C. none
D. inline-block

Câu 2: Một phần tử HTML được thiết lập CSS `display: inline;`. Điều nào sau đây mô tả đúng hành vi của phần tử này?

A. Nó luôn bắt đầu trên một dòng mới.
B. Nó chiếm toàn bộ chiều rộng của phần tử cha.
C. Bạn có thể thiết lập chiều cao và chiều rộng tùy ý cho nó.
D. Nó nằm trên cùng dòng với các phần tử nội tuyến khác và chỉ chiếm không gian cần thiết.

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

Đoạn văn bản nổi bật.

`. Theo mặc định, thẻ `

` và thẻ `` thuộc loại phần tử hiển thị (display) nào?

A. `
` là block, `` là inline.
B. `
` là inline, `` là block.
C. Cả hai đều là block.
D. Cả hai đều là inline.

Câu 4: Bạn muốn ẩn hoàn toàn một phần tử trên trang web, làm cho nó không hiển thị và không chiếm bất kỳ không gian nào trong bố cục. Thuộc tính CSS nào phù hợp nhất để thực hiện điều này?

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

Câu 5: Để áp dụng một kiểu CSS duy nhất cho một phần tử HTML cụ thể trên trang (ví dụ: chỉ có một tiêu đề chính), bạn nên sử dụng bộ chọn CSS dựa trên đặc điểm nào sau đây?

A. ID
B. Class
C. Tên thẻ (Tag name)
D. Thuộc tính `style` nội tuyến

Câu 6: Để áp dụng cùng một kiểu CSS cho nhiều phần tử HTML khác nhau trên trang (ví dụ: tất cả các đoạn văn bản phụ), bạn nên sử dụng bộ chọn CSS dựa trên đặc điểm nào sau đây?

A. ID
B. Class
C. Tên thẻ (Tag name)
D. Thuộc tính `id`

Câu 7: Cú pháp đúng để viết bộ chọn CSS cho một phần tử có ID là `main-header` là gì?

A. .main-header { ... }
B. #main-header { ... }
C. id(main-header) { ... }
D. { ... }

Câu 8: Cú pháp đúng để viết bộ chọn CSS cho các phần tử có class là `highlight-text` là gì?

A. .highlight-text { ... }
B. #highlight-text { ... }
C. class(highlight-text) { ... }
D. { ... }

Câu 9: Một phần tử HTML có thể có bao nhiêu ID duy nhất trong cùng một trang web?

A. Nhiều ID, cách nhau bởi dấu cách.
B. Chỉ một ID duy nhất.
C. Không có ID nào.
D. Tùy thuộc vào loại thẻ HTML.

Câu 10: Một phần tử HTML có thể thuộc về nhiều class cùng lúc không? Nếu có, làm thế nào để khai báo trong HTML?

A. Không thể.
B. Có, bằng cách sử dụng dấu phẩy giữa các tên class trong thuộc tính `class`.
C. Có, bằng cách sử dụng dấu cách giữa các tên class trong thuộc tính `class`.
D. Có, bằng cách sử dụng nhiều thuộc tính `class` khác nhau.

Câu 11: Cho đoạn mã HTML `

` này thuộc về những class nào?

`. Phần tử `

A. Chỉ class `box`.
B. Chỉ class `card`.
C. Cả class `box` và class `card`.
D. Không thuộc class nào vì cú pháp sai.

Câu 12: Khi đặt tên cho ID và class trong CSS/HTML, quy tắc nào sau đây là **sai**?

A. Tên có thể chứa chữ cái (a-z, A-Z), số (0-9), dấu gạch ngang (-) và dấu gạch dưới (_).
B. Tên phải bắt đầu bằng một chữ cái hoặc dấu gạch dưới (_).
C. Tên phân biệt chữ hoa và chữ thường.
D. Tên có thể bắt đầu bằng một chữ số.

Câu 13: Bạn muốn thay đổi màu nền và thêm đường viền cho tất cả các phần tử `

` trên trang. Bộ chọn CSS nào phù hợp nhất để thực hiện điều này một cách hiệu quả?

A. Bộ chọn tên thẻ (`div`)
B. Bộ chọn ID (nếu tất cả div có cùng ID)
C. Bộ chọn class (nếu tất cả div có cùng class)
D. Áp dụng thuộc tính `style` nội tuyến cho từng thẻ `
`

Câu 14: Cho đoạn mã CSS: `.box { display: inline; width: 100px; height: 50px; }`. Nếu áp dụng cho một phần tử `

`, điều gì sẽ xảy ra với thuộc tính `width` và `height`?

A. Chiều rộng sẽ là 100px và chiều cao sẽ là 50px.
B. Chỉ chiều rộng được áp dụng, chiều cao sẽ tự động.
C. Cả chiều rộng và chiều cao sẽ bị bỏ qua vì phần tử đã chuyển thành inline.
D. Chỉ chiều cao được áp dụng, chiều rộng sẽ tự động.

Câu 15: Phần tử nội tuyến (inline) khác phần tử khối (block) về mặt bố cục như thế nào khi chúng xuất hiện cạnh nhau trên trang?

A. Phần tử khối nằm cạnh nhau trên cùng một dòng, phần tử nội tuyến luôn bắt đầu dòng mới.
B. Phần tử khối và nội tuyến đều nằm cạnh nhau trên cùng một dòng nếu đủ chỗ.
C. Phần tử nội tuyến luôn chiếm toàn bộ chiều rộng, phần tử khối chỉ chiếm không gian cần thiết.
D. Phần tử nội tuyến nằm trên cùng dòng nếu đủ chỗ, phần tử khối luôn bắt đầu trên dòng mới.

Câu 16: Bạn có một danh sách các mục tin tức và muốn mỗi mục tin tức được hiển thị dưới dạng một khối riêng biệt, cách nhau một khoảng lề. Loại phần tử hiển thị nào phù hợp nhất cho mỗi mục tin tức?

A. block
B. inline
C. none
D. table-cell

Câu 17: Mục đích chính của việc sử dụng các phần tử container chung như `

` và `` trong HTML là gì?

A. Để hiển thị nội dung văn bản có định dạng đặc biệt.
B. Để nhóm các phần tử khác lại với nhau nhằm áp dụng kiểu CSS hoặc xử lý bằng JavaScript.
C. Để tạo các liên kết hoặc hình ảnh.
D. Chúng là các phần tử bắt buộc phải có trong mọi trang HTML.

Câu 18: Sự khác biệt cơ bản về cấu trúc và ngữ nghĩa giữa thẻ `

` và thẻ `` là gì?

A. `
` dùng cho văn bản, `` dùng cho hình ảnh.
B. `
` là phần tử nội tuyến, `` là phần tử khối.
C. `
` chỉ có thể chứa ``, `` chỉ có thể chứa văn bản.
D. `
` là phần tử khối theo mặc định, `` là phần tử nội tuyến theo mặc định, cả hai đều là các container chung không có ngữ nghĩa đặc biệt.

Câu 19: Bạn muốn định dạng riêng cho từ "quan trọng" trong câu "Đây là một thông tin quan trọng.". Thẻ HTML nào và thuộc tính CSS nào (về display) phù hợp nhất để bọc từ "quan trọng" mà không làm thay đổi bố cục dòng hiện tại?

A. Thẻ `
` với `display: block;`
B. Thẻ `` với `display: inline;` (hoặc mặc định)
C. Thẻ `
` với `display: inline;`
D. Thẻ `
` với `display: inline;`

Câu 20: Một nhà phát triển web sử dụng CSS để đặt `margin-top: 20px;` và `margin-bottom: 20px;` cho một phần tử ``. Kết quả hiển thị trên trình duyệt sẽ như thế nào?

A. Các lề trên và dưới sẽ bị bỏ qua vì `` là phần tử nội tuyến.
B. Phần tử `` sẽ có lề 20px ở phía trên và dưới.
C. Phần tử `` sẽ tự động chuyển thành phần tử khối để áp dụng lề.
D. Chỉ lề trên được áp dụng, lề dưới bị bỏ qua.

Câu 21: Giả sử bạn có một danh sách các liên kết (`` thẻ). Theo mặc định, thẻ `` là phần tử nội tuyến. Nếu bạn muốn mỗi liên kết hiển thị trên một dòng riêng biệt và có thể đặt chiều rộng/chiều cao cho chúng, bạn sẽ thay đổi thuộc tính `display` của thẻ `` thành giá trị nào?

A. block
B. inline
C. none
D. hidden

Câu 22: Khi thiết kế bố cục trang web, việc hiểu rõ sự khác biệt giữa phần tử khối và phần tử nội tuyến giúp ích gì?

A. Giúp chọn màu sắc và phông chữ phù hợp.
B. Giúp viết mã JavaScript hiệu quả hơn.
C. Giúp dự đoán cách các phần tử sẽ chiếm không gian và tương tác với nhau trong dòng chảy tài liệu.
D. Chỉ quan trọng khi làm việc với cơ sở dữ liệu.

Câu 23: Thuộc tính `display: none;` khác với `visibility: hidden;` như thế nào?

A. Cả hai đều ẩn phần tử và giải phóng không gian.
B. `display: none;` ẩn phần tử và giải phóng không gian, còn `visibility: hidden;` ẩn phần tử nhưng vẫn giữ nguyên không gian của nó.
C. `display: none;` chỉ ẩn văn bản, còn `visibility: hidden;` ẩn toàn bộ phần tử.
D. `display: none;` chỉ hoạt động trên phần tử khối, còn `visibility: hidden;` hoạt động trên cả phần tử nội tuyến.

Câu 24: Bạn có một danh sách các mục (sử dụng thẻ `

` trong thẻ `

` là phần tử khối. Nếu bạn muốn các mục danh sách hiển thị trên cùng một dòng (như một menu ngang), bạn sẽ thay đổi thuộc tính `display` của thẻ `
` thành giá trị nào?
- A. block
- B. inline
- C. none
- D. list-item

Câu 25: Trong HTML, thẻ nào sau đây thường được sử dụng để tạo một ô dữ liệu tiêu chuẩn trong một bảng?

Câu 26: Thẻ `

` trong bảng HTML có mục đích gì?

A. Định nghĩa một hàng trong bảng.
B. Định nghĩa một ô dữ liệu tiêu chuẩn.
C. Định nghĩa toàn bộ bảng.
D. Định nghĩa một ô tiêu đề trong bảng (thường được căn giữa và in đậm theo mặc định).

Câu 27: Cho đoạn mã CSS: `.warning { color: red; font-weight: bold; }`. Nếu bạn muốn áp dụng kiểu này cho một đoạn văn bản cảnh báo cụ thể, bạn sẽ thêm thuộc tính nào vào thẻ `

` chứa văn bản đó?

A. class="warning"
B. id="warning"
C. style="color: red; font-weight: bold;"
D. name="warning"

Câu 28: Điều nào sau đây là đúng khi so sánh ID và Class trong việc định dạng CSS?

A. ID dùng cho định dạng chung, Class dùng cho định dạng duy nhất.
B. ID phải là duy nhất trên mỗi trang, Class có thể được sử dụng lại nhiều lần.
C. Cú pháp bộ chọn ID dùng dấu chấm (.), cú pháp bộ chọn Class dùng dấu thăng (#).
D. Chỉ có thể áp dụng ID cho phần tử khối, Class cho phần tử nội tuyến.

Câu 29: Bạn có hai khối nội dung (`

`) muốn hiển thị cạnh nhau thay vì mỗi khối trên một dòng riêng biệt. Phương pháp đơn giản nhất sử dụng thuộc tính `display` (nếu chỉ xét các giá trị cơ bản của Bài 16) để thay đổi hành vi hiển thị mặc định của chúng là gì?

A. Thiết lập `display: none;` cho cả hai.
B. Thiết lập `display: block;` cho cả hai.
C. Thiết lập `display: inline;` cho cả hai (lưu ý hạn chế về kích thước và lề dọc).
D. Không thể làm cho phần tử khối hiển thị cạnh nhau chỉ bằng thuộc tính `display` cơ bản.

Câu 30: Khi bạn áp dụng CSS cho một phần tử bằng bộ chọn ID, bộ chọn Class và bộ chọn tên thẻ cùng lúc (ví dụ: `#myId`, `.myClass`, `div`), quy tắc nào thường có độ ưu tiên cao nhất để áp dụng kiểu?

A. Bộ chọn ID
B. Bộ chọn Class
C. Bộ chọn tên thẻ
D. Quy tắc được viết sau cùng trong tệp CSS

1 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

2 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

Câu 2: Một phần tử HTML được thiết lập CSS `display: inline;`. Điều nào sau đây mô tả đúng hành vi của phần tử này?

Nó luôn bắt đầu trên một dòng mới.

Nó chiếm toàn bộ chiều rộng của phần tử cha.

Bạn có thể thiết lập chiều cao và chiều rộng tùy ý cho nó.

Nó nằm trên cùng dòng với các phần tử nội tuyến khác và chỉ chiếm không gian cần thiết.

3 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

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

Đoạn văn bản nổi bật.

`. Theo mặc định, thẻ `

` và thẻ `` thuộc loại phần tử hiển thị (display) nào?

`<p>` là block, `<span>` là inline.

`<p>` là inline, `<span>` là block.

Cả hai đều là block.

Cả hai đều là inline.

4 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

5 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

Class

Tên thẻ (Tag name)

Thuộc tính `style` nội tuyến

6 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

Class

Tên thẻ (Tag name)

Thuộc tính `id`

7 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

Câu 7: Cú pháp đúng để viết bộ chọn CSS cho một phần tử có ID là `main-header` là gì?

.main-header { ... }

#main-header { ... }

id(main-header) { ... }

<main-header> { ... }

8 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

Câu 8: Cú pháp đúng để viết bộ chọn CSS cho các phần tử có class là `highlight-text` là gì?

.highlight-text { ... }

#highlight-text { ... }

class(highlight-text) { ... }

<highlight-text> { ... }

9 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

Câu 9: Một phần tử HTML có thể có bao nhiêu ID duy nhất trong cùng một trang web?

Nhiều ID, cách nhau bởi dấu cách.

Chỉ một ID duy nhất.

Không có ID nào.

Tùy thuộc vào loại thẻ HTML.

10 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

Câu 10: Một phần tử HTML có thể thuộc về nhiều class cùng lúc không? Nếu có, làm thế nào để khai báo trong HTML?

Không thể.

Có, bằng cách sử dụng dấu phẩy giữa các tên class trong thuộc tính `class`.

Có, bằng cách sử dụng dấu cách giữa các tên class trong thuộc tính `class`.

Có, bằng cách sử dụng nhiều thuộc tính `class` khác nhau.

` trong bảng HTML có mục đích gì?

Định nghĩa một hàng trong bảng.

Định nghĩa một ô dữ liệu tiêu chuẩn.

Định nghĩa toàn bộ bảng.

Định nghĩa một ô tiêu đề trong bảng (thường được căn giữa và in đậm theo mặc định).

27 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

` chứa văn bản đó?

class='warning'

id='warning'

style='color: red; font-weight: bold;'

name='warning'

28 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

Câu 28: Điều nào sau đây là đúng khi so sánh ID và Class trong việc định dạng CSS?

ID dùng cho định dạng chung, Class dùng cho định dạng duy nhất.

ID phải là duy nhất trên mỗi trang, Class có thể được sử dụng lại nhiều lần.

Cú pháp bộ chọn ID dùng dấu chấm (.), cú pháp bộ chọn Class dùng dấu thăng (#).

Chỉ có thể áp dụng ID cho phần tử khối, Class cho phần tử nội tuyến.

29 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

Câu 29: Bạn có hai khối nội dung (`

Thiết lập `display: none;` cho cả hai.

Thiết lập `display: block;` cho cả hai.

Thiết lập `display: inline;` cho cả hai (lưu ý hạn chế về kích thước và lề dọc).

Không thể làm cho phần tử khối hiển thị cạnh nhau chỉ bằng thuộc tính `display` cơ bản.

30 / 30

Category: Trắc nghiệm Tin học 12 Kết nối tri thức Bài 16: Định dạng khung

Tags: Bộ đề 7

Quy tắc được viết sau cùng trong tệp CSS

Bộ chọn Class

Bộ chọn tên thẻ