คุณสมบัติ display สำคัญต่อ layout เว็บเพจ — กำหนดว่า元素แสดงอย่างไร相对于 元素รอบข้าง ค่าที่ใช้บ่อย: inline, block, inline-block ไวยากรณ์ display: inline; display: block; display: inline-block; ความต่างระหว่าง Inline, Block, Inline-Block Inline แสดง inline — ไม่มี line break ใช้พื้นที่แค่ที่จำเป็น ตั้ง

ไอคอนช่วยแสดงการกระทำที่ผู้ใช้ทำได้ในแอปพลิเคชัน มีไลบรารีไอคอนหลายแห่ง: Font Awesome — https://fontawesome.com/ Flaticon — https://www.flaticon.com/ Material Design Icons — https://material.io/resources/icons/ กระบวนการใช้งานคล้ายกันทุกไลบรารี — เรียนรู้หนึ่งที่แล้วใช้อื่นได้ ใช้ Font Awesome ผ่

CSS Flexbox Model ปรับปรุงจาก Box Model เดิม — ยังมี margin, padding, border, content แต่เพิ่มความยืดหยุ่นจัดเติมพื้นที่ด้วย child elements บทช่วยสอนนี้ช่วยเข้าใจ flexbox module เพื่อทำเว็บ responsive โค้ดเริ่มต้น .parent-container { height: 700px; background: green; width: 700px; padding: 20px; }

บทช่วยสอน CSS นี้ครอบคลุมวิธีจัดกึ่งกลางข้อความและ block elements ทั้งแนวนอนและแนวดิ่ง 1. จัดกึ่งกลางข้อความ (Text Elements) ใช้ text-align: center; บนคอนเทนเนอร์ใหญ่: .div-class { text-align: center; background-color: lightblue; } 2. จัดกึ่งกลาง Block Elements ควบคุมความกว้างคอนเทนเนอร์ แล้วตั้ง

คุณสมบัติ border-image ใน CSS ค่อนข้างซับซ้อน บทความนี้อธิบายว่าคืออะไร วิธีใช้ และข้อควรระวังกับเบราว์เซอร์ต่างๆ โครงสร้าง Border Image (Shorthand) border-image: url(image.jpg) /* source */ 25% / /* slice */ 70px / /* width */ 2px /* outset */ stretch; /* repeat */ ประกอบด้วย 5 longhand properties

Sticky footer ไม่ใช่ fixed footer — Sticky footer คือ footer ติดด้านล่างจอ (เมื่อเนื้อหาไม่เต็มหน้า) หรือติดด้านล่างเนื้อหา (เมื่อเนื้อหาเยอะ) Fixed footer คงที่ด้านล่างจอตลอดเวลาขณะเลื่อน Fixed Footer (ติดจอคงที่) footer { background: black; color: white; position: fixed; bottom: 0; width: 100%; }

<span> เป็น元素 HTML แบบ generic เหมือน <div> แตต่างกันที่: <div> = block element — ใช้จัด layout ใช้พื้นที่เต็มแถว <span> = inline element — ใช้พื้นที่แค่ที่จำเป็น ใช้เน้น/ 강조 ข้อความ ตัวอย่างเปรียบเทียบ <style> .div-style { background: purple; color: blanchedalmond;

คุณสมบัติ CSS object-fit ปรับขนาด元素ให้พอดีกับความกว้าง/สูงของคอนเทนเนอร์ มักใช้กับ background images มี 5 ค่าสำหรับ object-fit (ใช้ภาพประกอบ): contain: รักษาอัตราส่วน ภาพทั้งหมดมองเห็นได้ อาจมีแถบว่าง (letterboxing) ด้านบน/ล่างหรือซ้าย/ขวา cover: รักษาอัตราส่วน แต่เติมเต็มคอนเทนเนอร์ — ภาพอาจถูกตัด

Scrollbar และ User Experience ผู้ใช้คุ้นเคยกับประสบการณ์นำทางเว็บบางอย่าง เช่น โลโก้มุมซ้ายบนนำไปหน้าแรก แต่ถ้าไม่ทำงานอย่างที่คาดหวัง? ถ้า scrollbar มีอยู่แต่วางเมาส์/ลาก trackpad แล้ว ไม่เกิดอะไรขึ้น — นั่นคือ UX ที่แย่ Scrollbar บ่งบอกว่าเลื่อนดูเนื้อหาได้ ไม่เห็น scrollbar ปกติ 2 สיבה: 1) เนื้อห

เรียน CSS พื้นฐานมักเน้น box model, positioning, font-family, font-size แต่ห้องลึกถึงรายละเอียดแบบอักษร ต้องดู font-kerning, letter-spacing, word-spacing — รายละเอียดเล็กๆ ที่ทำให้เว็บดูมืออาชีพ Font Kerning (การปรับระยะคู่ตัวอักษร) Font-kerning คือการกำหนดระยะห่างระหว่างตัวอักษร 2 ตัวที่ต่างกัน ฟอ

มีหลายวิธี crop รูปภาพใน CSS วิธีที่ง่ายและมีประสิทธิภาพที่สุดคือ 3 วิธีนี้: 1. ใช้ object-fit object-fit: cover crop รูปภาพง่ายๆ พร้อมรักษาอัตราส่วน (aspect ratio) ใช้ร่วมกับ object-position ลองตั้ง object-fit: none และ object-position: 50% 50% จะจัดกึ่งกลางคอนเทนเนอร์ ตัวเลขแรก = ระยะจากซ้าย ตัวท

คุณสมบัติ CSS text-indent ทำงานคล้ายการเยื้องบรรทัดแรกของย่อหน้าในเรียงความ — เยื้องบรรทัดแรกของบล็อกข้อความทุกบล็อก ตัวอย่างการใช้งาน (หน่วย px) <!DOCTYPE html> <html lang=en> <head> <style> .example { text-indent: 25px; } </style> </head> <body> <p cla

สามารถเพิ่ม line break ให้元素 HTML โดยไม่ใช้ <br> ได้ โดยใช้ pseudo-elements — ใช้จัดสไตล์ส่วนเฉพาะของ元素 ที่นี่ใช้ ::after เพื่อเพิ่ม line break <!DOCTYPE html> <html lang=en> <head> <style> span { padding: 1px 8px; } span::after { content: \a; white-space: pre; } </

Overlay (เลย์เยอร์ทับ) เป็นเอฟเฟกต์บนเว็บไซต์ที่นำทางผู้ใช้ไปยังการกระทำถัดไป การใช้งานที่ถูกต้องสร้างประสบการณ์ผู้ใช้ดี ทำให้ผู้ใช้อยู่บนนานขึ้น มีหลายวิธีสร้าง overlay — ไม่มีวิธีเดียวที่ถูกต้อง ขึ้นอยู่กับความต้องการของเว็บไซต์ คู่มือนี้เน้นใช้ HTML และ CSS เพียงอย่างเดียว (ไม่ใช้ JavaScript) เพื

เมื่อเริ่มเรียน HTML และ CSS ใช้เวลาพอสมควรเข้าใจความต่างระหว่าง margin และ padding ใน box model บทความนี้จะแบ่งปันวิธีที่ช่วยให้แยกแยะได้ชัดเจน CSS Box Model: การเข้าใจโครงสร้าง คิด box model — คอนเทนเนอร์ที่ใส่คอมโพเนนต์เว็บไซต์ — เหมือนภาพในกรอบรูป: Content (เนื้อหา): ภาพเอง — สิ่งที่ต้องการใส่

กฎ !important ใช้เพื่อลบล้าง (override) การจัดรูปแบบของเว็บเพจ ตรงๆบอกเลยว่ามีเหตุผล ไม่ควรใช้ !important มากกว่าเหตุผลที่ควรใช้ มาเข้าใจการใช้งานและทำไมควรใช้ขั้นต่ำ 1. ลบล้าง User-agent Stylesheets (เช่น Bootstrap) เมื่อเขียน CSS บางครั้งต้องลบล้าง stylesheet ที่มีมาให้ เช่น ใช้ CSS framework เช่

ในยุคของ CSS Flexbox และ CSS Grid เราไม่ค่อยพิจารณา CSS Clearfix มากนัก เพราะ Flexbox และ Grid จัดการตำแหน่ง元素ได้ดีกว่าและง่ายกว่าการใช้ floats อย่างไรก็ตาม เราควรรู้จัก clearfix สำหรับกรณีที่ทำงานกับโค้ดเก่า (legacy code) ที่ใช้ floats และไม่มีเวลาหรืองบประมาณเปลี่ยนไปใช้วิธีสมัยใหม่ บทความนี้จะสำร

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

การจัดรูปแบบข้อความบนเพจเว็บเป็นส่วนสำคัญของการออกแบบเว็บ ตัวอย่างเช่น คุณอาจต้องการให้ส่วนหัวแสดงด้วยแบบอักษรเฉพาะ หรือให้ข้อความทั้งหมดบนหน้าใช้แบบอักษร serif ที่นี่คือที่มาของคุณสมบัติ CSS font-family คุณสมบัตินี้ช่วยให้คุณระบุแบบอักษรหนึ่งหรือหลายแบบเพื่อใช้จัดรูปแบบข้อความบนเว็บเพจ บทช่วยสอนนี้

เมื่อออกแบบเว็บ มักมีปุ่มที่ต้องการลักษณะเฉพาะ เช่น พื้นหลังสีต่างจากองค์ประกอบอื่น เพื่อดึงดูดสายตา ด้วย CSS สร้าง styled buttons ได้ เปลี่ยนสีพื้นหลัง, สีข้อความ, ขนาดฟอนต์, ขอบ, ความกว้าง/สูง, และอื่นๆ บทเรียนนี้อธิบายการใช้ CSS properties จัดสไตล์ HTML button พร้อมตัวอย่าง จนจบคุณจะจัดสไตล์ปุ่