Trang chủ
Trắc nghiệm
Trắc nghiệm CSS
Bộ 15 - Trắc nghiệm CSS online có đáp án

Bộ 15 - Trắc nghiệm CSS online có đáp án

Thời gian còn lại: --:--

Kết quả của bạn:

Bạn đã đúng:

Bạn đã sai:

Tổng số câu:

Câu 1: Trong CSS, bộ chọn nào được dùng để chọn tất cả các thẻ 'p' là con trực tiếp của thẻ 'div'?

A. div p
B. div + p
C. div > p
D. div ~ p

💡 Lời giải chi tiết:

Theo quy chuẩn W3C, ký hiệu '>' được sử dụng làm bộ chọn con trực tiếp (child selector) để nhắm mục tiêu vào các phần tử nằm ngay bên trong phần tử cha, Kết luận Lý giải: div > p

Câu 2: Thuộc tính 'box-sizing: border-box' có tác dụng chính là gì trong mô hình hộp?

A. Bao gồm cả phần đệm (padding) và viền (border) vào tổng chiều rộng và chiều cao của phần tử
B. Chỉ tính toán chiều rộng dựa trên nội dung bên trong, không bao gồm padding
C. Tự động tăng kích thước phần tử khi thêm viền
D. Loại bỏ hoàn toàn khoảng cách lề (margin) của phần tử

💡 Lời giải chi tiết:

Giá trị 'border-box' thay đổi cách tính toán Box Model bằng cách gộp cả padding và border vào kích thước đã thiết lập, giúp kiểm soát bố cục dễ dàng hơn, Kết luận Lý giải: Bao gồm cả phần đệm (padding) và viền (border) vào tổng chiều rộng và chiều cao của phần tử

Câu 3: Trong CSS, giá trị 'position: sticky' hoạt động như thế nào?

A. Phần tử luôn cố định tại một vị trí trên màn hình bất kể cuộn trang
B. Phần tử được định vị tương đối so với phần tử cha gần nhất có thuộc tính position
C. Phần tử hoạt động như 'relative' cho đến khi đạt tới một ngưỡng cuộn nhất định thì trở thành 'fixed'
D. Phần tử bị loại bỏ khỏi luồng tài liệu thông thường

💡 Lời giải chi tiết:

Vị trí 'sticky' là sự kết hợp giữa 'relative' và 'fixed', cho phép phần tử dính vào một vị trí trong khung hình khi cuộn đến giới hạn xác định, Kết luận Lý giải: Phần tử hoạt động như 'relative' cho đến khi đạt tới một ngưỡng cuộn nhất định thì trở thành 'fixed'

Câu 4: Để căn giữa một phần tử con theo cả chiều dọc và chiều ngang bên trong một thẻ cha sử dụng Flexbox, bạn dùng cặp thuộc tính nào?

A. justify-content: center; align-items: center;
B. text-align: center; vertical-align: middle;
C. display: center; margin: auto;
D. float: center; align-content: center;

💡 Lời giải chi tiết:

Trong mô hình Flexbox, 'justify-content' điều chỉnh căn chỉnh theo trục chính và 'align-items' điều chỉnh theo trục dọc để đưa nội dung vào giữa, Kết luận Lý giải: justify-content: center; align-items: center;

Câu 5: Độ ưu tiên (Specificity) của bộ chọn nào sau đây là cao nhất?

A. Bộ chọn lớp (ví dụ: .my-class)
B. Bộ chọn ID (ví dụ: #my-id)
C. Bộ chọn phần tử (ví dụ: thẻ h1)
D. Bộ chọn giả (ví dụ: :hover)

💡 Lời giải chi tiết:

Theo quy tắc tính trọng số của CSS, bộ chọn ID có giá trị ưu tiên (100) cao hơn nhiều so với lớp (10) hoặc thẻ (1), Kết luận Lý giải: Bộ chọn ID (ví dụ: #my-id)

Câu 6: Đơn vị 'rem' trong CSS được tính toán dựa trên giá trị nào?

A. Kích thước phông chữ của phần tử cha trực tiếp
B. Chiều rộng của màn hình thiết bị
C. Kích thước phông chữ của phần tử gốc (thẻ html)
D. Chiều cao của khung nhìn (viewport)

💡 Lời giải chi tiết:

Đơn vị 'rem' (root em) luôn tham chiếu đến cỡ chữ được thiết lập ở cấp độ cao nhất là thẻ 'html', đảm bảo tính nhất quán toàn trang, Kết luận Lý giải: Kích thước phông chữ của phần tử gốc (thẻ html)

Câu 7: Làm thế nào để ẩn một phần tử nhưng vẫn giữ nguyên không gian mà nó chiếm trên trang web?

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

💡 Lời giải chi tiết:

Khác với 'display: none' vốn xóa bỏ phần tử khỏi bố cục, 'visibility: hidden' chỉ làm phần tử vô hình nhưng vẫn giữ lại khoảng không diện tích của nó, Kết luận Lý giải: visibility: hidden;

Câu 8: Trong CSS Grid, thuộc tính nào được dùng để xác định khoảng cách giữa các hàng và các cột?

A. grid-spacing
B. gap (hoặc grid-gap)
C. margin-grid
D. padding-between

💡 Lời giải chi tiết:

Thuộc tính 'gap' là cách viết tắt hiện đại và chuẩn hóa để tạo khoảng trống giữa các ô trong lưới mà không cần dùng margin, Kết luận Lý giải: gap (hoặc grid-gap)

Câu 9: Thuộc tính 'z-index' chỉ có tác dụng khi phần tử có thuộc tính 'position' nhận giá trị nào sau đây?

A. Chỉ giá trị 'absolute'
B. Bất kỳ giá trị nào khác 'static'
C. Chỉ giá trị 'fixed'
D. Bất kỳ giá trị nào kể cả 'static'

💡 Lời giải chi tiết:

Thuộc tính 'z-index' yêu cầu phần tử phải được định vị (positioned) bằng các giá trị như relative, absolute, fixed, hoặc sticky để tạo ngữ cảnh xếp chồng, Kết luận Lý giải: Bất kỳ giá trị nào khác 'static'

Câu 10: Hàm 'clamp()' trong CSS nhận vào 3 tham số theo thứ tự nào?

A. Giá trị tối đa, giá trị ưa thích, giá trị tối thiểu
B. Giá trị tối thiểu, giá trị tối đa, giá trị ưa thích
C. Giá trị tối thiểu, giá trị ưa thích, giá trị tối đa
D. Giá trị ưa thích, giá trị tối thiểu, giá trị tối đa

💡 Lời giải chi tiết:

Hàm 'clamp(min, preferred, max)' cho phép giới hạn một giá trị nằm trong khoảng từ tối thiểu đến tối đa dựa trên một giá trị linh hoạt ở giữa, Kết luận Lý giải: Giá trị tối thiểu, giá trị ưa thích, giá trị tối đa

Câu 11: Để viết ghi chú (comment) trong một tệp CSS, bạn sử dụng cú pháp nào?

A. // Ghi chú
B. /* Ghi chú */
C.
D. ' Ghi chú

💡 Lời giải chi tiết:

CSS chỉ hỗ trợ duy nhất kiểu ghi chú khối bắt đầu bằng '/*' và kết thúc bằng '*/' cho cả một dòng hoặc nhiều dòng, Kết luận Lý giải: /* Ghi chú */

Câu 12: Thuộc tính nào dùng để thay đổi kiểu chữ (font) cho một đoạn văn bản?

A. font-style
B. text-type
C. font-family
D. font-weight

💡 Lời giải chi tiết:

Thuộc tính 'font-family' được sử dụng để chỉ định danh sách các phông chữ ưu tiên cho phần tử văn bản, Kết luận Lý giải: font-family

Câu 13: Khi sử dụng Flexbox, thuộc tính 'flex-direction: column-reverse' sẽ sắp xếp các phần tử con như thế nào?

A. Theo hàng ngang từ phải sang trái
B. Theo cột từ trên xuống dưới
C. Theo cột từ dưới lên trên
D. Theo hàng ngang từ trái sang phải

💡 Lời giải chi tiết:

Giá trị 'column-reverse' thiết lập trục chính là trục dọc và đảo ngược thứ tự xuất hiện của các phần tử từ dưới lên, Kết luận Lý giải: Theo cột từ dưới lên trên

Câu 14: Thuộc tính 'object-fit: cover' thường được áp dụng cho thẻ 'img' nhằm mục đích gì?

A. Làm cho hình ảnh mờ đi để làm nền
B. Ép hình ảnh thay đổi tỷ lệ để vừa khít khung chứa mà không bị cắt
C. Giữ nguyên tỷ lệ hình ảnh và cắt bớt phần thừa để lấp đầy khung chứa
D. Chỉ hiển thị một phần nhỏ ở trung tâm hình ảnh

💡 Lời giải chi tiết:

Giá trị 'cover' đảm bảo hình ảnh phủ kín kích thước của khung chứa trong khi vẫn duy trì tỷ lệ khung hình ban đầu bằng cách cắt bớt các cạnh, Kết luận Lý giải: Giữ nguyên tỷ lệ hình ảnh và cắt bớt phần thừa để lấp đầy khung chứa

Câu 15: Làm thế nào để chọn tất cả các thẻ 'input' có thuộc tính 'type' là 'text'?

A. input[type='text']
B. input.text
C. input { type: text; }
D. input:text

💡 Lời giải chi tiết:

Bộ chọn thuộc tính (Attribute Selector) sử dụng dấu ngoặc vuông để lọc các phần tử dựa trên tên và giá trị của thuộc tính đi kèm, Kết luận Lý giải: input[type='text']

Câu 16: Trong CSS, thuộc tính 'float' thường gây ra vấn đề gì cho phần tử cha và cách khắc phục phổ biến nhất là gì?

A. Làm mất màu nền; khắc phục bằng cách dùng color
B. Làm phần tử cha bị sụp đổ (collapse) chiều cao; khắc phục bằng 'clearfix' hoặc 'overflow: auto'
C. Làm chữ bị tràn; khắc phục bằng word-break
D. Làm phần tử cha bị ẩn đi; khắc phục bằng display: block

💡 Lời giải chi tiết:

Khi các con sử dụng 'float', chúng bị rút khỏi luồng thông thường khiến cha không tự co dãn theo chiều cao, đòi hỏi kỹ thuật clearfix để thiết lập lại luồng, Kết luận Lý giải: Làm phần tử cha bị sụp đổ (collapse) chiều cao; khắc phục bằng 'clearfix' hoặc 'overflow: auto'

Câu 17: Thuộc tính 'opacity: 0.5' khác với 'background: rgba(0, 0, 0, 0.5)' ở điểm mấu chốt nào?

A. Opacity chỉ áp dụng cho màu nền
B. RGBA làm mờ toàn bộ phần tử bao gồm cả văn bản bên trong
C. Opacity làm mờ toàn bộ phần tử và tất cả các phần tử con của nó
D. Không có sự khác biệt về mặt hiển thị

💡 Lời giải chi tiết:

Thuộc tính 'opacity' ảnh hưởng đến tính minh bạch của toàn bộ thực thể phần tử, trong khi RGBA chỉ tác dụng lên màu sắc của riêng lớp nền, Kết luận Lý giải: Opacity làm mờ toàn bộ phần tử và tất cả các phần tử con của nó

Câu 18: Để tạo hiệu ứng chuyển động mượt mà khi thay đổi màu nền của một nút, bạn sử dụng thuộc tính nào?

A. animation
B. transition
C. transform
D. hover-effect

💡 Lời giải chi tiết:

Thuộc tính 'transition' cho phép định nghĩa quá trình biến đổi trạng thái của các thuộc tính CSS theo thời gian để tạo ra sự mượt mà, Kết luận Lý giải: transition

Câu 19: Giá trị mặc định của thuộc tính 'position' trong CSS là gì?

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

💡 Lời giải chi tiết:

Mọi phần tử HTML ban đầu đều có giá trị vị trí mặc định là 'static', nghĩa là chúng tuân theo luồng tài liệu tự nhiên và không chịu ảnh hưởng của top/left/right/bottom, Kết luận Lý giải: static

Câu 20: Trong Media Queries, điều kiện 'min-width: 768px' có ý nghĩa gì?

A. Áp dụng các kiểu CSS cho màn hình có độ rộng tối đa là 768px
B. Áp dụng các kiểu CSS cho màn hình có độ rộng từ 768px trở lên
C. Chỉ áp dụng cho màn hình có độ rộng chính xác là 768px
D. Loại bỏ các kiểu CSS khi màn hình đạt 768px

💡 Lời giải chi tiết:

Từ khóa 'min-width' thiết lập một điểm ngắt (breakpoint) mà tại đó các quy tắc CSS chỉ bắt đầu có hiệu lực khi chiều rộng khung nhìn lớn hơn hoặc bằng giá trị đó, Kết luận Lý giải: Áp dụng các kiểu CSS cho màn hình có độ rộng từ 768px trở lên

Câu 21: Làm thế nào để xóa bỏ các dấu đầu dòng (bullets) mặc định của một danh sách thẻ 'ul'?

A. list-style: none;
B. text-decoration: none;
C. bullet: hidden;
D. display: no-bullet;

💡 Lời giải chi tiết:

Thuộc tính 'list-style' (hoặc 'list-style-type') với giá trị 'none' là cách chuẩn để loại bỏ các ký hiệu đánh dấu của danh sách trong CSS, Kết luận Lý giải: list-style: none;

Câu 22: Để biến một thẻ 'div' thành một hình tròn hoàn hảo, điều kiện cần thiết là gì?

A. border-radius: 50%; và chiều rộng bằng chiều cao
B. border-radius: 100px; bất kể kích thước
C. display: circle;
D. overflow: hidden; và border-radius: 10%;

💡 Lời giải chi tiết:

Một hình vuông (width = height) khi được áp dụng bo góc 50% sẽ tạo ra hình tròn hoàn chỉnh về mặt hình học, Kết luận Lý giải: border-radius: 50%; và chiều rộng bằng chiều cao

Câu 23: Thuộc tính 'flex-grow' trong Flexbox có vai trò gì?

A. Xác định kích thước ban đầu của phần tử
B. Xác định khả năng co lại của phần tử khi không đủ không gian
C. Xác định tỷ lệ phần tử sẽ giãn ra để lấp đầy không gian trống trong container
D. Định vị phần tử ở cuối container

💡 Lời giải chi tiết:

Thuộc tính 'flex-grow' là một hệ số tỷ lệ cho phép các phần tử flex mở rộng theo không gian dư thừa còn lại trong trục chính của cha, Kết luận Lý giải: Xác định tỷ lệ phần tử sẽ giãn ra để lấp đầy không gian trống trong container

Câu 24: Trong CSS, làm thế nào để viết hoa tất cả các chữ cái của một đoạn văn?

A. text-style: uppercase;
B. text-transform: uppercase;
C. font-variant: capital;
D. text-decoration: capitalize;

💡 Lời giải chi tiết:

Thuộc tính 'text-transform' với giá trị 'uppercase' được dùng để chuyển đổi hiển thị văn bản sang chữ in hoa mà không thay đổi mã nguồn HTML, Kết luận Lý giải: text-transform: uppercase;

Câu 25: Sự khác biệt giữa 'display: inline' và 'display: inline-block' là gì?

A. Không có sự khác biệt nào
B. Inline-block cho phép thiết lập chiều rộng và chiều cao, trong khi inline thì không
C. Inline đẩy các phần tử xuống dòng mới, inline-block thì không
D. Inline-block chỉ dùng cho hình ảnh

💡 Lời giải chi tiết:

Phần tử 'inline' không chấp nhận các giá trị kích thước hình học, trong khi 'inline-block' giữ các phần tử trên cùng một hàng nhưng vẫn cho phép định dạng width/height, Kết luận Lý giải: Inline-block cho phép thiết lập chiều rộng và chiều cao, trong khi inline thì không

Danh sách trắc nghiệm Làm bài tiếp theo

Danh sách các bộ trắc nghiệm:

Các bài trắc nghiệm liên quan

Bộ 1 - Trắc nghiệm CSS online có đáp án

Đề thi 150 lượt làm

Làm ngay

Bộ 2 - Trắc nghiệm CSS online có đáp án

Đề thi 167 lượt làm

Làm ngay

Bộ 3 - Trắc nghiệm CSS online có đáp án

Đề thi 184 lượt làm

Làm ngay

Bộ 4 - Trắc nghiệm CSS online có đáp án

Đề thi 201 lượt làm

Làm ngay

Bộ 5 - Trắc nghiệm CSS online có đáp án

Đề thi 218 lượt làm

Làm ngay

Bộ 6 - Trắc nghiệm CSS online có đáp án

Đề thi 235 lượt làm

Làm ngay

Bộ 15 - Trắc nghiệm CSS online có đáp án

Kết quả của bạn:

Câu 1: Trong CSS, bộ chọn nào được dùng để chọn tất cả các thẻ 'p' là con trực tiếp của thẻ 'div'?

Câu 2: Thuộc tính 'box-sizing: border-box' có tác dụng chính là gì trong mô hình hộp?

Câu 3: Trong CSS, giá trị 'position: sticky' hoạt động như thế nào?

Câu 4: Để căn giữa một phần tử con theo cả chiều dọc và chiều ngang bên trong một thẻ cha sử dụng Flexbox, bạn dùng cặp thuộc tính nào?

Câu 5: Độ ưu tiên (Specificity) của bộ chọn nào sau đây là cao nhất?

Câu 6: Đơn vị 'rem' trong CSS được tính toán dựa trên giá trị nào?

Câu 7: Làm thế nào để ẩn một phần tử nhưng vẫn giữ nguyên không gian mà nó chiếm trên trang web?

Câu 8: Trong CSS Grid, thuộc tính nào được dùng để xác định khoảng cách giữa các hàng và các cột?

Câu 9: Thuộc tính 'z-index' chỉ có tác dụng khi phần tử có thuộc tính 'position' nhận giá trị nào sau đây?

Câu 10: Hàm 'clamp()' trong CSS nhận vào 3 tham số theo thứ tự nào?

Câu 11: Để viết ghi chú (comment) trong một tệp CSS, bạn sử dụng cú pháp nào?

Câu 12: Thuộc tính nào dùng để thay đổi kiểu chữ (font) cho một đoạn văn bản?

Câu 13: Khi sử dụng Flexbox, thuộc tính 'flex-direction: column-reverse' sẽ sắp xếp các phần tử con như thế nào?

Câu 14: Thuộc tính 'object-fit: cover' thường được áp dụng cho thẻ 'img' nhằm mục đích gì?

Câu 15: Làm thế nào để chọn tất cả các thẻ 'input' có thuộc tính 'type' là 'text'?

Câu 16: Trong CSS, thuộc tính 'float' thường gây ra vấn đề gì cho phần tử cha và cách khắc phục phổ biến nhất là gì?

Câu 17: Thuộc tính 'opacity: 0.5' khác với 'background: rgba(0, 0, 0, 0.5)' ở điểm mấu chốt nào?

Câu 18: Để tạo hiệu ứng chuyển động mượt mà khi thay đổi màu nền của một nút, bạn sử dụng thuộc tính nào?

Câu 19: Giá trị mặc định của thuộc tính 'position' trong CSS là gì?

Câu 20: Trong Media Queries, điều kiện 'min-width: 768px' có ý nghĩa gì?

Câu 21: Làm thế nào để xóa bỏ các dấu đầu dòng (bullets) mặc định của một danh sách thẻ 'ul'?

Câu 22: Để biến một thẻ 'div' thành một hình tròn hoàn hảo, điều kiện cần thiết là gì?

Câu 23: Thuộc tính 'flex-grow' trong Flexbox có vai trò gì?

Câu 24: Trong CSS, làm thế nào để viết hoa tất cả các chữ cái của một đoạn văn?

Câu 25: Sự khác biệt giữa 'display: inline' và 'display: inline-block' là gì?

Danh sách các bộ trắc nghiệm:

Voviethoang.top

Voviethoangseo.com

Seogenz.top