Câu 1:Trong CSS, thuật ngữ 'CSS' là viết tắt của cụm từ nào sau đây?
💡 Lời giải chi tiết:
Theo định nghĩa chuẩn của W3C, CSS là viết tắt của Cascading Style Sheets dùng để định dạng cách hiển thị của các phần tử HTML. Kết luận Lý giải Cascading Style Sheets
Câu 2:Để chọn một phần tử có 'id' cụ thể trong CSS, bạn phải sử dụng ký tự tiền tố nào?
💡 Lời giải chi tiết:
Trong quy tắc chọn (selector) của CSS, dấu thăng '#' được sử dụng để xác định định danh duy nhất (ID) của một phần tử. Kết luận Lý giải Dấu thăng (#)
Câu 3:Cú pháp nào sau đây là đúng để chèn một chú thích (comment) trong tệp CSS?
💡 Lời giải chi tiết:
CSS sử dụng cặp ký tự gạch chéo và dấu sao để bao bọc nội dung chú thích mà trình duyệt sẽ bỏ qua khi biên dịch. Kết luận Lý giải /* đây là chú thích */
Câu 4:Thuộc tính nào được sử dụng để thay đổi màu nền của một phần tử trong CSS?
💡 Lời giải chi tiết:
Thuộc tính 'background-color' xác định màu nền của một phần tử, trong khi 'color' chỉ dành cho màu văn bản. Kết luận Lý giải background-color
Câu 5:Làm thế nào để áp dụng một tệp CSS bên ngoài (external) vào trang HTML?
💡 Lời giải chi tiết:
Theo cấu trúc chuẩn, thẻ 'link' với thuộc tính rel='stylesheet' đặt trong phần 'head' là cách để kết nối tệp CSS bên ngoài. Kết luận Lý giải Sử dụng thẻ 'link' trong phần 'head'
Câu 6:Trong mô hình hộp (Box Model), thứ tự từ trong ra ngoài của các lớp bao quanh nội dung là gì?
💡 Lời giải chi tiết:
Mô hình hộp CSS quy định nội dung nằm trong cùng, tiếp theo là khoảng đệm (padding), đường viền (border) và ngoài cùng là lề (margin). Kết luận Lý giải Content, Padding, Border, Margin
Câu 7:Thuộc tính 'position' nào làm cho phần tử luôn cố định tại một vị trí trên màn hình ngay cả khi cuộn trang?
💡 Lời giải chi tiết:
Giá trị 'fixed' định vị phần tử tương đối so với cửa sổ trình duyệt (viewport), khiến nó không thay đổi vị trí khi cuộn. Kết luận Lý giải fixed
Câu 8:Để căn giữa văn bản bên trong một phần tử khối, bạn sử dụng thuộc tính nào?
💡 Lời giải chi tiết:
Thuộc tính 'text-align: center' được dùng để căn chỉnh nội dung văn bản theo chiều ngang bên trong các phần tử cấp khối. Kết luận Lý giải text-align: center
Câu 9:Làm thế nào để loại bỏ gạch chân của tất cả các liên kết (thẻ 'a') bằng CSS?
💡 Lời giải chi tiết:
Giá trị 'none' của thuộc tính 'text-decoration' sẽ loại bỏ các đường trang trí văn bản mặc định như gạch chân trên các liên kết. Kết luận Lý giải a {text-decoration: none;}
Câu 10:Đơn vị 'rem' trong CSS được tính toán dựa trên yếu tố nào?
💡 Lời giải chi tiết:
Đơn vị 'rem' (root em) được tính toán tỉ lệ dựa trên giá trị 'font-size' được thiết lập tại phần tử gốc của tài liệu. 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 11:Để viết hoa chữ cái đầu tiên của mỗi từ trong một đoạn văn, bạn sử dụng giá trị nào của 'text-transform'?
💡 Lời giải chi tiết:
Giá trị 'capitalize' của thuộc tính 'text-transform' sẽ chuyển đổi ký tự đầu tiên của mỗi từ thành chữ hoa. Kết luận Lý giải capitalize
Câu 12:Khi sử dụng Flexbox, thuộc tính nào dùng để căn chỉnh các mục dọc theo trục chính (main axis)?
💡 Lời giải chi tiết:
Trong Flexbox, 'justify-content' điều phối khoảng trống và căn chỉnh các phần tử con dọc theo trục chính của khung chứa. Kết luận Lý giải justify-content
Câu 13:Nếu một phần tử có 'width: 100px', 'padding: 10px' và 'border: 5px', đồng thời 'box-sizing' là 'content-box', tổng chiều rộng thực tế của nó là bao nhiêu?
💡 Lời giải chi tiết:
Với 'content-box', tổng chiều rộng bằng width + padding-left + padding-right + border-left + border-right (100 + 10*2 + 5*2 = 130). Kết luận Lý giải 130px
Câu 14:Thuộc tính nào giúp bạn kiểm soát việc hiển thị nội dung khi nó vượt quá kích thước của phần tử chứa?
💡 Lời giải chi tiết:
Thuộc tính 'overflow' quy định cách trình duyệt xử lý nội dung quá lớn, ví dụ như ẩn đi hoặc thêm thanh cuộn. Kết luận Lý giải overflow
Câu 15:Làm thế nào để chọn tất cả các thẻ 'p' nằm trực tiếp bên trong một thẻ 'div'?
💡 Lời giải chi tiết:
Ký tự '>' được gọi là bộ chọn con (child selector), chỉ áp dụng cho các phần tử con trực tiếp của phần tử cha. Kết luận Lý giải div > p
Câu 16:Trong CSS, giá trị 'z-index' chỉ có tác dụng khi phần tử đó có thuộc tính 'position' khác với giá trị nào?
💡 Lời giải chi tiết:
Thuộc tính 'z-index' dùng để xếp lớp các phần tử nhưng nó yêu cầu phần tử phải được định vị (khác với giá trị mặc định 'static'). Kết luận Lý giải static
Câu 17:Để tạo ra một màu sắc có độ trong suốt (opacity) bằng hệ màu RGB, bạn sử dụng cú pháp nào?
💡 Lời giải chi tiết:
Cú pháp 'rgba()' bổ sung thêm tham số thứ tư (alpha) đại diện cho mức độ trong suốt từ 0 đến 1. Kết luận Lý giải rgba()
Câu 18:Thuộc tính 'box-sizing: border-box' có ý nghĩa gì đối với kích thước phần tử?
💡 Lời giải chi tiết:
Khi sử dụng 'border-box', các giá trị padding và border không làm tăng kích thước tổng thể mà được tính vào bên trong chiều rộng/cao quy định. Kết luận Lý giải Bao gồm cả padding và border vào trong giá trị chiều rộng và chiều cao đã thiết lập
Câu 19:Trong CSS Grid, thuộc tính nào được sử dụng để xác định số lượng và kích thước của các cột?
💡 Lời giải chi tiết:
Thuộc tính 'grid-template-columns' cho phép định nghĩa cấu trúc các cột của một container dạng lưới. Kết luận Lý giải grid-template-columns
Câu 20:Bộ chọn giả (pseudo-class) nào được sử dụng để định dạng một phần tử khi người dùng di chuột qua nó?
💡 Lời giải chi tiết:
Pseudo-class ':hover' được sử dụng để áp dụng các kiểu định dạng khi con trỏ chuột của người dùng nằm trên phần tử đó. Kết luận Lý giải :hover
Câu 21:Để thay đổi khoảng cách giữa các chữ cái trong một đoạn văn, bạn sử dụng thuộc tính nào?
💡 Lời giải chi tiết:
Thuộc tính 'letter-spacing' điều chỉnh khoảng cách (tracking) giữa các ký tự trong văn bản. Kết luận Lý giải letter-spacing
Câu 22:Quy tắc '@media' trong CSS chủ yếu được sử dụng để làm gì?
💡 Lời giải chi tiết:
Truy vấn phương tiện (@media) cho phép áp dụng các kiểu CSS khác nhau tùy thuộc vào đặc điểm của thiết bị như chiều rộng màn hình. Kết luận Lý giải Xây dựng thiết kế đáp ứng (Responsive Design) dựa trên kích thước màn hình
Câu 23:Làm thế nào để một phần tử không còn chiếm không gian trên trang web và biến mất hoàn toàn?
💡 Lời giải chi tiết:
Giá trị 'display: none' sẽ xóa phần tử khỏi luồng hiển thị của trang, trong khi 'visibility: hidden' chỉ làm ẩn nhưng vẫn giữ lại khoảng không gian. Kết luận Lý giải display: none;
Câu 24:Thuộc tính 'flex-direction' có giá trị mặc định là gì?
💡 Lời giải chi tiết:
Theo mặc định của đặc tả Flexbox, các mục con sẽ được sắp xếp theo chiều ngang (hàng) trừ khi được chỉ định khác. Kết luận Lý giải row
Câu 25:Để làm cho một khung (div) có các góc được bo tròn hoàn toàn thành hình tròn, giá trị 'border-radius' tối thiểu thường dùng là bao nhiêu?
💡 Lời giải chi tiết:
Thiết lập 'border-radius: 50%' trên một phần tử hình vuông sẽ tạo ra một hình tròn hoàn hảo. Kết luận Lý giải 50%