Trắc nghiệm Tin học 12 Chân trời sáng tạo Bài F8: Một số thuộc tính cơ bản của CSS - Đề 09 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.
Câu 2: Cho một đoạn mã HTML `
A. 16px
B. 1.5px
C. 17.5px
D. 24px
Câu 3: Bạn muốn đặt một hình ảnh làm nền cho toàn bộ trang web (thẻ `
`), đảm bảo hình ảnh đó chỉ hiển thị một lần ở trung tâm và không lặp lại. Thuộc tính CSS nào cần sử dụng kết hợp để đạt được điều này?
- A. background-image, background-repeat: repeat, background-position: center;
- B. background-image, background-repeat: no-repeat, background-position: center;
- C. background-image, background-size: cover, background-repeat: no-repeat;
- D. background-image, background-attachment: fixed, background-position: center;
Câu 4: Một phần tử `div` có các thuộc tính CSS sau: `width: 200px; padding: 20px; border: 5px solid black; margin: 10px;`. Tổng chiều rộng thực tế mà phần tử này chiếm trên trang (bao gồm cả margin) là bao nhiêu pixel?
- A. 270px
- B. 250px
- C. 240px
- D. 230px
Câu 5: Để căn chỉnh văn bản bên trong một phần tử (ví dụ: một đoạn `
`) theo lề phải, bạn sử dụng thuộc tính CSS nào với giá trị thích hợp?
- A. align: right;
- B. vertical-align: right;
- C. text-align: right;
- D. float: right;
Câu 6: Quy tắc CSS `border: 3px dotted green;` áp dụng cho một phần tử sẽ tạo ra loại viền như thế nào?
- A. Viền nét liền, dày 3px, màu xanh lá.
- B. Viền nét chấm, dày 3px, màu xanh lá.
- C. Viền nét đứt, dày 3px, màu xanh lá.
- D. Viền nét đôi, dày 3px, màu xanh lá.
Câu 7: Bạn muốn thêm một đường viền nét đứt màu đỏ dày 2 pixel chỉ ở phía trên cho một hình ảnh (`![]()
`). Quy tắc CSS nào sau đây là đúng?
- A. img { border-top: 2px dashed red; }
- B. img { border: top 2px dashed red; }
- C. img { border-style: dashed-top; border-width: 2px; border-color: red; }
- D. img { top-border: 2px dashed red; }
Câu 8: Trong CSS, cách nào sau đây không phải là một cách hợp lệ để chỉ định màu sắc cho một thuộc tính (ví dụ: `color` hoặc `background-color`)?
- A. Sử dụng tên màu tiếng Anh (ví dụ: `red`).
- B. Sử dụng mã màu HEX (ví dụ: `#FF0000`).
- C. Sử dụng hàm `rgb()` (ví dụ: `rgb(255, 0, 0)`).
- D. Sử dụng tên màu tiếng Việt (ví dụ: `đỏ`).
Câu 9: Bạn muốn tạo một lớp CSS có tên `.special-text` để áp dụng cho các đoạn văn bản cần hiển thị chữ nghiêng, cỡ chữ 18px và sử dụng phông chữ "Times New Roman" (hoặc phông chữ có chân mặc định nếu "Times New Roman" không có). Quy tắc CSS nào sau đây thực hiện được điều đó?
- A. .special-text { font-style: italic; font-size: 18px; font-family: "Times New Roman", serif; }
- B. .special-text { text-style: italic; text-size: 18px; text-font: "Times New Roman", serif; }
- C. .special-text { font-weight: italic; font-size: 18pt; font-family: "Times New Roman"; }
- D. .special-text { style: italic; size: 18px; font: "Times New Roman", serif; }
Câu 10: Nếu bạn đặt một hình ảnh làm nền cho một phần tử bằng thuộc tính `background-image` và thiết lập `background-repeat: repeat-x;`, hình ảnh nền sẽ hiển thị như thế nào?
- A. Hình ảnh lặp lại theo cả chiều ngang và chiều dọc.
- B. Hình ảnh chỉ hiển thị một lần và không lặp lại.
- C. Hình ảnh lặp lại theo chiều ngang.
- D. Hình ảnh lặp lại theo chiều dọc.
Câu 11: Bạn muốn đặt khoảng đệm (padding) cho một phần tử sao cho khoảng đệm phía trên và dưới là 15px, còn khoảng đệm phía trái và phải là 25px. Sử dụng cú pháp rút gọn của thuộc tính `padding`, quy tắc nào sau đây là đúng?
- A. padding: 15px 25px;
- B. padding: 15px 15px 25px 25px;
- C. padding: 25px 15px;
- D. padding: 15px 25px 15px 25px;
Câu 12: Bạn áp dụng `margin-top: 30px;` cho một thẻ `` chứa văn bản. Điều gì có khả năng xảy ra nhất với khoảng cách phía trên của thẻ `` so với các phần tử trước nó?
- A. Khoảng cách 30px sẽ được thêm vào phía trên thẻ `` một cách đáng tin cậy.
- B. Thuộc tính `margin-top` có thể không có hiệu lực hoặc có hiệu lực không như mong đợi vì `` là phần tử nội dòng (inline).
- C. Thẻ `` sẽ tự động chuyển thành phần tử khối (block) để áp dụng margin.
- D. Chỉ có `padding-top` mới có hiệu lực trên thẻ ``.
Câu 13: Trong quy tắc CSS `h1 { color: red; font-size: 24px; }`, phần nào được gọi là "selector"?
- A. `h1`
- B. `color: red; font-size: 24px;`
- C. `color` và `font-size`
- D. `red` và `24px`
Câu 14: Nếu một đoạn văn bản `
` có quy tắc CSS được định nghĩa trong tệp style.css là `p { color: blue; }` và đồng thời có style nội dòng (inline style) là `
A. Màu xanh dương (blue).
B. Màu đỏ (red) - mặc định.
C. Màu xanh lá (green).
D. Màu sẽ thay đổi ngẫu nhiên giữa xanh dương và xanh lá.
Câu 15: Một phần tử có cả `background-color: yellow;` và `background-image: url("nen.png");`. Nếu hình ảnh `nen.png` không trong suốt và đủ lớn để che phủ toàn bộ phần tử, màu nền vàng sẽ hiển thị như thế nào?
- A. Màu vàng sẽ hiển thị bên trên hình ảnh nền.
- B. Màu vàng sẽ không hiển thị vì bị hình ảnh nền che phủ.
- C. Màu vàng sẽ hiển thị như một lớp phủ mờ trên hình ảnh nền.
- D. Trình duyệt sẽ báo lỗi vì không thể đặt cả màu nền và hình nền cùng lúc.
Câu 16: Sự khác biệt chính giữa đơn vị `px` (pixel) và đơn vị `em` khi sử dụng cho thuộc tính `font-size` là gì?
- A. `px` là đơn vị tuyệt đối, còn `em` là đơn vị tương đối, phụ thuộc vào kích thước chữ của phần tử cha hoặc phần tử gốc.
- B. `px` chỉ dùng cho `font-size`, còn `em` dùng cho mọi thuộc tính kích thước.
- C. `em` là đơn vị tuyệt đối, còn `px` là đơn vị tương đối.
- D. Không có sự khác biệt đáng kể giữa hai đơn vị này khi dùng cho `font-size`.
Câu 17: Sử dụng cú pháp rút gọn của thuộc tính `margin`, quy tắc nào sau đây đặt lề 20px cho cả bốn phía (trên, phải, dưới, trái) của một phần tử?
- A. margin: 20px 20px 20px 20px;
- B. margin: 20;
- C. margin: all 20px;
- D. margin: 20px;
Câu 18: Thuộc tính CSS `text-decoration: underline;` có tác dụng gì đối với văn bản?
- A. Làm cho văn bản in đậm.
- B. Tạo gạch chân dưới văn bản.
- C. Làm cho văn bản in nghiêng.
- D. Tạo gạch ngang trên văn bản.
Câu 19: Bạn muốn đặt màu cho đường viền bên phải của một phần tử thành màu đỏ, trong khi các viền khác không đổi hoặc không có. Quy tắc CSS nào sau đây là đúng?
- A. border-right-color: red;
- B. border-color-right: red;
- C. right-border-color: red;
- D. border: right red;
Câu 20: Giá trị nào sau đây của thuộc tính `font-weight` thường làm cho chữ hiển thị đậm hơn so với giá trị `normal`?
- A. light
- B. italic
- C. bold
- D. thin
Câu 21: Để căn giữa theo chiều ngang một phần tử khối (block-level element, ví dụ: `div`) có chiều rộng cố định (ví dụ: `width: 500px;`) trong phần tử chứa nó, bạn sử dụng thuộc tính `margin` như thế nào?
- A. margin: center;
- B. margin-left: auto; margin-right: auto;
- C. text-align: center;
- D. margin: 0 auto;
Câu 22: Bạn muốn đặt hình nền cho một phần tử và chỉ hiển thị nó ở góc dưới bên phải của phần tử đó. Thuộc tính CSS nào bạn sẽ sử dụng để định vị hình nền?
- A. background-position: bottom right;
- B. background-align: bottom right;
- C. image-position: bottom right;
- D. background-origin: bottom right;
Câu 23: Để làm cho văn bản in nghiêng, bạn sử dụng thuộc tính `font-style` với giá trị nào?
- A. bold
- B. italic
- C. oblique
- D. underline
Câu 24: Sử dụng cú pháp rút gọn của thuộc tính `padding`, quy tắc nào sau đây đặt khoảng đệm trên 10px, phải 20px, dưới 30px, và trái 40px?
- A. padding: 10px 40px 30px 20px;
- B. padding: 10px 20px 30px 40px 10px 20px 30px 40px;
- C. padding: 10px 20px 30px 40px;
- D. padding: top 10px right 20px bottom 30px left 40px;
Câu 25: Sự khác biệt về mặt hiển thị giữa `border-style: solid;` và `border-style: dotted;` là gì?
- A. Solid là nét liền, dotted là nét đôi.
- B. Solid là nét đứt, dotted là nét chấm.
- C. Solid là nét chấm, dotted là nét đứt.
- D. Solid là nét liền, dotted là nét chấm.
Câu 26: Bạn muốn áp dụng một đường viền nét liền màu xám dày 5px cho tất cả các hình ảnh (`![]()
`) trên trang. Quy tắc CSS nào sau đây thực hiện được điều đó?
- A. image { border: 5px solid gray; }
- B. img { border: 5px solid gray; }
- C. .img { border: 5px solid gray; }
- D.
![]()
{ border: 5px solid gray; }
Câu 27: Thuộc tính CSS nào được sử dụng để kiểm soát khoảng cách giữa các dòng văn bản trong một phần tử?
- A. text-spacing
- B. line-spacing
- C. line-height
- D. vertical-align
Câu 28: Viết một quy tắc CSS duy nhất để định kiểu cho tất cả các thẻ `
` trên trang, đặt màu chữ thành màu đỏ và cỡ chữ thành 14px.
- A. p { color = red; font-size = 14px; }
- B. p { red color; 14px font-size; }
- C. p { color: red font-size: 14px; }
- D. p { color: red; font-size: 14px; }
Câu 29: Một phần tử `div` có `width: 75%;` và nằm bên trong một phần tử cha có chiều rộng cố định là 600px. Chiều rộng tính toán của phần tử `div` này sẽ là bao nhiêu pixel?
- A. 75px
- B. 450px
- C. 600px
- D. 75% của chiều rộng màn hình.
Câu 30: Bạn muốn đặt màu nền cho một phần tử là màu xanh lá cây với độ trong suốt 50%. Hàm màu nào trong CSS cho phép bạn chỉ định cả màu sắc và độ trong suốt (alpha channel)?
- A. rgba()
- B. rgb()
- C. hsl()
- D. hex()
