เชี่ยวชาญคำศัพท์ CSS: คำศัพท์จำเป็นสำหรับนักพัฒนาเว็บ

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

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

CSS คืออะไร?

CSS ย่อมาจาก Cascading Style Sheets (สไตล์ชีตแบบแคสเคด) ภาษาเขียนโปรแกรมที่ใช้กันอย่างแพร่หลายในการเพิ่มสไตล์ให้หน้าเว็บ HTML ในพื้นที่ดิจิทัล ถูกพัฒนาโดย World Wide Web Consortium และสามารถใช้กับภาษาสร้างเครื่องหมาย XML ใดๆ ได้ นอกจากนี้ เนื่องจากภาษาและไวยากรณ์ที่เรียบง่าย จึงเข้าใจง่ายในภาษามนุษย์

นักออกแบบเว็บและผู้สร้างไซต์ใช้ CSS เพื่อกำหนดและปรับแต่งลักษณะที่ปรากฏขององค์ประกอบ HTML CSS ช่วยเพิ่มประสิทธิภาพการแสดงผลขององค์ประกอบและความน่าดึงดูดทางสายตาบนหน้าจอในเว็บไซต์และแอป อนุญาตให้นำสไตล์ต่างๆ มาใช้ เช่น สไตล์อินไลน์ และเพิ่มแอนิเมชันด้วย keyframes

ใครใช้คำศัพท์ CSS?

นักออกแบบเว็บ นักพัฒนาเว็บ นักพัฒนาฝั่งหน้า (front end developers) และนักพัฒนาแอปพลิเคชันใช้คำศัพท์ CSS เพื่อนำแนวคิดและไวยากรณ์ CSS ไปใช้กับโค้ดหน้าเว็บ พวกเขาใช้เครื่องมือพัฒนาเว็บอย่าง Bootstrap เฟรมเวิร์ก CSS ที่ใช้กันอย่างแพร่หลาย เพื่อสร้างหน้าเว็บที่น่าดึงดูดทางสายตา นักพัฒนาบางส่วนยังใช้แอปอย่าง Mimi, Programming Hero และ CodeHub เพื่อเขียนโค้ดและเพิ่มลักษณะหน้าเว็บด้วย CSS

รายการคำศัพท์ CSS: สิ่งที่ทุก CSS ควรทราบ

1. อัตราส่วนภาพ (Aspect ratio)
2. กล่องโมเดล (Box model)
3. ตัวเลือกไชลด์ (Child selectors)
4. บล็อกการประกาศ (Declaration block)
5. Flexbox
6. เลย์เอาต์กริด (Grid layout)
7. การสืบทอด (Inheritance)
8. ค่าการเติม (Padding values)
9. องค์ประกอบย่อหน้า (Paragraph element)
10. การจัดตำแหน่ง (Positioning)
11. คุณสมบัติ (Properties)
12. Pseudo-class
13. หน่วย Rem (Rem units)
14. องค์ประกอบลอยขวา (Right-floating element)
15. Ruleset
16. ตัวเลือก (Selectors)
17. ความเฉพาะเจาะจง (Specificity)
18. ไวยากรณ์ (Syntax)
19. ตัวระบุหน่วย (Unit identifier)
20. อักขระช่องว่าง (Whitespace characters)

คำศัพท์ CSS: 5 คำศัพท์ CSS พื้นฐาน

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

กล่องโมเดล (Box Model)

CSS box model กำหนดว่าองค์ประกอบควรปรากฏบนหน้าเว็บอย่างไร ตามการออกแบบ CSS เป็นโมเดลการจัดรูปแบบที่ง่ายและเน้นกล่อง (box-oriented) ประกอบด้วย margin, border, padding และ content เนื้อหาและองค์ประกอบทั้งหมดถูกนำเสนอภายในกล่องเหล่านี้

ทำไมนักออกแบบเว็บต้องรู้เกี่ยวกับ Box Model

นักออกแบบเว็บต้องรู้เกี่ยวกับ box model เพราะมันสร้างรากฐานของการแสดงเนื้อหาบนหน้าเว็บ CSS ด้วย box model พวกเขาสามารถตั้งค่าโครงสร้างและมิติของเลย์เอาต์ CSS ได้โดยการกำหนดคุณสมบัติกล่องอย่าง width และ height มีกล่องบล็อก (block boxes) และกล่องอินไลน์ (inline boxes) สำหรับจัดระเบียบและจัดตำแหน่งเนื้อหา

บล็อกการประกาศ (Declaration Block)

เป็นส่วนหนึ่งของไวยากรณ์ CSS declaration blocks จับคู่คุณสมบัติ CSS และค่าเพื่อตั้งค่าสไตล์ CSS บนหน้าเว็บอย่างชัดเจน ตัวอย่างเช่น สำหรับคุณสมบัติ background-color สีที่คุณมอบหมายให้เป็นค่า คุณจับคู่พวกมันโดยใช้ไวยากรณ์ CSS declaration block โดยมี colon ระหว่างพวกมันและ semicolon หลังค่า กลุ่มการประกาศมีเครื่องหมายปีกกาเปิดที่ต้นและเครื่องหมายปีกกาปิดที่ท้าย

ทำไมนักออกแบบเว็บต้องรู้เกี่ยวกับ Declaration Block

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

Flexbox

Flexbox เป็นโมดูล CSS สำหรับเพิ่มคุณสมบัติให้คอนเทนเนอร์พาเรนท์ (flexbox หลัก) และคอนเทนเนอร์ชายลด์ (flex item) ด้วย flexbox คุณสามารถปรับการกระจายพื้นที่ การจัดตำแหน่ง และทิศทางเนื้อหาได้ เนื่องจาก flexbox ใช้กับความสัมพันธ์พาเรนท์-ชายลด์ คุณสมบัติของคอนเทนเนอร์พาเรนท์จึงส่งผลโดยตรงต่อตำแหน่งและการเคลื่อนที่ของชายลด์ในพื้นที่ของพาเรนท์

ทำไมนักออกแบบเว็บต้องรู้เกี่ยวกับ Flexbox

นักออกแบบเว็บต้องรู้ flexbox เพราะมันให้พวกเขาควบคุมพฤติกรรมและการจัดตำแหน่งขององค์ประกอบได้มากขึ้น Flexbox ให้นักออกแบบเว็บความยืดหยุ่นในการปรับแต่งไฟล์ CSS และปรับปรุงเลย์เอาต์หน้าเว็บ สิ่งนี้สำคัญโดยเฉพาะเมื่อพวกเขาออกแบบหน้าเว็บที่สามารถปรับตัวให้เข้ากับอุปกรณ์หรือประเภทหน้าจอขนาดไหนก็ได้

การจัดตำแหน่ง (Positioning)

CSS positioning เป็นคุณสมบัติที่ใช้ระบุว่าองค์ประกอบแต่ละตัวควรอยู่ที่ไหนบนหน้าเว็บ มีค่า 5 ค่าที่สามารถใช้สำหรับการจัดตำแหน่งได้คือ absolute, fixed, relative, static และ sticky ค่า default ของ CSS position คือ static แต่คุณสามารถเปลี่ยนและปรับแต่งได้ตามต้องการ

ทำไมนักออกแบบเว็บต้องรู้เกี่ยวกับ Positioning

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

คุณสมบัติ (Properties)

คุณสมบัติ CSS ใช้หลักสำหรับนำสไตล์ CSS ไปใช้บนหน้าเว็บ ซึ่งทำให้มีรายการคุณสมบัติยาวมาก รายการนี้รวมถึงคุณสมบัติขอบ (border properties) คุณสมบัติกล่อง (box properties) และคุณสมบัติสไตล์รายการ (list-style properties) ตัวอย่างเช่น เพื่อตั้งค่าขอบแนวตั้ง (vertical margins) ขอบลบพร้อม float หรือขอบติดกันของกล่อง คุณต้องปรับแต่งคุณสมบัติขอบ คุณสมบัติอื่นๆ เกี่ยวข้องกับคุณสมบัติพื้นหลังแต่ละตัว คุณสมบัติการเติม (padding properties) และคุณสมบัติแบบย่อ (shorthand properties)

ทำไมนักออกแบบเว็บต้องรู้เกี่ยวกับ Properties

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

Cheat Sheet คำศัพท์ CSS: 5 คำศัพท์ CSS ขั้นสูง

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

การสืบทอด (Inheritance)

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

ทำไมนักออกแบบเว็บควรทราบเกี่ยวกับ Inheritance

การใช้การสืบทอดช่วยประหยัดเวลาของนักออกแบบเว็บในการจัดรูปแบบ descendant selector และลดความพยายามที่จำเป็นในกระบวนการพัฒนาเว็บ คุณสมบัติบางอย่างสามารถสืบทอดค่าได้โดยค่าเริ่มต้น เช่น color, font, visibility, text-align, line height และ list style อย่างไรก็ตาม CSS classes ไม่สามารถสืบทอดได้ ไม่เหมือนกรณีทั่วไปในภาษาเขียนโปรแกรมอื่นๆ

Pseudo-class

Pseudo-class เป็นคีย์เวิร์ดที่กำหนดไว้ล่วงหน้า ใช้เพื่อเพิ่มสไตล์ให้องค์ประกอบที่เลือกหนึ่งหรือมากกว่า มันทำให้ CSS selectors มีสไตล์ต่างจากต้นฉบับ มี pseudo-classes ที่แตกต่างกัน รวมถึง location, language, user action และ time

ทำไมนักออกแบบเว็บควรทราบเกี่ยวกับ Pseudo-class

นักออกแบบเว็บใช้ pseudo-class เพื่อเพิ่มเลย์เอาต์และลักษณะที่ปรากฏของเบราว์เซอร์ Pseudo-classes ช่วยให้นักออกแบบเว็บจัดการอินเทอร์เฟซภาพของเว็บไซต์โดยไม่รบกวนองค์ประกอบโครงสร้างและเนื้อหา

Ruleset

Ruleset ประกอบด้วย selectors และ declarations ที่กำหนดสำหรับ stylesheets เมื่อเว็บไซต์เปิดผ่านเบราว์เซอร์ มันจะมี author rule และ reader rule ที่ใช้ ขึ้นอยู่กับว่าใครเข้าถึงหน้าเว็บ Author rule ปกติสำหรับนักออกแบบเว็บ และ reader rule สำหรับผู้ใช้

ทำไมนักออกแบบเว็บควรทราบเกี่ยวกับ Ruleset

นักออกแบบเว็บควรทราบเกี่ยวกับ rulesets เพราะมันสำคัญสำหรับการเขียนบล็อกโค้ดใน CSS Ruleset สร้าง cascade ใน stylesheet และทำให้กระบวนการออกแบบเว็บมีประสิทธิภาพและชัดเจน ทำให้การจัดรูปแบบองค์ประกอบ HTML เป็นระเบียบและอนุญาตให้แก้ไขข้อบกพร่องและดูแลรักษาง่ายขึ้น

ตัวเลือก (Selectors)

CSS selector กำหนดว่าองค์ประกอบไหนถูกเลือกสำหรับนำคุณสมบัติหรือสไตล์ไปใช้ Selector แบบง่ายชี้ไปยังองค์ประกอบที่นำสไตล์ CSS ไปใช้ ในขณะที่ combinator selector รวมกลุ่มของ selectors แต่ละประเภทของ selector ใช้เพื่อเลือกองค์ประกอบบางอย่างและกำหนดในวิธีเฉพาะ ตัวอย่างเช่น universal selector ถูกกำหนดโดยอักขระ asterisk

ทำไมนักออกแบบเว็บควรทราบเกี่ยวกับ Selectors

นักออกแบบเว็บควรทราบเกี่ยวกับ selectors เนื่องจากพวกเขาสามารถใช้พวกมันเลือกองค์ประกอบสำหรับจัดรูปแบบหน้าเว็บ พวกเขาต้องเข้าใจความแตกต่างระหว่างและการประยุกต์ใช้ที่เหมาะสมของ universal selector, class selector, attribute selector และอื่นๆ

ความเฉพาะเจาะจง (Specificity)

Specificity จัดอันดับ CSS selectors มันหมายถึงการระบุให้เบราว์เซอร์นำไปใช้ จัดลำดับ และจัดลำดับความสำคัญของสไตล์บนองค์ประกอบที่เลือก ด้วย specificity ยิ่งอันดับของ selector สูง ยิ่งสำคัญ เพราะสไตล์ของมันเฉพาะเจาะจงมาก หมายความว่าสไตล์ CSS สามารถอยู่เหนือสไตล์ของหน้าเว็บอื่นๆ ได้

ทำไมนักออกแบบเว็บควรทราบเกี่ยวกับ Specificity

นักออกแบบเว็บควรทราบเกี่ยวกับ specificity เนื่องจากมันจะช่วยให้พวกเขากำหนดกฎสองกฎให้องค์ประกอบเดียวกันที่ขัดแย้งกัน Specificity สำคัญใน CSS สำหรับคุณสมบัติ cascade ที่เสนอโดยภาษาสร้างเครื่องหมายเอง สไตล์ถูกนำไปใช้ในลำดับเฉพาะ หนึ่งหลังอีกหนึ่ง ไม่มีสองสไตล์ที่จะถูกนำไปใช้ในเวลาเดียวกัน

ฉันจะเรียนคำศัพท์ CSS ในปี 2022 ได้อย่างไร?

คุณสามารถเรียนคำศัพท์ CSS ผ่าน massive open online courses (MOOCs) อย่าง Coursera และ Udemy ที่มีหลักสูตรและโปรเจกต์สำหรับ CSS คุณยังสามารถหาหลักสูตรบนแพลตฟอร์มเรียนรู้แบบสมาชิกอย่าง Skillshare หากคุณดูดซึมแนวคิดได้ดีกว่าจากการฟัง คุณยังสามารถเรียนจากช่องวิดีโอออกแบบเว็บบน YouTube

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

คำถามที่พบบ่อยเกี่ยวกับ CSS

ฉันควรเรียน HTML หรือ CSS ก่อน?

คุณควรเรียน HTML ก่อน หากคุณเพิ่งเริ่มต้นในโลกของการออกแบบเว็บและพัฒนาเว็บ จากนั้นพัฒนาความรู้โดยหาแหล่งข้อมูลที่แข็งแกร่งเพื่อเรียน CSS หากคุณต้องการอาชีพที่มีอนาคตในการพัฒนาเว็บ

การเรียน CSS ง่ายไหม?

ใช่ CSS เรียนรู้ง่าย คุณสามารถสำรวจบทเรียนมากมายเพื่อเรียนไวยากรณ์ CSS คุณยังสามารถใช้เครื่องมือสำหรับนักออกแบบเว็บเพื่อฝึกและจัดรูปแบบหน้าเว็บพื้นฐาน

CSS เหมือน JavaScript ไหม?

ไม่ CSS ไม่เหมือน JavaScript CSS เป็นภาษาสร้างเครื่องหมายและภาษาเลย์เอาต์สำหรับหน้าเว็บ HTML JavaScript เป็นภาษาเขียนโปรแกรมที่ใช้ทำให้เว็บไซต์ไดนามิก เพิ่มการโต้ตอบ และเพิ่มความเข้าถึงได้ CSS มีไฟล์แยกที่ใช้ .css extension ในขณะที่ JavaScript ใช้ .js extension