Câu 1:Trong CSS Specificity, giữa một 'ID selector' và một 'Class selector', loại nào có độ ưu tiên cao hơn?
💡 Lời giải chi tiết:
Theo quy tắc tính độ ưu tiên của W3C, một 'ID selector' có giá trị trọng số là 100, trong khi 'Class selector' chỉ có giá trị là 10. Kết luận Lý giải ID selector
Câu 2:Khi sử dụng thuộc tính 'box-sizing: border-box', chiều rộng thực tế của một phần tử được tính như thế nào?
💡 Lời giải chi tiết:
Thuộc tính 'border-box' buộc trình duyệt tính toán 'width' bao gồm cả 'padding' và 'border' bên trong kích thước đã chỉ định. Kết luận Lý giải Bao gồm nội dung, phần đệm (padding) và đường viền (border)
Câu 3:Trong Flexbox, thuộc tính nào được sử 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:
Thuộc tính 'justify-content' được sử dụng để phân bổ không gian giữa các mục dọc theo trục chính của container flex. Kết luận Lý giải justify-content
Câu 4:Thuộc tính 'position: absolute' sẽ định vị phần tử dựa trên thành phần nào?
💡 Lời giải chi tiết:
Phần tử 'absolute' tìm kiếm tổ tiên gần nhất có thuộc tính 'position' là 'relative', 'absolute', 'fixed' hoặc 'sticky' để làm gốc tọa độ. Kết luận Lý giải Phần tử cha gần nhất có thuộc tính 'position' khác 'static'
Câu 5:Để tạo một lưới có 3 cột có chiều rộng bằng nhau bằng CSS Grid, cú pháp nào sau đây là chính xác?
💡 Lời giải chi tiết:
Hàm 'repeat(3, 1fr)' là cách tối ưu để tạo ra 3 cột có kích thước bằng một đơn vị phân số linh hoạt (1fr) của không gian khả dụng. Kết luận Lý giải grid-template-columns: repeat(3, 1fr);
Câu 6:Sự khác biệt chính giữa 'visibility: hidden' và 'display: none' là gì?
💡 Lời giải chi tiết:
Trong khi 'display: none' loại bỏ phần tử khỏi luồng tài liệu, 'visibility: hidden' chỉ làm phần tử vô hình nhưng vẫn chiếm diện tích như cũ. Kết luận Lý giải 'visibility: hidden' ẩn phần tử nhưng vẫn giữ lại khoảng không gian của nó trong bố cục
Câu 7:Đơn vị 'rem' trong CSS dựa trên giá trị của thành phần nào?
💡 Lời giải chi tiết:
Đơn vị 'rem' (root em) được tính toán dựa trên 'font-size' của phần tử gốc tài liệu, thường là thẻ 'html'. 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 8:Trong thuộc tính 'margin: 10px 20px 30px 40px;', giá trị '40px' đại diện cho phía nào?
💡 Lời giải chi tiết:
Thứ tự các giá trị trong thuộc tính viết tắt (shorthand) của margin theo chiều kim đồng hồ bắt đầu từ trên: Top, Right, Bottom, Left. Kết luận Lý giải Bên trái (Left)
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' là gì?
💡 Lời giải chi tiết:
Theo quy tắc ngữ cảnh xếp chồng, 'z-index' yêu cầu phần tử phải được định vị (relative, absolute, fixed, hoặc sticky) để xác định thứ tự hiển thị. Kết luận Lý giải Bất kỳ giá trị nào khác 'static'
Câu 10:Để áp dụng một kiểu CSS khi người dùng di chuột qua một liên kết, bạn sử dụng 'pseudo-class' nào?
💡 Lời giải chi tiết:
'Pseudo-class' :hover được sử dụng để chọn phần tử khi người dùng tương tác bằng cách trỏ chuột vào phần tử đó. Kết luận Lý giải :hover
Câu 11:Trong CSS Grid, thuộc tính nào được dùng để thiết lập khoảng cách giữa các hàng và các cột?
💡 Lời giải chi tiết:
Thuộc tính 'gap' (trước đây là grid-gap) cung cấp cách ngắn gọn để thiết lập khoảng trống giữa các hàng và cột trong cả Grid và Flexbox. Kết luận Lý giải gap (hoặc grid-gap)
Câu 12:Lệnh 'background-size: cover;' có tác dụng gì đối với hình nền?
💡 Lời giải chi tiết:
Giá trị 'cover' đảm bảo hình nền phủ kín diện tích phần tử, có thể bị cắt bớt một phần nhưng vẫn giữ được tỷ lệ khung hình. Kết luận Lý giải Phóng to hoặc thu nhỏ hình nền để che phủ hoàn toàn container trong khi vẫn giữ nguyên tỷ lệ
Câu 13:Làm thế nào để khai báo một biến trong CSS (CSS Custom Properties)?
💡 Lời giải chi tiết:
Biến CSS được khai báo bằng cách sử dụng hai dấu gạch nối phía trước tên biến bên trong một bộ chọn, thường là ':root'. Kết luận Lý giải --primary-color: #000;
Câu 14:Trong Flexbox, nếu muốn một phần tử chiếm hết không gian trống còn lại trong container, bạn sử dụng thuộc tính nào?
💡 Lời giải chi tiết:
Thuộc tính 'flex-grow' xác định khả năng của một mục flex sẽ phát triển để lấp đầy không gian trống khả dụng trong container. Kết luận Lý giải flex-grow: 1;
Câu 15:Pseudo-element nào được sử dụng để chèn nội dung vào trước nội dung của một phần tử?
💡 Lời giải chi tiết:
Pseudo-element '::before' tạo ra một phần tử giả là con đầu tiên của phần tử được chọn, thường đi kèm với thuộc tính 'content'. Kết luận Lý giải ::before
Câu 16:Thuộc tính CSS nào cho phép bạn thay đổi độ đậm nhạt của chữ?
💡 Lời giải chi tiết:
'font-weight' chấp nhận các giá trị từ khóa như 'bold' hoặc các giá trị số từ 100 đến 900 để điều chỉnh độ dày của nét chữ. Kết luận Lý giải font-weight
Câu 17:Để làm cho một danh sách (thẻ ul hoặc ol) không hiển thị các dấu đầu dòng (bullet points), bạn dùng lệnh nào?
💡 Lời giải chi tiết:
Thuộc tính 'list-style' (hoặc 'list-style-type') với giá trị 'none' sẽ loại bỏ hoàn toàn các ký hiệu mặc định ở đầu mỗi mục danh sách. Kết luận Lý giải list-style: none;
Câu 18:Giá trị nào của 'position' làm cho phần tử 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:
'position: fixed' định vị phần tử tương đối so với khung hình trình duyệt (viewport), khiến nó không thay đổi vị trí khi cuộn trang. Kết luận Lý giải fixed
Câu 19:Khi viết 'color: rgba(255, 0, 0, 0.5);', tham số cuối cùng (0.5) đại diện cho điều gì?
💡 Lời giải chi tiết:
Trong hàm màu rgba, giá trị 'a' đại diện cho alpha channel, xác định mức độ trong suốt từ 0 (hoàn toàn trong suốt) đến 1 (đặc hoàn toàn). Kết luận Lý giải Độ trong suốt (Alpha channel)
Câu 20:Thuộc tính 'calc()' trong CSS được dùng để làm gì?
💡 Lời giải chi tiết:
Hàm 'calc()' cho phép thực hiện các phép tính (cộng, trừ, nhân, chia) giữa các đơn vị khác nhau để tạo ra các giá trị động cho thuộc tính. Kết luận Lý giải Thực hiện các phép tính toán học để xác định giá trị thuộc tính
Câu 21:Để tạo hiệu ứng đổ bóng cho văn bản, bạn sử dụng thuộc tính nào?
💡 Lời giải chi tiết:
'text-shadow' là thuộc tính chuyên biệt dùng để thêm bóng cho các ký tự văn bản thay vì toàn bộ khối hộp. Kết luận Lý giải text-shadow
Câu 22:Trong CSS, bộ chọn 'div p' sẽ chọn những phần tử nào?
💡 Lời giải chi tiết:
Đây là bộ chọn hậu duệ (descendant selector), nó chọn tất cả các phần tử phía sau nằm lồng trong phần tử phía trước. Kết luận Lý giải Tất cả các thẻ 'p' nằm bên trong thẻ 'div', bất kể cấp độ lồng nhau
Câu 23:Giá trị mặc định của thuộc tính 'display' cho thẻ 'span' là gì?
💡 Lời giải chi tiết:
Thẻ 'span' là một phần tử cấp dòng (inline element) theo mặc định, nghĩa là nó chỉ chiếm chiều rộng cần thiết và không bắt đầu hàng mới. Kết luận Lý giải inline
Câu 24:Thuộc tính nào giúp kiểm soát việc ngắt từ khi văn bản quá dài và vượt quá chiều rộng của container?
💡 Lời giải chi tiết:
'overflow-wrap: break-word' cho phép trình duyệt ngắt các từ dài không thể bẻ đôi để tránh tràn ra ngoài khung chứa. Kết luận Lý giải overflow-wrap (hoặc word-wrap)
Câu 25:Để căn giữa một khối (block element) có chiều rộng cố định bên trong thẻ cha, phương pháp phổ biến nhất là gì?
💡 Lời giải chi tiết:
Đặt 'margin-left' và 'margin-right' là 'auto' giúp phân bổ đều không gian trống hai bên, làm cho phần tử khối nằm giữa thẻ cha. Kết luận Lý giải margin: 0 auto;