คำถามและคำตอบสัมภาษณ์ CSS 50 อันดับแรก (2024)

ต่อไปนี้เป็นคำถามและคำตอบในการสัมภาษณ์ CSS (CSS3) สำหรับนักศึกษาใหม่และผู้สมัครงานที่มีประสบการณ์เพื่อให้ได้งานในฝัน

ดาวน์โหลดไฟล์ PDF ฟรี: คำถามสัมภาษณ์ CSS

1. ซีเอสเอส คืออะไร?

CSS รูปแบบเต็มคือ Cascading Style Sheets เป็นภาษาสไตล์ที่ง่ายพอสำหรับ HTML องค์ประกอบ เป็นที่นิยมในการออกแบบเว็บไซต์ และแอปพลิเคชันก็พบเห็นได้ทั่วไปใน XHTML เช่นกัน

---

2. CSS มีต้นกำเนิดมาจากอะไร?

ภาษามาร์กอัปมาตรฐานทั่วไปถือเป็นจุดเริ่มต้นของสไตล์ชีตในทศวรรษ 1980

---

3. CSS รูปแบบต่างๆ มีอะไรบ้าง?

รูปแบบต่างๆ สำหรับ CSS คือ:

• ซีเอสเอส 1
• CSS ฮิต
• CSS ฮิต
• CSS ฮิต
• CSS ฮิต

---

4. CSS มีข้อจำกัดอะไรบ้าง?

ข้อจำกัดคือ:

•  การขึ้นลงด้วยตัวเลือกเป็นไปไม่ได้
• ข้อจำกัดของการควบคุมแนวตั้ง
• ไม่มีการแสดงออก
• ไม่มีการประกาศคอลัมน์
• คลาสหลอกไม่ได้ถูกควบคุมโดยพฤติกรรมไดนามิก
• กฎ รูปแบบ การกำหนดเป้าหมายข้อความเฉพาะไม่สามารถทำได้

---

5. CSS มีข้อดีอย่างไร?

ข้อดีคือ:

• แบนด์วิดธ์
• ความสม่ำเสมอทั่วทั้งไซต์
• การจัดรูปแบบหน้าใหม่
• การเข้าถึง
• เนื้อหาแยกจากการนำเสนอ

---

6. กรอบงาน CSS คืออะไร?

เป็นไลบรารีที่วางแผนไว้ล่วงหน้าซึ่งช่วยให้จัดรูปแบบหน้าเว็บได้ง่ายขึ้นและเป็นไปตามมาตรฐานมากขึ้น โดยใช้ภาษา CSS

---

7. องค์ประกอบบล็อกสามารถจัดกึ่งกลางด้วย CSS1 ได้อย่างไร?

องค์ประกอบระดับบล็อกสามารถอยู่ตรงกลางโดย:

คุณสมบัติระยะขอบซ้ายและระยะขอบขวาสามารถตั้งค่าเป็นค่าที่ชัดเจน:

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

ในกรณีนี้ ขอบด้านซ้ายและขวาจะต่างกัน กว้าง 40 ems เนื่องจากแยก 30 ems ที่เหลือจาก (XNUMXem-XNUMXem) ไม่จำเป็นสำหรับการตั้งค่าความกว้างที่ชัดเจนสำหรับองค์ประกอบ BODY มันทำที่นี่เพื่อความเรียบง่าย

---

8. ใครเป็นผู้ดูแลรักษาข้อกำหนด CSS?

World Wide Web Consortium รักษาข้อกำหนด CSS

---

9. CSS สามารถรวมเป็นหน้าเว็บได้กี่วิธี?

CSS สามารถบูรณาการได้สามวิธี:

• อินไลน์: แอตทริบิวต์ Style สามารถใช้เพื่อให้ CSS ใช้องค์ประกอบ HTML
• ฝังตัว: องค์ประกอบ Head สามารถมีองค์ประกอบ Style ซึ่งสามารถวางโค้ดได้
• เชื่อมโยง/นำเข้า: สามารถวาง CSS ในไฟล์ภายนอกและเชื่อมโยงผ่านองค์ประกอบลิงก์

---

10. External Style Sheets มีข้อดีและข้อเสียอะไรบ้าง?

ประโยชน์ที่ได้รับ:

• ไฟล์เดียวสามารถใช้เพื่อควบคุมเอกสารหลายฉบับที่มีสไตล์แตกต่างกัน
• องค์ประกอบ HTML หลายรายการสามารถมีเอกสารจำนวนมากซึ่งสามารถมีคลาสได้
• ในการจัดกลุ่มสไตล์ในสถานการณ์แบบผสม จะใช้วิธีการเป็นตัวเลือกและการจัดกลุ่ม

demerits:

• จำเป็นต้องดาวน์โหลดเพิ่มเติมเพื่อนำเข้าเอกสารที่มีข้อมูลรูปแบบ
• หากต้องการแสดงเอกสาร ควรโหลดสไตล์ชีตภายนอก
• ไม่เหมาะกับคำจำกัดความสไตล์เล็กๆ

---

11. หารือเกี่ยวกับข้อดีและข้อเสียของสไตล์ชีทแบบฝังหรือไม่

ข้อดีของสไตล์ชีตแบบฝัง:

• สามารถสร้างแท็กได้หลายประเภทในเอกสารเดียว
• ในสถานการณ์ที่ซับซ้อน สามารถใช้สไตล์ได้โดยใช้วิธี Selector และ Grouping
• ไม่จำเป็นต้องดาวน์โหลดเพิ่มเติม

ข้อเสียของสไตล์ชีทแบบฝัง:

• ไม่สามารถควบคุมเอกสารหลายฉบับได้

---

12. ตัวเลือก CSS หมายถึงอะไร?

สตริงที่เทียบเท่ากับองค์ประกอบ HTML ซึ่งมีการประกาศหรือชุดของการประกาศและเป็นลิงก์ที่สามารถอ้างอิงสำหรับการเชื่อมโยง HTML และสไตล์ชีตคือตัวเลือก CSS

---

13. สมัครประเภทสื่อที่ CSS อนุญาต?

การออกแบบและการปรับแต่งเอกสารถูกเรนเดอร์โดยสื่อ ด้วยการใช้การควบคุมสื่อกับสไตล์ชีตภายนอก จึงสามารถดึงข้อมูลและใช้งานได้โดยการโหลดจากเครือข่าย

---

14. แยกแท็กลอจิคัลออกจากแท็กฟิสิคัลหรือไม่

• แม้ว่าแท็กทางกายภาพจะเรียกว่ามาร์กอัปการนำเสนอ แต่แท็กแบบลอจิคัลไม่มีประโยชน์สำหรับรูปลักษณ์ภายนอก
• แท็กแบบฟิสิคัลเป็นเวอร์ชันที่ใหม่กว่า ในขณะที่แท็กแบบลอจิคัลจะเก่าและเน้นไปที่เนื้อหา

---

15. แยกแยะแนวคิดสไตล์ชีตจาก HTML หรือไม่

แม้ว่า HTML จะให้วิธีการจัดโครงสร้างที่ง่าย แต่ก็ขาดสไตล์ ซึ่งต่างจากสไตล์ชีต นอกจากนี้ สไตล์ชีตยังมีความสามารถของเบราว์เซอร์และตัวเลือกการจัดรูปแบบที่ดีกว่าอีกด้วย

---

16. อธิบาย 'ชุดกฎ'?

ชุดกฎ: สามารถแนบตัวเลือกเข้ากับตัวเลือกอื่น ๆ เพื่อระบุโดยชุดกฎ

มีสองส่วน:

• ตัวเลือกเช่น R และ
• ประกาศ {เยื้องข้อความ: 11pt}

---

17. ความคิดเห็นเกี่ยวกับ Case-sensitivity ของ CSS ?

แม้ว่า CSS จะไม่คำนึงถึงขนาดตัวพิมพ์ แต่อย่างไรก็ตาม ตระกูลแบบอักษร, URL ของรูปภาพ ฯลฯ ก็เป็นเช่นนั้น เมื่อเท่านั้น XML มีการใช้การประกาศพร้อมกับ XHTML DOCTYPE บนเพจ CSS คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

---

18. กำหนดบล็อกการประกาศ?

แค็ตตาล็อกของทิศทางภายในวงเล็บปีกกาที่ประกอบด้วยคุณสมบัติ ทวิภาค และค่า เรียกว่าบล็อกการประกาศ
เช่น [คุณสมบัติ 1: ค่า 3]

---

19. เกณฑ์คุณสมบัติแบบอักษรต่างๆ?

พวกเขาจะ:

• รูปแบบตัวอักษร
• แบบอักษร-รูปแบบ
• น้ำหนักตัวอักษร
• ขนาดตัวอักษร/ความสูงของบรรทัด
• ตระกูลอักษร
• คำบรรยายภาพ
• ไอคอน

 

---

20. เหตุใดการนำเข้าไฟล์จึงเป็นเรื่องง่าย?

การนำเข้าทำให้สามารถรวมแผ่นงานภายนอกเพื่อแทรกลงในแผ่นงานจำนวนมากได้ สามารถใช้ไฟล์และชีตที่แตกต่างกันเพื่อให้มีฟังก์ชันที่แตกต่างกันได้ ไวยากรณ์:

@import สัญกรณ์ใช้กับ tag.

---

21. Class selector มีประโยชน์อย่างไร?

ตัวเลือกที่ไม่ซ้ำกับสไตล์เฉพาะเรียกว่าตัวเลือก CLASS การประกาศรูปแบบและการเชื่อมโยงกับ HTML สามารถทำได้ผ่านสิ่งนี้ ไวยากรณ์:

ชื่อชั้นเรียน
อาจเป็น AZ, az หรือตัวเลขก็ได้
.top {font: 14em ;} ตัวเลือกคลาส
คลาสนี้เชื่อมโยงกับองค์ประกอบ

---

22. แยกความแตกต่างระหว่างตัวเลือกคลาสจากตัวเลือก ID หรือไม่

ในขณะที่บล็อกโดยรวมถูกกำหนดให้กับตัวเลือกคลาส แต่ตัวเลือก ID ต้องการเพียงองค์ประกอบเดียวที่แตกต่างจากองค์ประกอบอื่น กล่าวอีกนัยหนึ่ง ID จะไม่ซ้ำกันในขณะที่คลาสไม่ซ้ำกัน เป็นไปได้ว่าองค์ประกอบมีทั้งคลาสและ ID

---

23. สามารถเพิ่มการประกาศมากกว่าหนึ่งรายการใน CSS ได้หรือไม่?

ใช่ สามารถทำได้โดยใช้เครื่องหมายอัฒภาค

---

24. องค์ประกอบหลอกคืออะไร?

องค์ประกอบหลอกใช้เพื่อเพิ่มเอฟเฟกต์พิเศษให้กับตัวเลือกบางตัว CSS ที่ใช้ในการปรับใช้สไตล์ในมาร์กอัป HTML ในบางกรณีเมื่อไม่สามารถมาร์กอัปหรือจัดรูปแบบเพิ่มเติมสำหรับเอกสารได้ แสดงว่ามีคุณสมบัติที่มีอยู่ใน CSS ที่เรียกว่าองค์ประกอบหลอก จะช่วยให้มาร์กอัปเพิ่มเติมในเอกสารได้โดยไม่รบกวนเอกสารจริง

---

25. จะลบล้างไฮเปอร์ลิงก์ที่ขีดเส้นใต้ได้อย่างไร?

คำสั่งควบคุมและสไตล์ชีทภายนอกใช้เพื่อลบล้างไฮเปอร์ลิงก์ที่ขีดเส้นใต้

เช่น:

B {

text-decoration: none;

}

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

 

---

26. จะเกิดอะไรขึ้นหากใช้ความกว้าง 100% พร้อมกับลอยทั่วทั้งหน้า?

ในขณะที่ทำการประกาศโฟลต จะมีการเพิ่ม 1 พิกเซลทุกครั้งที่ใช้ในรูปแบบของเส้นขอบ และอนุญาตให้มีโฟลตเพิ่มเติมได้หลังจากนั้น

---

27. ค่าคุณสมบัติเริ่มต้นสามารถเรียกคืนผ่าน CSS ได้หรือไม่? ถ้าใช่ ทำอย่างไร?

ใน CSS คุณไม่สามารถเปลี่ยนกลับเป็นค่าเก่าได้เนื่องจากไม่มีค่าเริ่มต้น คุณสมบัติสามารถประกาศอีกครั้งเพื่อรับคุณสมบัติเริ่มต้น

---

28. รับสมัครสื่อประเภทต่างๆ ที่ใช้?

สื่อที่แตกต่างกันมีคุณสมบัติที่แตกต่างกันเนื่องจากไม่คำนึงถึงขนาดตัวพิมพ์

พวกเขาจะ:

• เกี่ยวกับหู - สำหรับเครื่องสังเคราะห์เสียงและคำพูด
• พิมพ์ – แสดงตัวอย่างเนื้อหาเมื่อพิมพ์
• การฉายภาพ- ฉาย CSS บนโปรเจ็กเตอร์
• มือถือ- ใช้อุปกรณ์มือถือ
• หน้าจอ - หน้าจอคอมพิวเตอร์และแล็ปท็อป

---

29. CSS Box Model คืออะไร และมีองค์ประกอบอะไรบ้าง?

กล่องนี้กำหนดการออกแบบและเค้าโครงขององค์ประกอบของ CSS องค์ประกอบคือ:

ขอบ: ชั้นบนสุดจะแสดงโครงสร้างโดยรวม
ชายแดน: ตัวเลือกช่องว่างภายในและเนื้อหาที่มีเส้นขอบล้อมรอบจะปรากฏขึ้น สีพื้นหลังส่งผลต่อเส้นขอบ
การขยายความ: แสดงช่องว่าง สีพื้นหลังส่งผลต่อเส้นขอบ
คอนเทนต์: มีการแสดงเนื้อหาจริง

---

30. ตัวเลือกบริบทคืออะไร?

ตัวเลือกที่ใช้เพื่อเลือกเหตุการณ์พิเศษขององค์ประกอบเรียกว่าตัวเลือกตามบริบท ช่องว่างจะแยกตัวเลือกแต่ละรายการ เฉพาะองค์ประกอบสุดท้ายของรูปแบบเท่านั้นที่ถูกระบุในตัวเลือกประเภทนี้ เช่น: TD P TEXT {สี: สีน้ำเงิน}

---

31. เปรียบเทียบค่า RGB กับรหัสสีเลขฐานสิบหก ?

สามารถระบุสีได้สองวิธี:

• สีจะแสดงด้วยอักขระ 6 ตัว เช่น การเข้ารหัสสีเลขฐานสิบหก เป็นการผสมระหว่างตัวเลขและตัวอักษร และนำหน้าด้วย # เช่น: g {สี: #00cjfi}
• สีจะแสดงด้วยส่วนผสมของสีแดง สีเขียว และสีน้ำเงิน สามารถระบุค่าของสีได้ เช่น: rgb(r,g,b): ในประเภทนี้ ค่าสามารถอยู่ระหว่างจำนวนเต็ม 0 ถึง 255 rgb(r%,g%,b%): เปอร์เซ็นต์สีแดง เขียว และน้ำเงินจะปรากฏขึ้น

---

32. กำหนด Image Sprite ด้วยบริบทของ CSS ?

เมื่อชุดรูปภาพถูกรวมเข้าด้วยกันเป็นภาพเดียว ภาพนั้นจะเรียกว่า 'ภาพสไปรท์' เนื่องจากการโหลดทุกภาพบนหน้าเว็บใช้เวลานาน การใช้ภาพสไปรท์จึงช่วยลดเวลาที่ใช้และให้ข้อมูลได้อย่างรวดเร็ว

การเข้ารหัส CSS:

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

 

ในกรณีนี้จะใช้เฉพาะส่วนที่จำเป็นเท่านั้น ผู้ใช้สามารถประหยัดส่วนต่างและเวลาได้มากจากสิ่งนี้

---

33. เปรียบเทียบการจัดกลุ่มและการซ้อนใน CSS ?

การจัดกลุ่ม: ตัวเลือกสามารถจัดกลุ่มได้โดยมีค่าคุณสมบัติเท่ากันและรหัสจะลดลง
เช่น :

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

 

จากโค้ดจะเห็นได้ว่าทุกองค์ประกอบใช้คุณสมบัติเดียวกัน สามารถหลีกเลี่ยงการเขียนซ้ำได้โดยการเขียนตัวเลือกแต่ละตัวโดยคั่นด้วยเครื่องหมายจุลภาค

การซ้อน: การระบุตัวเลือกภายในตัวเลือกเรียกว่าการซ้อน

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}

 

---

34. สามารถกำหนดมิติขององค์ประกอบได้อย่างไร?

คุณสมบัติมิติสามารถกำหนดได้โดย:

• ความสูง
• ความสูงสูงสุด
• ความกว้างสูงสุด
• ความสูงขั้นต่ำ
• ความกว้างขั้นต่ำ
• ความกว้าง

---

35. กำหนดคุณสมบัติ float ของ CSS?

ด้วยคุณสมบัติ float คุณสามารถย้ายรูปภาพไปทางขวาหรือซ้ายพร้อมกับข้อความที่จะพันรอบรูปภาพได้ องค์ประกอบก่อนที่จะใช้คุณสมบัตินี้จะไม่เปลี่ยนแปลงคุณสมบัติ

---

36. ดัชนี Z ทำงานอย่างไร?

การทับซ้อนกันอาจเกิดขึ้นในขณะที่ใช้ CSS สำหรับการวางตำแหน่งองค์ประกอบ HTML ดัชนี Z ช่วยในการระบุองค์ประกอบที่ทับซ้อนกัน เป็นตัวเลขที่สามารถเป็นบวกหรือลบได้ โดยค่าเริ่มต้นจะเป็นศูนย์

---

37. ความเสื่อมโทรมอย่างสง่างามคืออะไร?

ในกรณีที่ส่วนประกอบทำงานล้มเหลว ส่วนประกอบจะยังคงทำงานต่อไปได้ตามปกติแม้ว่าจะมีการเสื่อมสภาพอย่างค่อยเป็นค่อยไป แอปพลิเคชันเบราว์เซอร์ล่าสุดจะใช้เมื่อมีการออกแบบหน้าเว็บ เนื่องจากไม่สามารถใช้ได้สำหรับทุกคน จึงมีฟังก์ชันพื้นฐานซึ่งช่วยให้สามารถใช้งานได้กับผู้ชมในวงกว้าง ในกรณีที่ไม่สามารถดูรูปภาพได้ ข้อความจะแสดงพร้อมกับแท็ก Alt

---

38. การเพิ่มประสิทธิภาพแบบก้าวหน้าคืออะไร?

เป็นอีกทางเลือกหนึ่งของความเสื่อมโทรมอย่างสง่างามซึ่งเน้นไปที่เรื่องของเว็บ ฟังก์ชันการทำงานจะเหมือนกัน แต่ให้ความได้เปรียบพิเศษแก่ผู้ใช้ที่มีแบนด์วิธล่าสุด มีการใช้งานอย่างโดดเด่นเมื่อเร็ว ๆ นี้ด้วยการเชื่อมต่ออินเทอร์เน็ตบนมือถือที่ขยายฐาน

---

39. สามารถออกแบบความเข้ากันได้แบบย้อนหลังใน CSS ได้อย่างไร?

วิธีการชีต HTML ทำงานร่วมกับ CSS และใช้ตามนั้น

---

40. จะลบช่องว่างใต้ภาพได้อย่างไร?

เนื่องจากรูปภาพที่เป็นองค์ประกอบแบบอินไลน์จะถือว่าเหมือนกับข้อความ ดังนั้นจึงมีช่องว่างเหลืออยู่ ซึ่งสามารถลบออกได้โดย:

CSS

img { display: block ; }

 

---

41. ทำไม @import ถึงอยู่ด้านบนสุดเท่านั้น?

@import ควรใช้ที่ด้านบนเท่านั้น เพื่อหลีกเลี่ยงกฎที่ลบล้างใดๆ โดยทั่วไปแล้ว ลำดับการจัดอันดับจะเป็นไปตามภาษาการเขียนโปรแกรมส่วนใหญ่ เช่น Java, Modula ฯลฯ ในภาษา C เครื่องหมาย # เป็นตัวอย่างที่โดดเด่นของการที่ @import จะอยู่ด้านบนสุด

---

42. ข้อใดต่อไปนี้เป็นแบบอย่างมากกว่า: คุณสมบัติ CSS หรือขั้นตอน HTML

CSS เป็นแบบอย่างมากกว่าขั้นตอน HTML เบราว์เซอร์ที่ไม่รองรับ CSS จะแสดงแอตทริบิวต์ HTML

---

43. สไตล์อินไลน์คืออะไร?

สไตล์อินไลน์ใน CSS ใช้เพื่อเพิ่มสไตล์ให้กับองค์ประกอบ HTML แต่ละรายการ

---

44. สามารถเพิ่มความคิดเห็นใน CSS ได้อย่างไร?

ความคิดเห็นใน CSS สามารถเพิ่มด้วย /* และ */

---

45. กำหนดตัวเลือกแอตทริบิวต์ ?

มันถูกกำหนดโดยชุดขององค์ประกอบ ค่า และส่วนต่างๆ ของมัน

---

46. ​​กำหนดคุณสมบัติ?

สไตล์ที่ช่วยในการมีอิทธิพลต่อ CSS เช่น แบบอักษร มีค่าหรือคุณสมบัติที่สอดคล้องกันอยู่ภายใน เช่น FONT มีสไตล์ที่แตกต่างกัน เช่น ตัวหนา ตัวเอียง เป็นต้น

---

47. สไตล์ชีทสำรองคืออะไร?

สไตล์ชีตสำรองช่วยให้ผู้ใช้สามารถเลือกสไตล์ที่เพจจะแสดงโดยใช้เมนูมุมมอง>สไตล์เพจ ด้วย Alternate Style Sheet ผู้ใช้สามารถดูเพจได้หลายเวอร์ชันตามความต้องการและความชอบของตน

---

48. จำเป็นต้องมีเครื่องหมายคำพูดใน URL หรือไม่?

เครื่องหมายคำพูดเป็นทางเลือกใน URL และอาจเป็นแบบเดี่ยวหรือคู่ก็ได้

---

49. ตามกฎคืออะไร?

กฎ ซึ่งมีผลบังคับใช้กับทั้งแผ่นงานและไม่ใช่บางส่วน เรียกว่ากฎที่กฎ นำหน้าด้วย @ ตามด้วย AZ, az หรือ 0-9

---

50. CSS สามารถต่อประสานกับชีตส่วนตัวของผู้ใช้ได้อย่างไร?

คุณสมบัติสามารถตั้งค่าในตำแหน่งที่แนะนำและแก้ไขเอกสารสำหรับ CSS เพื่อผสมกับชีตส่วนตัวของผู้ใช้

คำถามสัมภาษณ์เหล่านี้จะช่วยในวีว่าของคุณ (วาจา) ในทุกอุตสาหกรรม การใช้งานเว็บไซต์และเว็บแอปพลิเคชันเพิ่มขึ้นทุกวัน และ CSS เป็นส่วนสำคัญในการสร้างเว็บไซต์ที่น่าสนใจ ดังนั้นจึงมีความต้องการอย่างมากสำหรับ UI/UX และนักออกแบบเว็บไซต์ที่มีความรู้เกี่ยวกับ CSS และ HTML เป็นอย่างดี