Bài Tập Trắc nghiệm Tin học 12 - Cánh diều - Bài 8: Làm quen với CSS - Đề 09 được xây dựng với nhiều câu hỏi chất lượng, sát với nội dung chương trình học, giúp bạn dễ dàng ôn tập và kiểm tra kiến thức hiệu quả. Hãy cùng bắt đầu làm bài tập trắc nghiệm ngay để nâng cao hiểu biết và chuẩn bị tốt cho kỳ thi sắp tới!
Câu 1: Mục đích chính của việc sử dụng CSS (Cascading Style Sheets) trong phát triển web là gì?
- A. Xác định cấu trúc và nội dung của trang web.
- B. Tách biệt phần nội dung (HTML) và phần trình bày (kiểu dáng).
- C. Thêm các chức năng tương tác cho trang web.
- D. Quản lý cơ sở dữ liệu cho trang web.
Câu 2: Trong một quy tắc CSS cơ bản có dạng `selector { property: value; }`, thành phần `selector` đóng vai trò gì?
- A. Xác định giá trị của thuộc tính định dạng.
- B. Xác định kiểu định dạng sẽ áp dụng (ví dụ: màu sắc, kích thước).
- C. Xác định (các) phần tử HTML sẽ được áp dụng quy tắc định dạng.
- D. Kết thúc một quy tắc định dạng.
Câu 3: Để thay đổi màu chữ của tất cả các đoạn văn (`
`) trên trang web thành màu xanh dương, quy tắc CSS nào sau đây là đúng?
- A. p { text-color: blue; }
- B. paragraph { color: blue; }
- C. p { blue: color; }
- D. p { color: blue; }
Câu 4: Giả sử bạn có đoạn mã HTML sau: `
Tiêu đề chính
`. Bạn muốn tiêu đề này có màu chữ đỏ và cỡ chữ lớn hơn bình thường. Quy tắc CSS nào sau đây sẽ áp dụng định dạng đó cho thẻ `H1`?
- A. h1 { color: red; font-size: 36px; }
- B. H1 { text-color: red; size: 36px; }
- C. h1 { font-color: red; text-size: 36px; }
- D. H1 { red: color; 36px: font-size; }
Câu 5: Thuộc tính CSS nào được sử dụng để thiết lập màu nền (background color) cho một phần tử HTML?
- A. color
- B. background-color
- C. bgcolor
- D. fill-color
Câu 6: Để áp dụng một kiểu phông chữ cụ thể (ví dụ: "Arial", "Times New Roman") cho văn bản, thuộc tính CSS nào là phù hợp nhất?
- A. font-style
- B. font-size
- C. font-family
- D. text-font
Câu 7: Đơn vị đo lường nào sau đây thường được sử dụng để xác định kích thước chữ (`font-size`) trong CSS, đặc biệt khi muốn kiểm soát kích thước tuyệt đối?
- A. px (pixel)
- B. cm (centimeter)
- C. in (inch)
- D. kg (kilogram)
Câu 8: Thuộc tính CSS nào được sử dụng để xác định kiểu của đường viền (ví dụ: nét liền, nét đứt, chấm)?
- A. border-width
- B. border-color
- C. border-size
- D. border-style
Câu 9: Thuộc tính `border-color` trong CSS sẽ chỉ có hiệu lực khi thuộc tính nào khác cũng được khai báo?
- A. border-style
- B. color
- C. background-color
- D. font-size
Câu 10: Bạn có đoạn mã HTML: `
Đoạn văn bản.
`. Bạn muốn đoạn văn bản này có màu chữ xanh lá cây và màu nền vàng. Quy tắc CSS nào sau đây thực hiện được điều đó?
- A. p { text-color: green; background: yellow; }
- B. p { green: color; yellow: background-color; }
- C. p { color: green; background-color: yellow; }
- D. paragraph { color: green; background-color: yellow; }
Câu 11: Khi viết nhiều khai báo định dạng cho cùng một bộ chọn trong CSS, các khai báo đó được đặt bên trong cặp dấu nào?
Câu 12: Mỗi khai báo định dạng (ví dụ: `color: blue;`) trong một quy tắc CSS cần được kết thúc bằng ký tự nào?
Câu 13: Việc sử dụng CSS để định dạng trang web mang lại lợi ích gì trong việc bảo trì và cập nhật nội dung?
- A. Có thể thay đổi giao diện của nhiều trang web chỉ bằng cách chỉnh sửa một tệp CSS duy nhất.
- B. Làm cho mã HTML phức tạp hơn nhưng linh hoạt hơn.
- C. Chỉ cho phép định dạng một phần tử HTML tại một thời điểm.
- D. Tăng tốc độ tải trang bằng cách nhúng trực tiếp định dạng vào HTML.
Câu 15: Để làm cho văn bản trong một phần tử trở nên in đậm, bạn sẽ sử dụng thuộc tính CSS nào?
- A. font-weight
- B. text-weight
- C. font-style
- D. text-style
Câu 16: Bạn muốn căn giữa đoạn văn bản trong một phần tử. Thuộc tính CSS nào được sử dụng để điều khiển việc căn chỉnh văn bản theo chiều ngang?
- A. align
- B. vertical-align
- C. text-align
- D. horizontal-align
Câu 17: Giả sử bạn có đoạn mã HTML: `
Chào mừng bạn!
`. Bạn muốn khối `div` này có đường viền nét đứt màu xanh lá cây. Quy tắc CSS nào sau đây là đúng?
- A. div { border-style: dashed; color: green; }
- B. div { border: dashed green; }
- C. div { border-color: green; style: dashed; }
- D. div { border-style: dashed; border-color: green; }
Câu 18: Một lợi ích rõ rệt của việc sử dụng tệp CSS bên ngoài (`
A. Tệp CSS bên ngoài chỉ áp dụng cho một phần tử duy nhất.
B. Tệp CSS bên ngoài tải nhanh hơn CSS nội bộ vì nó được nhúng trực tiếp vào HTML.
C. Có thể sử dụng lại cùng một tệp CSS cho nhiều trang HTML khác nhau.
D. CSS bên ngoài có độ ưu tiên thấp hơn CSS nội bộ.
Câu 19: Khi bạn muốn định dạng tất cả các tiêu đề cấp 2 (`
`) và tiêu đề cấp 3 (`
`) cùng một lúc với cùng một quy tắc CSS, bạn sử dụng kỹ thuật nào cho bộ chọn?
- A. Nhóm các bộ chọn bằng dấu phẩy: `h2, h3 { ... }`
- B. Viết hai quy tắc riêng biệt cho từng bộ chọn.
- C. Sử dụng bộ chọn lồng nhau: `h2 h3 { ... }`
- D. Sử dụng bộ chọn kết hợp: `h2+h3 { ... }`
Câu 20: Giả sử bạn có quy tắc CSS sau: `body { background-color: lightblue; }`. Quy tắc này sẽ áp dụng màu nền xanh nhạt cho phần tử HTML nào?
- A. Tất cả các đoạn văn.
- B. Tất cả các tiêu đề.
- C. Chỉ phần tử ``.
- D. Toàn bộ phần thân của trang web (nội dung hiển thị).
Câu 21: Thuộc tính `border-width` trong CSS được sử dụng để làm gì?
- A. Xác định khoảng cách giữa đường viền và nội dung bên trong.
- B. Xác định kiểu của đường viền.
- C. Xác định độ dày của đường viền.
- D. Xác định màu của đường viền.
Câu 22: Bạn đang thiết kế một trang web và muốn đảm bảo rằng tất cả các hình ảnh (`![]()
`) có đường viền nét liền màu xám. Quy tắc CSS nào là cần thiết?
- A. img { border: solid grey; }
- B. img { border-style: solid; border-color: grey; }
- C. image { border-style: solid; border-color: grey; }
- D. img { style: solid; color: grey; }
Câu 23: Xét quy tắc CSS: `p { font-size: 16px; }`. Nếu bạn muốn tăng kích thước chữ của đoạn văn lên gấp rưỡi (1.5 lần), bạn sẽ thay đổi giá trị `16px` thành bao nhiêu?
- A. 24px
- B. 17.5px
- C. 32px
- D. 8px
Câu 24: Điều gì xảy ra nếu bạn viết sai tên thuộc tính CSS, ví dụ: thay vì `background-color`, bạn viết `bgcolor`?
- A. Trình duyệt sẽ tự động sửa lỗi và áp dụng định dạng đúng.
- B. Trang web sẽ hiển thị thông báo lỗi và không tải được.
- C. Trình duyệt sẽ bỏ qua (không áp dụng) khai báo định dạng đó.
- D. Chỉ thuộc tính đầu tiên trong quy tắc đó được áp dụng.
Câu 25: Lợi ích chính của việc tách CSS ra khỏi HTML là giúp mã nguồn web trở nên...
- A. Phức tạp hơn và khó đọc hơn.
- B. Chỉ có thể chỉnh sửa bởi chuyên gia.
- C. Ít linh hoạt hơn trong việc thay đổi giao diện.
- D. Gọn gàng, dễ đọc và dễ quản lý hơn.
Câu 26: Xét đoạn mã CSS: `h1 { color: red } p { font-size: 14px; }`. Ký tự nào bị thiếu trong đoạn mã trên có thể gây ra lỗi hoặc kết quả không mong muốn?
- A. Dấu hai chấm (:) sau `h1`.
- B. Dấu ngoặc nhọn đóng (`}`) sau `14px;`.
- C. Dấu chấm phẩy (;) sau `red`.
- D. Dấu ngoặc nhọn mở (`{`) sau `p`.
Câu 27: Giả sử bạn có một trang web đơn giản chỉ với một tiêu đề `
` và một đoạn văn bản `
`. Bạn muốn tiêu đề có màu xanh lá cây và đoạn văn bản có màu tím. Quy tắc CSS nào dưới đây sẽ thực hiện được điều đó?
- A. h1 { color: green; } p { color: purple; }
- B. h1, p { color: green, purple; }
- C. h1 p { color: green purple; }
- D. color: h1 green; color: p purple;
Câu 28: Khi sử dụng thuộc tính `font-family`, tại sao người ta thường liệt kê nhiều tên phông chữ, ví dụ: `font-family: Arial, sans-serif;`?
- A. Để làm cho văn bản hiển thị với tất cả các phông chữ được liệt kê cùng lúc.
- B. Để trình duyệt chọn ngẫu nhiên một trong các phông chữ đó.
- C. Để cung cấp các phông chữ dự phòng nếu phông chữ đầu tiên không có sẵn trên hệ thống của người dùng.
- D. Để tăng tốc độ tải trang bằng cách cung cấp nhiều tùy chọn.
Câu 29: Bạn muốn áp dụng cùng một kiểu định dạng (ví dụ: màu nền, cỡ chữ) cho tất cả các phần tử `
` (mục danh sách) trong trang. Phương pháp sử dụng bộ chọn nào là hiệu quả nhất?
- A. Sử dụng bộ chọn phần tử `li`.
- B. Gán một `id` duy nhất cho mỗi thẻ `
- ` và định dạng từng cái một.
- C. Gán một `class` khác nhau cho mỗi thẻ `
- ` và định dạng từng lớp.
- D. Sử dụng bộ chọn cha-con: `ul li { ... }` (Đây cũng là một cách, nhưng bộ chọn `li` đơn giản hơn nếu muốn áp dụng cho tất cả `li` bất kể cha mẹ).
Câu 30: Khi bạn nhìn thấy một quy tắc CSS như `h2 { font-size: 20px background-color: yellow; }`, lỗi cú pháp rõ ràng nhất ở đây là gì?
- A. Thiếu dấu hai chấm (:) sau `h2`.
- B. Thiếu dấu chấm phẩy (;) giữa hai khai báo.
- C. Sử dụng sai tên thuộc tính `background-color`.
- D. Thiếu dấu ngoặc nhọn đóng (`}`) ở cuối.
