Trắc nghiệm Tin học 12 Cánh diều Bài 9: Thực hành định dạng một số thuộc tính CSS - Đề 10
Trắc nghiệm Tin học 12 Cánh diều Bài 9: Thực hành định dạng một số thuộc tính CSS - Đề 10 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.
Câu 1: Bạn muốn đặt màu chữ cho tất cả các đoạn văn (
) trong trang web của mình thành màu xanh dương. Quy tắc CSS nào sau đây là đúng cú pháp để thực hiện điều này?
- A. p ( color = blue; )
- B. [p] { text-color: blue; }
- C. p { color: blue; }
- D. .p { color: blue; }
Câu 2: Xem xét đoạn mã HTML và CSS sau:
HTML:
<h1>Chào mừng!</h1>
CSS:
h1 { background-color: yellow; }
Kết quả hiển thị của phần tử <h1> sẽ như thế nào?
- A. Chữ "Chào mừng!" có màu vàng.
- B. Tiêu đề có nền màu vàng.
- C. Tiêu đề có viền màu vàng.
- D. Chữ "Chào mừng!" có kích thước lớn hơn.
Câu 3: Để liên kết một tệp CSS bên ngoài có tên là "style.css" với trang HTML của bạn, bạn cần thêm thẻ <link> vào phần <head> của tài liệu HTML. Thuộc tính và giá trị nào là bắt buộc trong thẻ <link> này?
- A. type=
- B. rel=
- C. href=
- D. rel=
Câu 4: Bạn muốn tăng kích thước chữ của một đoạn văn cụ thể mà không ảnh hưởng đến các đoạn văn khác. Phương pháp nào sau đây là phù hợp nhất để áp dụng định dạng CSS này trực tiếp lên đoạn văn đó?
- A. Sử dụng CSS nội dòng (inline CSS) với thuộc tính "style".
- B. Khai báo quy tắc CSS trong thẻ <style> ở phần <head>.
- C. Tạo một tệp CSS bên ngoài và liên kết nó.
- D. Sử dụng bộ chọn lớp (class selector) trong CSS.
Câu 5: Thuộc tính CSS nào được sử dụng để kiểm soát khoảng cách giữa nội dung của phần tử và đường viền của nó?
- A. margin
- B. padding
- C. border
- D. space
Câu 6: Bạn có một hình ảnh trong trang web và muốn thêm một đường viền dày 2 pixel, kiểu nét liền (solid) và màu đỏ xung quanh nó. Quy tắc CSS nào sau đây thực hiện điều này cho thẻ <img>?
- A. img { border-style: solid; border-thickness: 2px; border-color: red; }
- B. img { border: red solid 2px; }
- C. img { border-width: 2px; border-line: solid; border-color: red; }
- D. img { border: 2px solid red; }
Câu 7: Xem xét đoạn mã HTML và CSS:
HTML:
<div>Một khối nội dung.</div>
CSS:
div { width: 200px; height: 100px; background-color: lightblue; }
Đoạn mã CSS này định dạng những thuộc tính nào cho phần tử <div>?
- A. Chiều rộng, chiều cao và màu nền.
- B. Màu chữ, kích thước chữ và kiểu chữ.
- C. Khoảng lề ngoài, khoảng đệm và viền.
- D. Vị trí và hiển thị.
Câu 8: Thuộc tính CSS nào được sử dụng để căn chỉnh văn bản (ví dụ: căn trái, căn phải, căn giữa) bên trong một phần tử?
- A. align
- B. text-decoration
- C. text-align
- D. vertical-align
Câu 9: Bạn muốn đặt khoảng cách 15 pixel ở cả bốn phía (trên, phải, dưới, trái) bên ngoài đường viền của một phần tử. Thuộc tính và giá trị CSS nào thực hiện điều này?
- A. margin: 15px;
- B. padding: 15px;
- C. border-spacing: 15px;
- D. outline-offset: 15px;
Câu 10: Trong tệp CSS, bạn thấy quy tắc sau: `body { font-family: Arial, sans-serif; }`. Nếu trình duyệt không tìm thấy phông chữ "Arial" trên máy tính của người dùng, nó sẽ sử dụng phông chữ nào?
- A. Phông chữ mặc định của trình duyệt.
- B. Chắc chắn sẽ sử dụng Arial vì nó là phông chữ phổ biến.
- C. Không hiển thị văn bản.
- D. Một phông chữ thuộc họ sans-serif có sẵn trên hệ thống.
Câu 11: Bạn muốn tất cả các liên kết (<a>) trong trang web của mình không có gạch chân mặc định. Thuộc tính CSS nào được sử dụng để loại bỏ gạch chân cho văn bản?
- A. text-style: none;
- B. text-decoration: none;
- C. underline: false;
- D. text-underline: none;
Câu 12: Xem xét đoạn mã HTML và CSS:
HTML:
<p class=
- A. Màu đỏ.
- B. Màu đen (mặc định).
- C. Màu xanh dương.
- D. Màu nền đỏ.
Câu 13: Thuộc tính CSS nào được sử dụng để đặt màu cho đường viền của một phần tử?
- A. border-style
- B. border-width
- C. border-color
- D. border-line
Câu 14: Bạn muốn đặt kích thước chữ là 18 pixel cho tất cả các phần tử có ID là "main-title". Quy tắc CSS nào sau đây là đúng?
- A. .main-title { font-size: 18px; }
- B. main-title { font-size: 18px; }
- C. <main-title> { font-size: 18px; }
- D. #main-title { font-size: 18px; }
Câu 15: Khi sử dụng CSS nội dòng (inline CSS), các quy tắc định dạng được viết trực tiếp vào thuộc tính nào của thẻ HTML?
- A. class
- B. style
- C. id
- D. css
Câu 16: Bạn muốn một hình ảnh hiển thị ở giữa trang theo chiều ngang. Nếu hình ảnh là một phần tử cấp khối (block-level element) hoặc bạn biến nó thành block, bạn có thể sử dụng thuộc tính "margin" kết hợp với giá trị "auto". Quy tắc CSS nào sau đây giúp căn giữa hình ảnh theo chiều ngang?
- A. text-align: center;
- B. align: center;
- C. margin: 0 auto;
- D. float: center;
Câu 17: Bạn muốn thay đổi kiểu nét của đường viền thành nét đứt (dashed). Thuộc tính CSS nào được sử dụng để xác định kiểu nét của đường viền?
- A. border-style
- B. border-type
- C. border-decoration
- D. border-line
Câu 18: Xem xét đoạn mã HTML và CSS:
HTML:
<div style=
- A. 20 pixel (margin)
- B. 10 pixel (padding)
- C. 1 pixel (border)
- D. 30 pixel (padding + margin)
Câu 19: Thuộc tính CSS nào được sử dụng để thay đổi màu chữ khi người dùng rê chuột qua một liên kết (<a>)?
- A. a:active { color: ... }
- B. a:visited { color: ... }
- C. a:link { color: ... }
- D. a:hover { color: ... }
Câu 20: Bạn muốn áp dụng cùng một bộ định dạng (ví dụ: màu nền xám, chữ màu trắng) cho nhiều phần tử khác nhau trên trang mà không lặp lại mã CSS. Phương pháp nào sau đây là hiệu quả nhất?
- A. Sử dụng bộ chọn lớp (class selector).
- B. Sử dụng bộ chọn ID (ID selector).
- C. Sử dụng CSS nội dòng (inline CSS) cho từng phần tử.
- D. Lặp lại quy tắc CSS cho từng loại phần tử (element selector).
Câu 21: Thuộc tính CSS nào được sử dụng để xác định độ đậm hay nhạt của phông chữ (ví dụ: normal, bold)?
- A. font-style
- B. font-variant
- C. font-weight
- D. text-weight
Câu 22: Bạn có một danh sách các mục (<li>) và muốn mỗi mục có một khoảng đệm 5 pixel ở phía dưới. Quy tắc CSS nào thực hiện điều này?
- A. li { padding: 5px; }
- B. li { padding-bottom: 5px; }
- C. li { margin-bottom: 5px; }
- D. li { border-bottom: 5px; }
Câu 23: Xem xét đoạn mã HTML và CSS:
HTML:
<div id=
- A. Tất cả các đoạn văn (<p>) bên trong phần tử <div> có ID là "container".
- B. Chỉ phần tử <div> có ID là "container".
- C. Chỉ đoạn văn đầu tiên bên trong phần tử <div> có ID là "container".
- D. Tất cả các đoạn văn (<p>) trên toàn bộ trang.
Câu 24: Thuộc tính CSS nào được sử dụng để đặt màu nền cho toàn bộ trang web?
- A. page-color
- B. body-background
- C. html-color
- D. background-color trên bộ chọn body hoặc html
Câu 25: Bạn muốn đặt khoảng cách 10 pixel ở phía trên và phía dưới, và 20 pixel ở phía trái và phía phải bên trong đường viền của một phần tử. Thuộc tính "padding" với các giá trị nào thực hiện điều này?
- A. padding: 10px 20px 10px 20px;
- B. padding: 20px 10px;
- C. padding: 10px 20px;
- D. padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px;
Câu 26: Điều gì xảy ra nếu bạn khai báo cùng một thuộc tính CSS (ví dụ: color) cho cùng một phần tử bằng cả CSS nội dòng (inline) và một quy tắc trong thẻ <style> (internal)?
- A. Quy tắc CSS nội dòng sẽ được áp dụng.
- B. Quy tắc trong thẻ <style> sẽ được áp dụng.
- C. Không có quy tắc nào được áp dụng, màu chữ sẽ là màu mặc định.
- D. Kết quả không xác định, tùy thuộc vào trình duyệt.
Câu 27: Bạn muốn đặt chiều rộng (width) của một hình ảnh thành 50% chiều rộng của phần tử chứa nó. Quy tắc CSS nào thực hiện điều này?
- A. img { width: 50px; }
- B. img { width: 50vw; }
- C. img { width: 50em; }
- D. img { width: 50%; }
Câu 28: Để làm cho văn bản trong một phần tử trở thành chữ in nghiêng, bạn sử dụng thuộc tính CSS nào?
- A. text-style
- B. font-style
- C. text-decoration
- D. font-weight
Câu 29: Bạn muốn đặt một đường viền màu xanh dương dày 3 pixel, nét liền chỉ ở phía dưới của một phần tử. Quy tắc CSS nào sau đây là đúng?
- A. border-bottom: 3px solid blue;
- B. border: bottom 3px solid blue;
- C. border-style-bottom: solid; border-width-bottom: 3px; border-color-bottom: blue;
- D. bottom-border: 3px solid blue;
Câu 30: Xem xét đoạn mã HTML:
<p id=
- A. Quy tắc của bộ chọn lớp (.text-center) vì nó được khai báo sau.
- B. Quy tắc của bộ chọn lớp (.text-center) vì nó có 2 thuộc tính.
- C. Quy tắc của bộ chọn ID (#intro) vì bộ chọn ID có độ ưu tiên cao hơn bộ chọn lớp.
- D. Kết quả không xác định do xung đột quy tắc.
