50 câu hỏi phỏng vấn CSS hàng đầu và câu trả lời (2025)

Dưới đây là những câu hỏi phỏng vấn CSS (CSS3) và câu trả lời dành cho người mới vào nghề cũng như ứng viên có kinh nghiệm để có được công việc mơ ước của mình.

Tải xuống PDF miễn phí: Câu hỏi phỏng vấn CSS

1. CSS là gì?

Hình thức đầy đủ của CSS là Cascading Style Sheets. Đây là một ngôn ngữ tạo kiểu đủ đơn giản để HTML các thành phần. Nó phổ biến trong thiết kế web và ứng dụng của nó cũng phổ biến trong XHTML.

---

2. Nguồn gốc của CSS là gì?

Ngôn ngữ đánh dấu tổng quát chuẩn đánh dấu sự khởi đầu của bảng định kiểu vào những năm 1980.

---

3. Có những biến thể nào của CSS?

Các biến thể của CSS là:

• CSS1 (mã vạch XNUMX)
• CSS 2
• CSS 2.1
• CSS 3
• CSS 4

---

4. Những hạn chế của CSS là gì?

Những hạn chế là:

•  Không thể tăng dần bằng bộ chọn
• Những hạn chế của kiểm soát theo chiều dọc
• Không có biểu hiện
• Không có khai báo cột
• Lớp giả không được kiểm soát bởi hành vi động
• Không thể áp dụng quy tắc, kiểu, nhắm mục tiêu vào văn bản cụ thể

---

5. Ưu điểm của CSS là gì?

Ưu điểm là:

• Băng thông
• Tính nhất quán trên toàn trang web
• Định dạng lại trang
• Khả Năng Tiếp Cận
• Nội dung tách biệt với bản trình bày

---

6. Khung CSS là gì?

Đây là thư viện được lập trình sẵn, cho phép tạo kiểu trang web dễ dàng hơn và tuân thủ chuẩn hơn bằng cách sử dụng ngôn ngữ CSS.

---

7. Làm thế nào để căn giữa các phần tử khối bằng CSS1?

Các phần tử cấp khối có thể được căn giữa bằng cách:

Thuộc tính margin-left và margin-right có thể được thiết lập thành một giá trị rõ ràng:

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

Trong trường hợp này, lề trái và lề phải sẽ rộng năm ems vì chúng chia tách mười ems còn lại từ (40em-30em). Không cần thiết phải thiết lập chiều rộng rõ ràng cho phần tử BODY; việc này được thực hiện ở đây vì tính đơn giản.

---

8. Ai là người duy trì các thông số kỹ thuật CSS?

World Wide Web Consortium duy trì các thông số kỹ thuật CSS.

---

9. Có bao nhiêu cách để tích hợp CSS vào trang web?

CSS có thể được tích hợp theo ba cách:

• Nội tuyến: Thuộc tính Style có thể được sử dụng để áp dụng CSS cho các phần tử HTML.
• Nhúng: Phần tử Head có thể có phần tử Style trong đó có thể đặt mã.
• Liên kết/Nhập: CSS có thể được đặt trong một tệp bên ngoài và được liên kết thông qua phần tử liên kết.

---

10. External Style Sheets có những lợi ích và nhược điểm gì?

Lợi ích:

• Một tệp có thể được sử dụng để kiểm soát nhiều tài liệu có kiểu dáng khác nhau.
• Nhiều phần tử HTML có thể có nhiều tài liệu, mỗi tài liệu có thể có các lớp.
• Để nhóm các kiểu trong các tình huống tổng hợp, các phương thức như bộ chọn và nhóm được sử dụng.

Demerits:

• Cần tải xuống thêm để nhập tài liệu có thông tin về kiểu.
• Để hiển thị tài liệu, cần phải tải bảng định kiểu bên ngoài.
• Không thực tế đối với các định nghĩa kiểu nhỏ.

---

11. Thảo luận về ưu và nhược điểm của Embedded Style Sheets?

Ưu điểm của Style Sheet nhúng:

• Có thể tạo nhiều loại thẻ trong một tài liệu.
• Trong những tình huống phức tạp, các kiểu có thể được áp dụng bằng cách sử dụng phương pháp Chọn và Nhóm.
• Không cần tải thêm.

Nhược điểm của Style Sheet nhúng:

• Không thể kiểm soát nhiều tài liệu.

---

12. Bộ chọn CSS có nghĩa là gì?

Một chuỗi tương đương với các phần tử HTML trong đó các khai báo hoặc một tập hợp các khai báo được khai báo và là một liên kết có thể được tham chiếu để liên kết HTML và Bảng kiểu là bộ chọn CSS.

---

13. Liệt kê các loại phương tiện mà CSS cho phép?

Thiết kế và tùy chỉnh tài liệu được hiển thị bằng phương tiện. Bằng cách áp dụng kiểm soát phương tiện trên các bảng kiểu bên ngoài, chúng có thể được truy xuất và sử dụng bằng cách tải từ mạng.

---

14. Phân biệt thẻ logic với thẻ vật lý?

• Trong khi thẻ vật lý cũng được gọi là đánh dấu trình bày thì thẻ logic lại vô dụng đối với mục đích hiển thị.
• Thẻ vật lý là phiên bản mới hơn trong khi thẻ logic là phiên bản cũ và tập trung vào nội dung.

---

15. Phân biệt khái niệm Style Sheet với HTML?

Trong khi HTML cung cấp phương pháp cấu trúc dễ dàng, nó thiếu kiểu dáng, không giống như Style Sheets. Hơn nữa, Style Sheets có khả năng duyệt web và tùy chọn định dạng tốt hơn.

---

16. Hãy mô tả 'bộ quy tắc'?

Bộ quy tắc: Bộ chọn có thể được đính kèm vào các bộ chọn khác để được bộ quy tắc xác định.

Nó có hai phần:

• Bộ chọn, ví dụ R và
• tuyên bố {text-indent: 11pt}

---

17. Bình luận về phân biệt chữ hoa chữ thường của CSS?

Mặc dù CSS không phân biệt chữ hoa chữ thường, tuy nhiên họ phông chữ, URL của hình ảnh, v.v. thì có. Chỉ khi XML Khi khai báo cùng với XHTML DOCTYPE được sử dụng trên trang, CSS phân biệt chữ hoa chữ thường.

---

18. Định nghĩa khối khai báo?

Một danh mục các hướng dẫn trong dấu ngoặc nhọn bao gồm thuộc tính, dấu hai chấm và giá trị được gọi là khối khai báo.
ví dụ: [thuộc tính 1: giá trị 3]

---

19. Liệt kê các thuộc tính của nhiều phông chữ khác nhau?

Đó là:

• kiểu chữ
• Biến thể phông chữ
• Độ đậm phông chữ
• Cỡ chữ/chiều cao dòng
• họ phông chữ
• Chú thích
• Biểu tượng

 

---

20. Tại sao việc chèn tệp lại dễ dàng bằng cách nhập tệp?

Nhập cho phép kết hợp các trang tính bên ngoài để chèn vào nhiều trang tính. Có thể sử dụng các tệp và trang tính khác nhau để có các chức năng khác nhau. Cú pháp:

Ký hiệu @import, được sử dụng với tag.

---

21. Công dụng của bộ chọn Class là gì?

Các bộ chọn duy nhất cho một kiểu cụ thể được gọi là bộ chọn CLASS. Khai báo kiểu và liên kết với HTML có thể được thực hiện thông qua bộ chọn này. Cú pháp:

Tên lớp
có thể là AZ, az hoặc chữ số.
.top {font: 14em ;}, bộ chọn lớp
lớp này được liên kết với phần tử

---

22. Phân biệt bộ chọn lớp với bộ chọn ID?

Trong khi một khối tổng thể được cung cấp cho bộ chọn lớp, bộ chọn ID chỉ ưu tiên một phần tử duy nhất khác với các phần tử khác. Nói cách khác, ID là duy nhất trong khi các lớp thì không. Có thể một phần tử có cả lớp và ID.

---

23. Có thể thêm nhiều hơn một khai báo trong CSS không?

Có, bạn có thể thực hiện điều này bằng cách sử dụng dấu chấm phẩy.

---

24. Phần tử giả là gì?

Pseudo-elements được sử dụng để thêm hiệu ứng đặc biệt vào một số selector. CSS được sử dụng để áp dụng các kiểu trong đánh dấu HTML. Trong một số trường hợp khi không thể đánh dấu hoặc tạo kiểu bổ sung cho tài liệu, thì có một tính năng có sẵn trong CSS được gọi là pseudo-elements. Nó sẽ cho phép đánh dấu bổ sung vào tài liệu mà không làm ảnh hưởng đến tài liệu thực tế.

---

25. Làm thế nào để ghi đè siêu liên kết gạch chân?

Các câu lệnh điều khiển và bảng định kiểu bên ngoài được sử dụng để ghi đè các siêu liên kết gạch chân.

Ví dụ:

B {

text-decoration: none;

}

<B href="career.html" style="text-decoration: none">link text</B>

 

---

26. Điều gì xảy ra nếu sử dụng chiều rộng 100% cùng với các ký tự nổi trên toàn bộ trang?

Khi khai báo float, 1 pixel sẽ được thêm vào mỗi lần sử dụng dưới dạng đường viền và thậm chí còn được phép sử dụng nhiều float hơn sau đó.

---

27. Giá trị thuộc tính mặc định có thể được khôi phục thông qua CSS không? Nếu có, thì bằng cách nào?

Trong CSS, bạn không thể quay lại giá trị cũ do thiếu giá trị mặc định. Thuộc tính có thể được khai báo lại để lấy thuộc tính mặc định.

---

28. Liệt kê các loại phương tiện truyền thông khác nhau được sử dụng?

Mỗi phương tiện truyền thông có đặc tính khác nhau vì chúng không phân biệt chữ hoa chữ thường.

Đó là:

• Aural – dành cho máy tổng hợp âm thanh và giọng nói
• In – cung cấp bản xem trước nội dung khi in
• Chiếu - chiếu CSS lên máy chiếu.
• Cầm tay - sử dụng các thiết bị cầm tay.
• Màn hình - màn hình máy tính và máy tính xách tay.

---

29. CSS Box Model là gì và các thành phần của nó là gì?

Hộp này định nghĩa thiết kế và bố cục của các thành phần CSS. Các thành phần là:

Lợi nhuận: lớp trên cùng, cấu trúc tổng thể được hiển thị
Biên giới: tùy chọn đệm và nội dung có đường viền xung quanh được hiển thị. Màu nền ảnh hưởng đến đường viền.
Đệm: Không gian được hiển thị. Màu nền ảnh hưởng đến đường viền.
Nội dung: Nội dung thực tế được hiển thị.

---

30. Bộ chọn ngữ cảnh là gì?

Bộ chọn được sử dụng để chọn các lần xuất hiện đặc biệt của một phần tử được gọi là bộ chọn theo ngữ cảnh. Một khoảng trắng ngăn cách các bộ chọn riêng lẻ. Chỉ có phần tử cuối cùng của mẫu được xử lý trong bộ chọn loại này. Ví dụ: TD P TEXT {color: blue}

---

31. So sánh giá trị RGB với mã màu Hexadecimal ?

Màu sắc có thể được chỉ định theo hai cách:

• Một màu được biểu diễn bằng 6 ký tự tức là mã màu thập lục phân. Nó là sự kết hợp của các số và chữ cái và được đặt trước bằng #. Ví dụ: g {color: #00cjfi}
• Một màu được biểu diễn bằng hỗn hợp đỏ, xanh lá cây và xanh lam. Giá trị của một màu cũng có thể được chỉ định. Ví dụ: rgb(r,g,b): Trong kiểu này, các giá trị có thể nằm giữa các số nguyên từ 0 đến 255. rgb(r%,g%,b%): phần trăm đỏ, xanh lá cây và xanh lam được hiển thị.

---

32. Định nghĩa các hình ảnh sprite có ngữ cảnh trong CSS?

Khi một tập hợp các hình ảnh được hợp tác thành một hình ảnh, nó được gọi là 'Image Sprites'. Vì việc tải mọi hình ảnh trên trang web tốn thời gian, việc sử dụng image sprites sẽ rút ngắn thời gian thực hiện và cung cấp thông tin nhanh chóng.

Mã hóa CSS:

img.add { width: 60px; height: 55px; background: url (image.god) 0 0; }

 

Trong trường hợp này, chỉ sử dụng phần cần thiết. Người dùng có thể tiết kiệm đáng kể biên độ và thời gian thông qua việc này.

---

33. So sánh Grouping và Nesting trong CSS ?

Nhóm: Các bộ chọn có cùng giá trị thuộc tính có thể được nhóm lại và mã sẽ được rút gọn.
Ví dụ :

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

 

Có thể thấy từ mã rằng mọi phần tử đều có cùng một thuộc tính. Có thể tránh việc viết lại bằng cách viết từng bộ chọn được phân tách bằng dấu phẩy.

Lồng nhau: Việc chỉ định một bộ chọn bên trong một bộ chọn khác được gọi là lồng nhau.

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}

 

---

34. Làm thế nào để xác định kích thước của một phần tử?

Thuộc tính kích thước có thể được xác định bởi:

• Chiều cao
• Chiều cao tối đa
• Chiều rộng tối đa
• Chiều cao tối thiểu
• Chiều rộng tối thiểu
• Chiều rộng

---

35. Định nghĩa thuộc tính float của CSS?

Theo thuộc tính float, hình ảnh có thể được di chuyển sang phải hoặc trái cùng với văn bản được bao quanh nó. Các phần tử trước khi thuộc tính này được áp dụng sẽ không thay đổi thuộc tính của chúng.

---

36. Chỉ số Z hoạt động như thế nào?

Có thể xảy ra tình trạng chồng chéo khi sử dụng CSS để định vị các phần tử HTML. Chỉ mục Z giúp chỉ định phần tử chồng chéo. Đây là một số có thể dương hoặc âm, giá trị mặc định là số không.

---

37. Sự thoái hóa duyên dáng là gì?

Trong trường hợp thành phần bị lỗi, nó sẽ tiếp tục hoạt động bình thường khi có sự suy giảm nhẹ. Ứng dụng trình duyệt mới nhất được sử dụng khi thiết kế trang web. Vì không phải ai cũng có thể sử dụng nên có một chức năng cơ bản cho phép nhiều đối tượng sử dụng hơn. Trong trường hợp không thể xem hình ảnh, văn bản sẽ được hiển thị bằng thẻ alt.

---

38. Tăng cường dần dần là gì?

Đây là giải pháp thay thế cho sự suy thoái duyên dáng, tập trung vào vấn đề của web. Chức năng thì giống nhau, nhưng nó cung cấp thêm lợi thế cho người dùng có băng thông mới nhất. Gần đây, nó đã được sử dụng phổ biến với các kết nối internet di động mở rộng cơ sở của họ.

---

39. Làm thế nào để thiết kế khả năng tương thích ngược trong CSS?

Phương pháp trang tính HTML được kết hợp với CSS và được sử dụng phù hợp.

---

40. Làm thế nào để xóa khoảng trống bên dưới hình ảnh?

Vì hình ảnh là thành phần nội tuyến nên được xử lý giống như văn bản, do đó vẫn còn một khoảng trống, có thể xóa bằng cách:

CSS

img { display: block ; }

 

---

41. Tại sao @import chỉ ở trên cùng?

@import chỉ được ưu tiên ở đầu, để tránh bất kỳ quy tắc ghi đè nào. Nhìn chung, thứ tự xếp hạng được tuân theo trong hầu hết các ngôn ngữ lập trình như Java, Modula, v.v. Trong C, # là ví dụ nổi bật về @import ở đầu.

---

42. Trong các điều sau đây, điều nào có tiền lệ hơn: thuộc tính CSS hay thủ tục HTML?

CSS có ưu thế hơn so với các thủ tục HTML. Các trình duyệt không hỗ trợ CSS sẽ hiển thị các thuộc tính HTML.

---

43. Inline style là gì?

Kiểu nội tuyến trong CSS được sử dụng để thêm kiểu dáng cho từng phần tử HTML.

---

44. Làm thế nào để thêm bình luận vào CSS?

Các chú thích trong CSS có thể được thêm vào bằng /* và */.

---

45. Định nghĩa Bộ chọn thuộc tính?

Nó được xác định bởi một tập hợp các phần tử, giá trị và các bộ phận của nó.

---

46. ​​Định nghĩa tài sản?

Một kiểu giúp tác động đến CSS. Ví dụ FONT. Chúng có các giá trị hoặc thuộc tính tương ứng bên trong, như FONT có nhiều kiểu khác nhau như in đậm, in nghiêng, v.v.

---

47. Alternate Style Sheet là gì?

Alternate Style Sheets cho phép người dùng chọn kiểu hiển thị trang bằng menu view>page style. Thông qua Alternate Style Sheet, người dùng có thể xem nhiều phiên bản của trang theo nhu cầu và sở thích của họ.

---

48. Có bắt buộc phải sử dụng dấu ngoặc kép trong URL không?

Dấu ngoặc kép là tùy chọn trong URL và có thể là dấu ngoặc đơn hoặc dấu ngoặc kép.

---

49. Quy tắc chung là gì?

Quy tắc áp dụng cho toàn bộ trang tính chứ không phải một phần, được gọi là quy tắc at. Quy tắc này được đặt trước bởi @ theo sau là AZ, az hoặc 0-9.

---

50. Làm thế nào để CSS có thể được kết hợp với bảng thông tin cá nhân của người dùng?

Thuộc tính có thể được thiết lập ở những nơi được đề xuất và tài liệu được sửa đổi cho CSS để kết hợp với trang tính cá nhân của người dùng.

Những câu hỏi phỏng vấn này cũng sẽ giúp ích cho bài viva (orals) của bạn. Trong mọi ngành, việc sử dụng các trang web và ứng dụng web ngày càng tăng lên từng ngày và CSS là một phần thiết yếu để xây dựng các trang web hấp dẫn. Vì vậy, có nhu cầu rất lớn đối với các nhà thiết kế UI/UX và Web có kiến ​​thức tốt về CSS với HTML.