เรียนรู้พื้นฐานการใช้ CSS เพื่อจัดรูปแบบและตกแต่งเว็บไซต์ของคุณ ตั้งแต่การเลือกองค์ประกอบด้วย CSS Selector, การจัดการลำดับความสำคัญของสไตล์ (Specificity), ไปจนถึงการปรับแต่งสี, ตัวอักษร, ขนาด, ตาราง, ฟอร์ม และการสร้างลูกเล่นอย่าง Tooltip เพื่อให้เว็บไซต์ของคุณสวยงามและใช้งานง่าย
เนื้อหาภาษาไทย / Thai content
บทนี้เป็นการแนะนำ CSS Selector ซึ่งเป็นเครื่องมือสำคัญในการเลือก HTML Element เพื่อปรับแต่งสไตล์ โดยเน้น Selector พื้นฐาน 3 ประเภท ได้แก่ Element Selector (เลือ...
บทความนี้กล่าวถึง **Specificity** ซึ่งเป็นกลไกสำคัญใน CSS ที่ใช้ตัดสินว่า style ใดจะถูกนำไปใช้เมื่อมีหลาย style ขัดแย้งกัน โดย Specificity คำนวณจาก inline style...
บทความนี้อธิบายถึงวิธีการใช้งาน CSS สามรูปแบบหลักๆ ได้แก่ Inline CSS, Internal CSS และ External CSS โดยแต่ละรูปแบบมีข้อดีข้อเสียที่แตกต่างกัน และเหมาะกับการใช้ง...
บทความนี้อธิบายถึง CSS Reset และ Normalize.css ซึ่งเป็นเครื่องมือที่ใช้เพื่อลดความแตกต่างของ styles เริ่มต้นในแต่ละ browser โดย CSS Reset จะ reset styles ทั้งหม...
บทนี้แนะนำแนวคิด CSS Box Model ซึ่งเป็นพื้นฐานสำคัญของการจัด Layout ใน CSS โดยอธิบายว่าทุก Element เปรียบเสมือนกล่องที่ประกอบด้วย Content, Padding, Border และ M...
บทความนี้เป็นการสอนพื้นฐานการปรับแต่ง List (ทั้ง unordered และ ordered list) ด้วย CSS โดยเน้นที่การใช้ properties อย่าง `list-style-type`, `list-style-position`...
บทนี้เน้นการกำหนดขนาดของ Element ใน CSS ด้วย Properties `width` และ `height` โดยอธิบายถึงความสำคัญของการกำหนดขนาดที่เหมาะสม, หน่วยวัดต่างๆ ที่ใช้ (px, em, rem,...
บทความนี้อธิบายวิธีการใช้ CSS เพื่อปรับแต่ง Table ใน HTML ให้สวยงามและอ่านง่าย โดยเน้นที่การจัดการเส้นขอบ (border-collapse), การเพิ่มช่องว่าง (padding และ borde...
บทนี้ได้อธิบายถึงวิธีการจัดการสีและพื้นหลังใน CSS ซึ่งเป็นสิ่งสำคัญในการออกแบบเว็บไซต์ให้น่าสนใจ โดยครอบคลุมถึงการกำหนดสีให้กับตัวอักษรและพื้นหลังด้วยวิธีต่างๆ...
บทความนี้อธิบายถึงวิธีการใช้ CSS เพื่อปรับแต่งฟอร์ม HTML ให้สวยงามและใช้งานง่าย โดยเน้นที่การจัดวาง Label และ Input ในรูปแบบต่างๆ, การปรับแต่งรูปลักษณ์ของปุ่ม แ...
บทนี้เน้นการปรับแต่งตัวอักษรบนเว็บไซต์ด้วย CSS โดยครอบคลุมคุณสมบัติหลักๆ ได้แก่ `font-family` (การเลือกชนิดฟอนต์ รวมถึงการใช้ Google Fonts), `font-size` (การกำห...
บทความนี้อธิบายวิธีการสร้าง Tooltip อย่างง่ายด้วย CSS โดยใช้คุณสมบัติ `position`, `pseudo-elements` (::before และ ::after) และการจัดการ `visibility` เพื่อแสดงข้...
บทนี้กล่าวถึงการจัดรูปแบบข้อความด้วย CSS โดยเน้นที่ `text-align` สำหรับจัดตำแหน่งข้อความ (ซ้าย กลาง ขวา เต็มความกว้าง), `line-height` สำหรับกำหนดความสูงของบรรทั...
บทความนี้อธิบายวิธีการสร้าง Dropdown Menu อย่างง่ายด้วย CSS โดยใช้ HTML เป็นโครงสร้าง และ CSS ในการจัดรูปแบบลักษณะที่ปรากฏและการแสดงผลเมื่อมีการ Hover เมาส์ บทค...
บทความนี้อธิบายคุณสมบัติ `display` ใน CSS ซึ่งควบคุมการแสดงผลขององค์ประกอบ HTML โดยเน้นที่ค่า `block`, `inline` และ `inline-block` ซึ่งมีลักษณะการแสดงผลและความส...
บทความนี้อธิบายวิธีการสร้าง Modal/Popup อย่างง่ายด้วย CSS โดยใช้คุณสมบัติ `position: fixed`, `z-index`, และ `visibility` ควบคู่ไปกับ JavaScript เล็กน้อยเพื่อควบ...
บทนี้เป็นการแนะนำ CSS Positioning ซึ่งเป็นเครื่องมือสำคัญในการจัดวาง Element บนหน้าเว็บอย่างแม่นยำ โดยจะกล่าวถึงค่าต่างๆ ของ `position` ได้แก่ `static`, `relati...
บทนี้สอนวิธีการสร้าง Tab Navigation แบบพื้นฐานด้วย HTML และ CSS โดยใช้ `radio buttons` และ `:checked` pseudo-class เพื่อควบคุมการแสดงผลของเนื้อหาแต่ละ Tab โดยไม...
บทนี้ได้แนะนำคุณสมบัติ `float` ใน CSS ซึ่งใช้จัดวาง Element ให้ลอยไปทางซ้ายหรือขวา ทำให้ Element อื่นไหลรอบๆ ได้ โดยเน้นการใช้งาน `float: left` และ `float: righ...
บทนี้ได้แนะนำ CSS Filters ซึ่งเป็นเครื่องมือที่ช่วยให้เราปรับแต่งภาพและองค์ประกอบต่างๆ ในเว็บไซต์ได้ง่ายโดยไม่ต้องใช้โปรแกรมแต่งภาพ โดยสามารถใช้ฟังก์ชันต่างๆ เช...
ในบทที่แล้ว เราได้เรียนรู้การใช้ `float` จัด Layout ซึ่งมีข้อจำกัดหลายอย่าง บทนี้จึงนำเสนอ Flexbox ซึ่งเป็นเครื่องมือที่ยืดหยุ่นกว่าในการจัด Layout โดยเริ่มต้นจ...
บทความนี้แนะนำ CSS Blend Modes ซึ่งเป็นคุณสมบัติที่ใช้ผสมผสานสีขององค์ประกอบต่างๆ ในเว็บไซต์ ทำให้เกิดเอฟเฟกต์ที่น่าสนใจ โดยมี `background-blend-mode` สำหรับผสม...
บทนี้เป็นการแนะนำ CSS Grid ซึ่งเป็นระบบ Layout แบบสองมิติที่ช่วยให้ควบคุมการจัดเรียงองค์ประกอบบนหน้าเว็บได้อย่างละเอียด โดยเริ่มต้นจากการกำหนด `display: grid` ใ...
บทความนี้แนะนำเทคนิคการสร้างรูปทรงต่างๆ ด้วย CSS โดยไม่ต้องพึ่งรูปภาพ ซึ่งช่วยเพิ่มประสิทธิภาพและความยืดหยุ่นให้กับเว็บไซต์ โดยเน้น 3 เทคนิคหลักคือ การใช้ Borde...
บทนี้แนะนำ Media Queries ซึ่งเป็นเครื่องมือใน CSS3 ที่ช่วยให้ปรับแต่งสไตล์ของเว็บไซต์ให้เหมาะสมกับขนาดหน้าจอและประเภทของอุปกรณ์ต่างๆ ทำให้เว็บไซต์รองรับ Respons...
บทความนี้แนะนำการใช้งาน CSS Counters ซึ่งเป็นตัวแปรใน CSS ที่สามารถสร้างเลขลำดับอัตโนมัติได้โดยไม่ต้องใช้ JavaScript โดยเน้นที่การทำความเข้าใจ 3 properties หลัก...
บทความนี้แนะนำการใช้งาน Pseudo-classes และ Pseudo-elements ใน CSS เพื่อเพิ่มลูกเล่นและความน่าสนใจให้กับเว็บไซต์ โดย Pseudo-classes ช่วยเลือกองค์ประกอบ HTML ตามส...
บทความนี้อธิบายวิธีการสร้าง Parallax Scrolling Effect ด้วย CSS สองวิธีหลักๆ คือ การใช้ `background-attachment: fixed` ซึ่งง่ายแต่ปรับแต่งได้จำกัด และการใช้ `tra...
บทนี้เป็นการแนะนำการสร้าง Animation แบบง่ายๆ ด้วย CSS Transitions ซึ่งเป็นคุณสมบัติที่ช่วยให้การเปลี่ยนค่า CSS properties เป็นไปอย่างราบรื่นโดยกำหนดระยะเวลาและค...
บทความนี้แนะนำ CSS Containment ซึ่งเป็นคุณสมบัติที่ช่วยควบคุมการ Render ของ Browser เพื่อเพิ่มประสิทธิภาพเว็บไซต์ โดยการจำกัดขอบเขตการ Render ของแต่ละองค์ประกอบ...
บทนี้กล่าวถึงการสร้าง Animation ที่ซับซ้อนด้วย CSS Keyframes ซึ่งเป็นวิธีการที่เหนือกว่า CSS Transitions ในด้านการควบคุมการเปลี่ยนแปลงขององค์ประกอบอย่างละเอียด...
บทความนี้กล่าวถึงความท้าทายในการสร้างเว็บไซต์ที่รองรับภาษาที่เขียนจากขวาไปซ้าย (RTL) โดยเฉพาะปัญหาที่เกิดจากการใช้ CSS Properties แบบ Physical ที่อ้างอิงทิศทางต...
บทนี้แนะนำ CSS Variables หรือ Custom Properties ซึ่งเป็นเครื่องมือที่ช่วยให้กำหนดค่า CSS ไว้ที่เดียวและนำไปใช้ซ้ำได้ ทำให้โค้ดมีความยืดหยุ่นและง่ายต่อการบำรุงรั...
บทความนี้กล่าวถึงการสร้าง Animation ที่ซับซ้อนโดยใช้ CSS Animations ร่วมกับ JavaScript เพื่อให้สามารถควบคุม Animation ได้อย่างละเอียดและตอบสนองต่อ User Interact...
บทความนี้แนะนำ CSS Preprocessors โดยเน้นที่ Sass/SCSS ซึ่งเป็นเครื่องมือที่ช่วยให้การเขียน CSS มีประสิทธิภาพและเป็นระบบมากขึ้น ด้วยฟีเจอร์อย่าง Variables, Nesti...
บทความนี้แนะนำ CSS Houdini ซึ่งเป็นชุด API ที่ช่วยให้เราสามารถขยายความสามารถของ CSS ได้อย่างมาก โดยเฉพาะ Paint API สำหรับสร้าง Background และ Border ที่กำหนดเอง...
บทความนี้แนะนำ BEM Methodology (Block, Element, Modifier) ซึ่งเป็นแนวทางการตั้งชื่อ Class ใน CSS เพื่อให้โค้ดมีความชัดเจน เป็นระบบ นำกลับมาใช้ใหม่ และบำรุงรักษา...
บทความนี้แนะนำแนวทางการเขียน CSS ที่คำนึงถึง Accessibility เพื่อให้เว็บไซต์ใช้งานได้ครอบคลุม โดยเน้นที่การเลือกใช้สีที่ตัดกันอย่างเหมาะสมตามมาตรฐาน WCAG และการใ...
บทความนี้แนะนำ DevTools ซึ่งเป็นเครื่องมือสำคัญสำหรับนักพัฒนา CSS ที่ช่วยให้สามารถตรวจสอบโครงสร้าง HTML และ CSS ("Inspect Element") แก้ไข CSS แบบเรียลไทม์ ("Edi...
บทความนี้เน้นเรื่องการปรับปรุงประสิทธิภาพ (Performance) ของ CSS เพื่อให้เว็บไซต์โหลดเร็วขึ้น ซึ่งเป็นสิ่งสำคัญต่อประสบการณ์ผู้ใช้งาน โดยแนะนำเทคนิคต่างๆ เช่น กา...
