บทนำ คุณสมบัติ list-style ใน CSS เป็น **Shorthand Property** (คุณสมบัติย่อ) ที่รวมคุณสมบัติของรายการ (List) 3 อย่างไว้ในบรรทัดเดียว: list-style-type - รูปแบบ Marker (disc, circle, square, decimal, v.v.) list-style-position - ตำแหน่ง Marker (inside หรือ outside) list-style-image - ใช้รูป

บทนำ คุณสมบัติ marker-offset ใน CSS ใช้สำหรับระบุระยะห่างระหว่าง **Marker** (สัญลักษณ์รายการ เช่น จุด, ตัวเลข) กับ **ข้อความ** ของรายการนั้นๆ ใน List (<ul>, <ol>) ตัวอย่างการใช้งาน <html> <head> </head> <body> <ul style=list-style: inside s

ภาพรวม HTML5 Attribute placeholder ให้คำแนะนำใน Input Field การเปลี่ยนสี Placeholder ต้องใช้ Pseudo-elements แบบ Vendor-specific Syntax พื้นฐาน /* WebKit/Blink (Chrome, Edge, Safari, Opera) */ ::-webkit-input-placeholder { color: #7F0D10; } /* Mozilla Firefox 4-18 */ :-moz-placeholder { color: #7

ภาพรวม มีหลายวิธีจัด <div> ให้อยู่กึ่งกลางแนวนอน (Horizontal Centering) และ/หรือแนวตั้ง (Vertical Centering) ใน CSS วิธีที่ 1: Margin Auto (Horizontal Only) - Classic /* CSS */ .center-div { width: 50%; /* ต้องมี Width */ margin: 0 auto; /* Top/Bottom 0, Left/Right Au

ภาพรวม SAP BSP (Business Server Pages) แอปพลิเคชันเก่ามักไม่มี DOCTYPE Declaration ทำให้ Browser 進入 Quirks Mode ทำให้ CSS3 ไม่ทำงานเต็มที่ วิธีแก้คือการเพิ่ม DOCTYPE หรือใช้ Library ที่รองรับ Quirks Mode ปัญหา: Quirks Mode ไม่มี DOCTYPE → Browser ใช้ Rendering Mode แบบเก่า (IE5/Quirks) CSS

ภาพรวม เมื่อต้องการกำหนด CSS Style ให้ Row หรือ Cell ในตารางแบบ Dynamic (ขึ้นกับข้อมูล/เงื่อนไข) สามารถทำได้หลายวิธี ขึ้นอยู่กับ Framework ที่ใช้ (SAPUI5, HTML ธรรมดา, React, Vue, etc.) วิธีที่ 1: CSS Class แบบ Static + Conditional Class (General) /* CSS */ .sapMListTbl .highlight-row { backgr

ภาพรวม ใช้ CSS Media Query @media print เพื่อกำหนด Style ที่มีผลเฉพาะตอนพิมพ์ (Print) เท่านั้น วิธีที่ 1: ใช้ Class .noprint /* CSS */ @media print { .noprint { display: none; /* หรือ visibility: hidden; */ } } HTML <div class=noprint> เนื้อหานี้จะไม่แสดงตอนพิมพ์ &

เมื่อจัดสไตล์เลย์เอาต์เว็บไซต์ระดับซับซ้อน (เกินกว่าเลย์เอาต์บทความง่ายๆ) สิ่งต่างๆ จะกลายเป็นความวุ่นวายอย่างรวดเร็ว ซึ่งมักนำไปสู่ปัญหาเลย์เอาต์หลากหลาย ปัญหาเลย์เอาต์ CSS ที่พบบ่อยที่สุด ได้แก่: อีเลเมนต์ทับซ้อนกัน (มักเป็นปัญหา overflow) อีเลเมนต์หดห่อ (มักเป็นปัญหา margin) ช่องว่างสีขาวเกิน (

เมื่อคุณผ่านพื้นฐานของ CSS แล้ว การเขียนสไตล์จะกลายเป็นการแก้ปริศนาที่สนุกสนานและท้าทาย คุณเริ่มเห็นรูปแบบ (patterns) เข้าใจว่า browser rendering ทำงานอย่างไร และสามารถสร้างเลย์เอาต์ซับซ้อนได้โดยไม่ต้องพึ่งพา framework หนักๆ ระดับนี้คุณจะเริ่ม: ใช้ Custom Properties (CSS Variables) จัดการธีมและค่า

คำถามเกี่ยวกับ CSS ที่พบบ่อยที่สุดคือ background และ background-color แตกต่างกันอย่างไร? สาเหตุที่ทำให้สับสนคือมักเห็นนักพัฒนาใช้ background-color และ background สลับกันใช้เมื่อต้องการกำหนดสีพื้นหลังให้กับอีเลเมนต์ แต่จริงๆ แล้วทั้งสองไม่ได้เหมือนกัน คุณสมบัติ background (โดยไม่มี -color) สามารถ ใช

Quick tutorial: เรียนรู้หมุนรูปภาพต่อเนื่องด้วย CSS animation property HTML markup พร้อม image และ attributes: <img src=[InstallDir_ChannelDir]{$UploadDir}/202203/2022033109325250.png class=rotate linear infinite width=150 height=150 /> Image ควรแสดงแบบนี้: Image element มี 3 classes: rotate,

Center elements ด้วย CSS ดูยากกว่าที่ควรจะเป็น โดยเฉพาะต้อง center ทั้งแนวนอนและแนวตั้ง วันนี้แสดงวิธีทำ ทั้ง modern CSS และ older (แตะยัง relevant) techniques Center Text Elements Horizontally Center text แนวนอนตรงไปตรงมา ใช้ text-align property ค่า center h1 { text-align: center; } ทำงานกับ text e

วิธีใช้ comments ใน CSS เขียน comments ภายใน CSS stylesheets เพื่อ document (อธิบาย) code สั้นๆ ให้ตัวเองหรือทีม Syntax/format เขียน comments ใน CSS: /* This is a CSS comment */ Format /* */ เป็น 唯一 วิธีเขียน comments ใน CSS ใช้ทั้ง single และ multi-line comments /* This is a multi-line CSS comment.

เรียนรู้ป้องกัน CSS Flexbox ยืดรูปภาพแนวนอน Flexbox มี default behavior แปลก: images stretched horizontally เต็ม parent container width ถ้ามี parent element (flex container) flex-direction: column และ child element (flex item) เป็นรูปภาพ รูปจะ maintain natural height แต่ width stretched กว้างเท่า pa

Drop cap = ตัวอักษรแรกใน text block มักใช้ใน lead paragraph ของ document เช่น paragraph นี้ Drop caps styled ต่างจาก text อื่นเพื่อ stand out Drop cap = powerful visual marker ที่ typographers/visual designers ใช้ดึง attention ไปที่พวกเขาอยากให้ ไม่มี one way to design drop caps Common approach: ใช้

ใน Typography มี emphasis techniques หลายอย่าง italic และ bold เป็น common สุด Italic และ bold เป็น font variations ต่างๆ ของ original typeface design มาดูว่าเมื่อไหร่ควรใช้ italic หรือ bold และควรใช้ทั้งคู่ใน document เดียวกันไหม Text ในบทความนี้ใช้ typeface Alegreya regular font-weight CSS default

Type scale = ชุด font sizes ที่คัดสรรมาเพื่อ represent text elements ต่างๆ เพื่อสร้าง balanced harmonious composition ใน products การใช้ font sizes เดียวกันจาก type scale ของตัวเอง consistently จะ instill uniformity ใน design อัตโนมัติ และหลีกเลี่ยง product ที่ดู scattered ตรง hierarchy และ prioriti

เบราว์เซอร์ทำให้ CSS เปลี่ยนยาก historically เนื่องจาก inconsistencies มากมาย โดยเฉพาะ older browsers หรือ brand new experimental CSS properties วิธีแก้: apply prefixes บน CSS properties บางอย่าง ให้ UI ลุค/ทำงานเหมือนกันทุกเบราว์เซอร์ ตัวอย่างดี: CSS flexbox property ต้องการ 4 prefixes เพื่อทำงานทุ

Mobile-first design = สร้างเว็บไซต์สำหรับมือถือก่อน แล้วใช้ CSS media queries ควบคุมลุคบนจอใหญ่กว่า tablet ถึง desktop กล่าวคือ ใช้ media queries ทำให้ responsive (adaptive ต่อ screen sizes ต่างๆ) ใช้ media queries เรียกว่า breakpoints ถ้าตัดสินใจ layout เปลี่ยนจาก mobile เป็น tablet ที่ screen widt

CSS ใช้ numeric scale กำหนด power ของ selector Power = selector ไหนแรงที่สุด หรือ selector ไหนมี specificity สูงสุด Selector ที่มี specificity number สูงสุด จะ dictate ว่า HTML element long อย่างไร ไม่ว่า styles อื่นจาก weaker selectors จะเป็นยังไง มี button element หลายวิธี apply styles ใน CSS 3 co