ในยุคของการสื่อสารข้อมูลและการเข้าถึงข่าวสารด้วยเทคโนโลยีดิจิทัล CSS (Cascading Style Sheets) เป็นหนึ่งในภาษาพื้นฐานที่ทุกคนที่ต้องการสร้างเว็บไซต์ควรเรียนรู้ การเรียนรู้ CSS ไม่เพียงแต่จะช่วยให้เราสามารถสร้างเว็บไซต์ที่ดีได้ แต่ยังช่วยในการเข้าใจว่าเว็บไซต์มีโครงสร้างและสไตล์การนำเสนออย่างไร วันนี้เราจะมาเริ่มต้นการเรียน CSS ด้วยกัน และผมจะแนะนำ Code ตัวอย่าง 3 รูปแบบเพื่อให้คุณได้ลองประยุกต์ใช้เลย!
CSS คือภาษาที่ใช้กำหนดรูปแบบการแสดงผลของเอกสาร HTML นั่นคือ คุณสามารถกำหนดสี, ขนาด, การจัดวาง, และอีกมากมายที่เกี่ยวข้องกับการแสดงผลบนหน้าเว็บ การใช้ CSS ช่วยให้หน้าเว็บของคุณน่าสนใจขึ้น นอกจากนี้ ยังทำให้การจัดการเนื้อหาและการออกแบบแยกกัน มีมาตรฐานที่ชัดเจน และสามารถนำกลับมาใช้ซ้ำได้
ตัวอย่างที่ 1: การกำหนดสีพื้นหลังและสีของข้อความ
body {
background-color: #fafafa;
color: #333333;
}
ผลลัพธ์ที่ได้จาก CSS ข้างต้นคือการกำหนดให้หน้าเว็บมีพื้นหลังเป็นสีอ่อน (#fafafa) และข้อความมีสีเข้ม (#333333) เพื่อสร้างความเป็นความตัดกันที่สะดวกต่อการอ่าน
ตัวอย่างที่ 2: การปรับเปลี่ยนขนาดและประเภทของฟอนต์
p {
font-size: 16px;
font-family: Arial, sans-serif;
}
ในตัวอย่างนี้ เราได้กำหนดขนาดของข้อความในแท็ก `
` (paragraph) ให้มีขนาด 16 พิกเซล และใช้ชุดฟอนต์ Arial หรือชุดฟอนต์ที่ไม่มีเซริฟ (sans-serif) หากฟอนต์ Arial ไม่พร้อมใช้งาน
ตัวอย่างที่ 3: การจัดการด้วย Flexbox
.container {
display: flex;
justify-content: space-between;
}
Flexbox เป็นเครื่องมือชั้นยอดใน CSS ที่ช่วยให้การจัดวางเนื้อหาในแนวนอนหรือแนวตั้งเป็นเรื่องง่ายดาย ในตัวอย่างนี้ `.container` จะจัดวางลูกค้า (child elements) ของมันโดยแบ่งช่องว่างอย่างสม่ำเสมอผ่าน `justify-content: space-between;`
การเรียนรู้ CSS เป็นก้าวแรกที่สำคัญในการสร้างเว็บไซต์ที่ไม่เพียงแต่ทำงานได้ดี แต่ยังสร้างความประทับใจและสะท้อนตัวตนของคุณหรือแบรนด์ของคุณ การฝึกฝนเรื่อยๆ หาความรู้เพิ่มเติม และทำโปรเจกต์จริงจะทำให้คุณเก่งขึ้นอย่างไม่น่าเชื่อ หากคุณอยากไปให้ไกลในโลกของการพัฒนาเว็บไซต์ ก้าวต่อไปคือการเรียนรู้ JavaScript และ server-side scripting เพื่อเสริมสร้างทักษะของคุณ
CSS เป็นแค่จุดเริ่มต้น แต่เป็นจุดเริ่มต้นที่จะนำคุณไปสู่ความเป็นมืออาชีพในการออกแบบเว็บไซต์ ไปที่โรงเรียนสอนการเขียนโปรแกรมอย่าง EPT เพื่อพัฒนาความรู้และทักษะของคุณให้ก้าวหน้ายิ่งขึ้น และปลดล็อกศักยภาพของคุณในการเป็นผู้สร้างสรรค์ผลงานที่น่าตื่นตาตื่นใจบนโลกออนไลน์!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM