หลักสูตรนี้จะแบ่งพื้นฐานของ CSS ออกเป็นส่วนๆ ที่ชัดเจนและเข้าใจง่าย ในโมดูลถัดไป คุณจะได้เรียนรู้ว่าแง่มุมหลักของ CSS ทำงานอย่างไรและวิธีใช้แง่มุมเหล่านั้นอย่างมีประสิทธิภาพในโปรเจ็กต์ ใช้แผงเมนูข้างโลโก้ "Learn CSS" เพื่อไปยังส่วนต่างๆ
คุณจะได้เรียนรู้พื้นฐานของ CSS เช่น รูปแบบกล่อง การเรียงซ้อนและความเจาะจง Flexbox, Grid และ Z-index นอกจากนี้ คุณยังจะได้เรียนรู้เกี่ยวกับฟังก์ชัน ประเภทสี การไล่ระดับสี พร็อพเพอร์ตี้เชิงตรรกะ และการรับค่า เพื่อให้คุณเป็น นักพัฒนาซอฟต์แวร์ส่วนหน้าที่มีความรู้รอบด้าน พร้อมรับมือกับอินเทอร์เฟซผู้ใช้ทุกรูปแบบ
แต่ละโมดูลเต็มไปด้วยการสาธิตแบบอินเทอร์แอกทีฟและการประเมินตนเองเพื่อให้คุณทดสอบ ความรู้ นอกเหนือจากการเรียนรู้ผ่านการอ่านและเดโมแล้ว ยังมี พอดแคสต์ตอนที่มาพร้อมกับแต่ละหัวข้อเป็นอีกวิธีในการเรียนรู้และ ขยายความรู้ของคุณต่อไป
หลักสูตรนี้สร้างขึ้นสำหรับนักพัฒนา CSS ทั้งมือใหม่และมืออาชีพ คุณสามารถดูซีรีส์นี้ตั้งแต่ต้นจนจบเพื่อทำความเข้าใจ CSS โดยทั่วไปตั้งแต่ต้นจนจบ หรือจะใช้เป็นข้อมูลอ้างอิงสำหรับหัวข้อการจัดรูปแบบที่เฉพาะเจาะจงก็ได้ สำหรับผู้ที่เพิ่งเริ่มต้นพัฒนาเว็บโดยรวม โปรดดูเรียนรู้ HTML เพื่อดูวิธีเขียนมาร์กอัปและลิงก์ สไตล์ชีต
สิ่งที่คุณจะได้เรียนรู้มีดังนี้
Box Model
เนื่องจากทุกอย่างที่ CSS แสดงคือกล่อง การทำความเข้าใจวิธีทำงานของรูปแบบกล่อง CSS จึงเป็นรากฐานหลักของ CSS
ตัวเลือก
หากต้องการใช้ CSS กับองค์ประกอบ คุณต้องเลือกองค์ประกอบนั้น CSS มีวิธีต่างๆ มากมายในการทำเช่นนี้ และคุณสามารถดูวิธีเหล่านั้นได้ในโมดูลนี้
การซ้อน
การซ้อนกฎสไตล์ CSS จะช่วยให้สไตล์ชีตเป็นระเบียบมากขึ้น อ่านง่ายขึ้น และดูแลรักษาได้ง่ายขึ้น
การเรียงซ้อน
บางครั้งกฎ CSS ที่แข่งขันกัน 2 รายการขึ้นไปอาจมีผลกับองค์ประกอบ ดูวิธีที่เบราว์เซอร์เลือกใช้และวิธีควบคุมการเลือกนี้
ความเฉพาะเจาะจง
โมดูลนี้จะเจาะลึกถึงความเฉพาะเจาะจง ซึ่งเป็นส่วนสำคัญของแคสเคด
การรับช่วงค่า
พร็อพเพอร์ตี้ CSS บางรายการจะรับค่ามาจากองค์ประกอบระดับบนหากคุณไม่ได้ระบุค่าสำหรับพร็อพเพอร์ตี้นั้น ดูวิธีทำงานและวิธีใช้ประโยชน์จากฟีเจอร์นี้ได้ในโมดูลนี้
สี
คุณระบุสีใน CSS ได้หลายวิธี โมดูลนี้ จะพิจารณาค่าสีที่ใช้กันมากที่สุด
หน่วยขนาด
ดูวิธีปรับขนาดองค์ประกอบโดยใช้ CSS ซึ่งทำงานร่วมกับสื่อที่ยืดหยุ่นของ เว็บ
เลย์เอาต์
ภาพรวมของวิธีการจัดเลย์เอาต์ต่างๆ ที่คุณต้องเลือกเมื่อ สร้างเลย์เอาต์คอมโพเนนต์หรือหน้าเว็บ
Flexbox
Flexbox เป็นกลไกเลย์เอาต์ที่ออกแบบมาเพื่อจัดกลุ่มรายการในมิติเดียว ดูวิธีใช้ในโมดูลนี้
ตารางกริด
CSS Grid Layout มีระบบเลย์เอาต์แบบ 2 มิติ ซึ่งควบคุมเลย์เอาต์ ในแถวและคอลัมน์ ดูทุกสิ่งที่ตารางมีให้
พร็อพเพอร์ตี้เชิงตรรกะ
พร็อพเพอร์ตี้และค่าเชิงตรรกะที่สัมพันธ์กับโฟลว์จะลิงก์กับโฟลว์ของข้อความ ไม่ใช่รูปร่างทางกายภาพของหน้าจอ ดูวิธีใช้ประโยชน์จากแนวทางใหม่กว่านี้สำหรับ CSS
พร็อพเพอร์ตี้ที่กำหนดเอง
พร็อพเพอร์ตี้ที่กำหนดเองหรือตัวแปร CSS ช่วยให้คุณจัดระเบียบและนำค่ากลับมาใช้ใหม่ได้ ใน CSS เพื่อให้สไตล์มีความยืดหยุ่นและเข้าใจได้ง่ายขึ้น
การเว้นวรรค
ดูวิธีเลือกวิธีการเว้นวรรคองค์ประกอบที่ดีที่สุดสำหรับเลย์เอาต์ วิธีที่คุณใช้และคอมโพเนนต์ที่คุณสร้าง
องค์ประกอบจำลอง
Pseudo-element คือการเพิ่มหรือกำหนดเป้าหมายองค์ประกอบเพิ่มเติมโดยไม่ต้องเพิ่ม HTML โดยมีบทบาทที่หลากหลาย และคุณสามารถดูข้อมูลเกี่ยวกับบทบาทเหล่านี้ได้ ในโมดูลนี้
คลาสเสมือน
คลาสเสมือนช่วยให้คุณใช้ CSS ตามการเปลี่ยนแปลงสถานะได้ ซึ่งหมายความว่าการออกแบบของคุณ สามารถตอบสนองต่อข้อมูลที่ผู้ใช้ป้อน เช่น อีเมลที่ไม่ถูกต้อง
เส้นขอบ
เส้นขอบจะสร้างกรอบให้กับกล่อง ดูวิธีเปลี่ยนขนาด รูปแบบ และสีของเส้นขอบโดยใช้ CSS
เงา
คุณเพิ่มเงาให้กับข้อความและองค์ประกอบใน CSS ได้หลายวิธี ดูวิธีใช้แต่ละตัวเลือกและงานที่ออกแบบมาสำหรับตัวเลือกนั้นๆ
โฟกัส
ทําความเข้าใจความสําคัญของโฟกัสในเว็บแอปพลิเคชัน คุณจะได้เรียนรู้วิธีจัดการโฟกัส และวิธีตรวจสอบว่าเส้นทางผ่านหน้าเว็บของคุณใช้งานได้ทั้งสำหรับผู้ที่ใช้เมาส์และผู้ที่ใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ
เคอร์เซอร์และพอยน์เตอร์
เคอร์เซอร์เป็นวิธีสำคัญที่ช่วยให้ผู้ใช้ทราบว่าตนกำลังโต้ตอบกับอะไร อยู่ ในโมดูลนี้ คุณจะได้เรียนรู้วิธีจัดรูปแบบเคอร์เซอร์ในบางกรณี
ดัชนีลำดับ Z และบริบทการซ้อน
ดูวิธีควบคุมลำดับที่องค์ประกอบวางซ้อนกันโดยใช้ดัชนีลำดับ Z และบริบทการวางซ้อน
การวางตำแหน่งของจุดยึด
การวางตําแหน่งยึด CSS เป็นวิธีประกาศตําแหน่งองค์ประกอบ ที่สัมพันธ์กับองค์ประกอบอื่น
ป๊อปโอเวอร์และกล่องโต้ตอบ
ป๊อปโอเวอร์คือองค์ประกอบที่มีแอตทริบิวต์ป๊อปโอเวอร์ และมีประโยชน์สำหรับรูปแบบการโต้ตอบที่หลากหลาย ซึ่งรวมถึงเคล็ดลับ เครื่องมือ การแจ้งเตือน ข้อความแจ้ง และอื่นๆ
ฟังก์ชัน
CSS มีฟังก์ชันในตัวมากมาย ดูข้อมูลเกี่ยวกับฟังก์ชันหลักบางอย่าง และวิธีใช้งาน
เส้น รูปร่าง การตัด และการมาสก์
เส้นทาง รูปร่าง การตัด และการมาสก์ช่วยให้นักพัฒนาแอปสามารถแสดงรูปร่างที่ซับซ้อนใน CSS ผ่านฟังก์ชันต่างๆ ที่สร้างประสบการณ์ที่น่าจดจำสำหรับผู้ใช้
การไล่ระดับสี
ในโมดูลนี้ คุณจะได้ดูวิธีใช้การไล่ระดับสีประเภทต่างๆ ที่มีใน CSS การไล่ระดับสีสามารถสร้างเอฟเฟกต์ที่มีประโยชน์มากมายโดยไม่ต้องใช้แอปกราฟิกเพื่อสร้างรูปภาพ
ภาพเคลื่อนไหว
ภาพเคลื่อนไหวเป็นวิธีที่ยอดเยี่ยมในการไฮไลต์องค์ประกอบแบบอินเทอร์แอกทีฟ รวมถึงเพิ่มความน่าสนใจ และความสนุกสนานให้กับดีไซน์ ดูวิธีเพิ่มและควบคุมเอฟเฟกต์ภาพเคลื่อนไหว ด้วย CSS
ตัวกรอง
ฟิลเตอร์ใน CSS หมายความว่าคุณสามารถใช้เอฟเฟกต์ที่คุณอาจคิดว่าทำได้เฉพาะในแอปพลิเคชันกราฟิก ในโมดูลนี้ คุณจะได้ดูว่ามีอะไรให้ใช้งานบ้าง
โหมดการผสม
สร้างเอฟเฟกต์การจัดองค์ประกอบโดยการผสมเลเยอร์ตั้งแต่ 2 เลเยอร์ขึ้นไป และดูวิธี แยกรูปภาพที่มีพื้นหลังสีขาวในโมดูลนี้เกี่ยวกับโหมดการผสม
รายการ
ในเชิงโครงสร้าง รายการประกอบด้วยองค์ประกอบคอนเทนเนอร์รายการที่เติมด้วย รายการ ในโมดูลนี้ คุณจะได้เรียนรู้วิธีจัดรูปแบบทุกส่วนของ รายการ
เคาน์เตอร์
CSS มีหลายวิธีในการควบคุมตัวนับในรายการสำหรับกรณีการใช้งานต่างๆ ในโมดูลนี้ คุณจะได้เรียนรู้วิธีควบคุมตัวนับใน รายการ
การเปลี่ยนฉาก
ดูวิธีกำหนดการเปลี่ยนภาพระหว่างสถานะขององค์ประกอบ ใช้การเปลี่ยนฉาก เพื่อปรับปรุงประสบการณ์ของผู้ใช้โดยแสดงความคิดเห็นด้วยภาพสำหรับการโต้ตอบของผู้ใช้
การเปลี่ยนมุมมองสำหรับ SPA
การเปลี่ยนหน้าเว็บช่วยให้คุณแสดงความต่อเนื่องหรือบริบทระหว่างหน้าเว็บใน SPA ได้
Overflow
การล้นคือวิธีจัดการกับเนื้อหาที่ไม่พอดีกับขนาดขององค์ประกอบระดับบนสุดที่กำหนด ในโมดูลนี้ คุณจะได้คิดนอกกรอบและเรียนรู้วิธีจัดรูปแบบเนื้อหาที่ล้น
พื้นหลัง
ดูวิธีจัดรูปแบบพื้นหลังของกล่องโดยใช้ CSS
ข้อความและรูปแบบตัวอักษร
ดูวิธีจัดรูปแบบข้อความบนเว็บ
การค้นหาคอนเทนเนอร์
Container Query ต่างจาก Media Query ตรงที่ช่วยให้คุณปรับองค์ประกอบได้อย่างเจาะจงมากขึ้น ตามขนาดและสถานะขององค์ประกอบระดับบน หรือคอนเทนเนอร์
บทสรุปและขั้นตอนถัดไป
แหล่งข้อมูลเพิ่มเติมที่จะช่วยให้คุณยกระดับองค์กรข่าวขึ้นไปอีกขั้น
คุณพร้อมที่จะเรียนรู้ CSS หรือยัง มาเริ่มกันเลย