หลักสูตรนี้จะแบ่งพื้นฐานของ CSS ออกเป็นส่วนๆ ที่ชัดเจนและเข้าใจง่าย ในโมดูลต่อๆ ไป คุณจะได้ดูวิธีการทำงานของด้านหลักๆ ของ CSS และวิธีใช้อย่างมีประสิทธิภาพในโปรเจ็กต์ของคุณ ใช้แผงเมนูข้างโลโก้ "ดู CSS" เพื่อไปยังส่วนต่างๆ ของโมดูล
คุณจะได้เรียนรู้พื้นฐาน CSS เช่น โมเดล Box, Cascade และความจำเพาะ, Flexbox, ตารางกริด และ z-index นอกจากนี้ คุณยังจะได้เรียนรู้เกี่ยวกับฟังก์ชัน ประเภทสี การไล่ระดับสี คุณสมบัติเชิงตรรกะ และการสืบทอดค่าที่จะช่วยให้คุณเป็นนักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์ที่รอบด้านและพร้อมใช้งานกับอินเทอร์เฟซผู้ใช้ทุกชนิด
แต่ละโมดูลจะมีการสาธิตแบบอินเทอร์แอกทีฟและการประเมินตนเองไว้ให้คุณทดสอบความรู้ นอกจากการเรียนรู้ผ่านการอ่านและการสาธิตแล้ว ยังมีตอนของพอดแคสต์ที่จะกล่าวถึงในแต่ละหัวข้อเป็นอีกวิธีในการเรียนรู้และต่อยอดความรู้ของคุณ
หลักสูตรนี้สร้างขึ้นสำหรับนักพัฒนาซอฟต์แวร์ CSS ทั้งระดับเริ่มต้นและขั้นสูง คุณสามารถดูในซีรีส์นี้ตั้งแต่ต้นจนจบเพื่อให้เข้าใจเกี่ยวกับ CSS โดยทั่วไปจากบนลงล่าง หรือจะใช้เป็นข้อมูลอ้างอิงสำหรับหัวข้อการจัดรูปแบบที่เฉพาะเจาะจงก็ได้ สำหรับผู้ที่ยังไม่คุ้นเคยกับการพัฒนาเว็บโดยรวม โปรดดู เรียนรู้ HTML เพื่อเรียนรู้วิธีเขียนมาร์กอัปและลิงก์ สไตล์ชีต
สิ่งที่คุณจะได้เรียนรู้มีดังนี้
โมเดล Box
เนื่องจาก CSS ทั้งหมดที่แสดงคือกล่องข้อมูล การทำความเข้าใจวิธีการทำงานของรูปแบบกล่อง CSS จึงเป็นพื้นฐานหลักของ CSS
ตัวเลือก
หากต้องการใช้ CSS กับองค์ประกอบ คุณต้องเลือกองค์ประกอบนั้น CSS มอบวิธีต่างๆ ในการดำเนินการนี้และสำรวจวิธีต่างๆ ในโมดูลนี้
น้ำตก
บางครั้งอาจมีกฎ CSS ที่แข่งขันกันอย่างน้อย 2 กฎกับองค์ประกอบ 1 รายการ ดูว่าเบราว์เซอร์จะเลือกใช้อย่างไร และวิธีควบคุมการเลือกนี้
ความจำเพาะ
โมดูลนี้จะเจาะลึกเรื่องความเฉพาะเจาะจง ซึ่งเป็นส่วนสำคัญของ Cascade
การรับค่า
พร็อพเพอร์ตี้ CSS บางรายการรับค่าเดิมมาหากคุณไม่ระบุค่า ดูวิธีการทำงานและวิธีใช้ให้เกิดประโยชน์ได้ในโมดูลนี้
สี
การระบุสีใน CSS ทำได้หลายวิธี โมดูลนี้จะตรวจสอบค่าสีที่ใช้กันโดยทั่วไปมากที่สุด
หน่วยปรับขนาด
ดูวิธีกำหนดขนาดขององค์ประกอบโดยใช้ CSS การทำงานร่วมกับสื่อที่ยืดหยุ่นของเว็บ
เลย์เอาต์
ภาพรวมของวิธีเลย์เอาต์ต่างๆ ที่คุณต้องเลือกเมื่อสร้างคอมโพเนนต์หรือเลย์เอาต์หน้าเว็บ
Flexbox
Flexbox เป็นกลไกเลย์เอาต์ที่ออกแบบมาเพื่อการจัดวางกลุ่มรายการในมิติข้อมูลเดียว ดูวิธีใช้งานในโมดูลนี้
ตารางกริด
เลย์เอาต์ตารางกริดของ CSS มีระบบเลย์เอาต์ 2 มิติที่ควบคุมเลย์เอาต์ในแถวและคอลัมน์ สำรวจทุกอย่างในตารางกริด
คุณสมบัติทางตรรกะ
คุณสมบัติและค่าแบบลอจิคัลที่สัมพันธ์กับโฟลว์ที่ลิงก์กับลักษณะการไหลของข้อความ ไม่ใช่รูปร่างของหน้าจอ ดูวิธีใช้ประโยชน์จาก CSS รูปแบบใหม่นี้
การเว้นวรรค
ดูวิธีการเลือกวิธีจัดระยะห่างองค์ประกอบที่ดีที่สุดสำหรับวิธีวางเลย์เอาต์ที่คุณใช้และคอมโพเนนต์ที่คุณกำลังสร้าง
องค์ประกอบจำลอง
องค์ประกอบเทียมก็เหมือนกับการเพิ่มหรือกำหนดเป้าหมายองค์ประกอบเพิ่มเติมโดยไม่ต้องเพิ่ม HTML อีก ผู้นำเหล่านี้มีหลายบทบาทและดูข้อมูลเกี่ยวกับพวกเขาได้ในโมดูลนี้
คลาส Pseudo
Pseudo-classes ช่วยให้คุณใช้ CSS ตามการเปลี่ยนแปลงสถานะได้ ซึ่งหมายความว่าการออกแบบของคุณจะตอบสนองต่อข้อมูลของผู้ใช้ได้ เช่น อีเมลที่ไม่ถูกต้อง
พรมแดน
เส้นขอบเป็นกรอบสำหรับกล่องต่างๆ ดูวิธีเปลี่ยนขนาด รูปแบบ และสีของเส้นขอบโดยใช้ CSS
เงา
การเพิ่มเงาลงในข้อความและองค์ประกอบใน CSS ทำได้หลายวิธี ดูวิธีใช้แต่ละตัวเลือกและงานที่ตัวเลือกนั้นออกแบบมา
มุ่งเน้น
เข้าใจถึงความสำคัญของการมุ่งเน้นในเว็บแอปพลิเคชัน คุณจะได้ดูวิธีจัดการโฟกัส และวิธีตรวจสอบว่าเส้นทางผ่านหน้าเว็บเหมาะสำหรับทั้งผู้ที่ใช้เมาส์และแป้นพิมพ์ในการนำทาง
ดัชนี Z และบริบทแบบเรียงซ้อน
ดูวิธีควบคุมลำดับที่องค์ประกอบจะซ้อนทับกันโดยใช้ดัชนี z และบริบทแบบเรียงซ้อน
ฟังก์ชัน
CSS มีฟังก์ชันที่มีในตัวมากมาย ดูข้อมูลเกี่ยวกับฟังก์ชันหลักบางส่วนและวิธีใช้
การไล่ระดับสี
ในโมดูลนี้ คุณจะได้เรียนรู้วิธีใช้การไล่ระดับสีประเภทต่างๆ ที่มีใน CSS การไล่ระดับสีจะสร้างโฮสต์ของเอฟเฟกต์ที่เป็นประโยชน์ทั้งหมดได้โดยไม่ต้องใช้แอปกราฟิกเพื่อสร้างรูปภาพ
ภาพเคลื่อนไหว
ภาพเคลื่อนไหวเป็นวิธีที่ดีในการเน้นองค์ประกอบแบบอินเทอร์แอกทีฟ รวมถึงเพิ่มความสนใจและความสนุกสนานให้กับงานออกแบบของคุณ ดูวิธีเพิ่มและควบคุมเอฟเฟกต์ภาพเคลื่อนไหวด้วย CSS
ตัวกรอง
ตัวกรองใน CSS หมายความว่าคุณใช้เอฟเฟกต์ที่คุณอาจคิดว่าเป็นไปได้ในแอปพลิเคชันกราฟิกเท่านั้น ในโมดูลนี้ คุณจะเห็นฟีเจอร์ที่พร้อมใช้งาน
โหมดการผสม
สร้างเอฟเฟกต์องค์ประกอบด้วยการผสมเลเยอร์ 2 รายการขึ้นไป และดูวิธีแยกรูปภาพที่มีพื้นหลังสีขาวในโมดูลนี้ในโหมดผสาน
รายการ
รายการตามโครงสร้างประกอบด้วยองค์ประกอบคอนเทนเนอร์แบบลิสต์ที่เต็มไปด้วยรายการ ในโมดูลนี้ คุณจะได้รู้วิธีจัดรูปแบบทุกส่วนของรายการ
การเปลี่ยนฉาก
เรียนรู้วิธีระบุการเปลี่ยนระหว่างสถานะขององค์ประกอบ ใช้ทรานซิชัน เพื่อปรับปรุงประสบการณ์ของผู้ใช้โดยการแสดงความคิดเห็นเป็นรูปภาพสำหรับการโต้ตอบของผู้ใช้
รายการเพิ่มเติม
ส่วนรายการเพิ่มเติมคือวิธีที่คุณจัดการกับเนื้อหาที่ไม่พอดีกับขนาดระดับบนสุดที่ตั้งค่าไว้ ในโมดูลนี้ คุณจะได้คิดนอกกรอบและเรียนรู้วิธีจัดรูปแบบเนื้อหาที่ล้น
พื้นหลัง
ดูวิธีจัดรูปแบบพื้นหลังของช่องโดยใช้ CSS
ข้อความและการพิมพ์
ดูวิธีจัดรูปแบบข้อความบนเว็บ
บทสรุปและขั้นตอนถัดไป
แหล่งข้อมูลเพิ่มเติมที่จะช่วยให้คุณดำเนินการต่อไป
แล้วคุณพร้อมเรียนรู้เกี่ยวกับ CSS หรือยัง มาเริ่มกันเลย