CSS :focus pseudo-class เลือก element ใน focus state เกิดขึ้นเมื่อคลิก element หรือ select ด้วย tab key :focus วางหลังชื่อ element ที่ต้องการ select อาจต้องการ apply style ให้ element เฉพาะตอนที่มี focus บน web page เช่น ใส่ border ให้ form field เมื่อ user คลิก นี่คือที่มาของ CSS :focus pseudo-clas

Browser ใช้ CSS box model กำหนดว่า element ควรปรากฏบน web page ยังไง Box model แสดงขนาด element และ border, padding, margins สามารถ style แต่ละส่วนแยกกันได้ ทุก element ถูกล้อมรอบด้วย box การเข้าใจกลไก boxes เป็นสิ่งจำเป็นสำหรับการจัดตำแหน่ง items บน web page ให้ตรงใจ CSS box model ใช้กำหนดว่า box ค

CSS Tabs เหมาะสำหรับแสดงข้อมูลที่เกี่ยวข้องในที่เดียว navigate ง่าย ดูเหมือน tabbed dividers ใน recipe box หรือ binder ตัวอย่างเว็บไซต์ที่ใช้ tabbed navigation: Southwest Airlines ใช้ tabs ให้นำทางระหว่าง check-in, book flight, เพิ่ม hotel Enterprise ใช้ tabs สำหรับ navigation เลือก rent หรือ buy แ

CSS Specificity ไม่ใช่แค่ tongue twister (ลองพูด 3 ครั้งดู!) แต่ยังเป็น mind bender อีกด้วย เป็นหนึ่งใน concepts ที่ยากที่สุดใน CSS ในบทความนี้จะครอบคลุมว่า specificity หมายถึงอะไร คำนวณยังไง และ ranking ของ selectors กำหนด style ที่ render บนหน้าได้อย่างไร อย่ากลัว! คุณจะกลายเป็น specificity expert

Cursors มาตั้งแต่ The Mother of All Demos เมื่อ Douglas Englebart นำเสนอ mouse และ GUI ในช่วงปลายศตวรรษที่ 6 Mouse cursor ช่วยให้เราเห็นตำแหน่งบนหน้าจอ เป็น UX tool ที่ดีในการแสดงว่าทำอะไรได้บนจุดใดจุดหนึ่ง หรือคอมพิวเตอร์กำลังทำอะไร บทความนี้จะเล่าเกี่ยวกับการใช้ mouse cursor บน webpage เพื่อปรับปร

Web developers ใช้ CSS background-position property เมื่อต้องการปรับ starting position ของ background image บทความนี้จะมาดู background-position property และการปรับเพื่อเปลี่ยนตำแหน่งภาพ Syntax Syntax ของ background-position property ภายใน CSS selector: background-position: value มีหลายวิธีประกาศ val

หนึ่งในสิ่งที่ developers ต้องทำคือหาวิธีแก้ปัญหาเมื่อได้ project ใหม่ เวลาทำ responsive websites เราจะเลือก بين CSS Grid และ CSS Flexbox สำหรับ layout บทความนี้พยายามแยกความแตกต่างระหว่าง Grid และ Flexbox และเมื่อไหร่ควรเลือกอันไหน Flexbox – ภาพรวมสั้น CSS Flexbox คือ responsive box model แบบหนึ่ง

บางครั้งเมื่อเขียน CSS เราต้องการ target element เฉพาะ สมมติมี HTML document เต็มไปด้วย <div> และ <span> tags แต่ต้องการ style เฉพาะตัวแรกของแต่ละ type เราสามารถทำได้ด้วย pseudo-class ชื่อ :first-of-type Pseudo-class คือวิธีให้ CSS selector มี styles เฉพาะต่างจาก styles ตัวเดิม ขึ้นอยู่ก

บางครั้งเมื่อสร้างฟอร์ม เราต้องใช้ checkbox และ radio button inputs เพื่อเก็บ preferences, ยอมรับ terms หรือ demographic data HTML input elements เช่น checkboxes หรือ radio buttons มี default appearance หากต้องการเปลี่ยนรูปลักษณ์ สามารถใช้ CSS ปรับแต่งลักษณะตามต้องการ บทความนี้จะแสดงตัวอย่างการปรับแ

Bootstrap Cards Bootstrap card เป็นหนึ่งใน components ยอดนิยมที่สุด และมีเหตุผลที่ชัดเจน มันทำหน้าที่เป็น flexible media container พร้อม preset styling และ formatting ที่ดี Card content สามารถเป็นอะไรก็ได้: text, images, links, buttons, lists และยังสามารถมี header และ footer ได้ พื้นฐาน Bootstrap Ca

เมื่อพูดถึงการทำให้ UI โดดเด่น ไม่มีอะไรเทียบได้กับการเลือก color palette ที่เหมาะสม ด้วยบทเรียนนี้ คุณจะได้เรียนรู้ว่าการกำหนดสีให้กับ elements, fonts และทุกอย่างใน UI นั้นง่ายเพียงใด ในการเพิ่มสี CSS มี color data type ซึ่งแสดงสีในรูปแบบมาตรฐาน Red, Green, Blue (RGB) รูปแบบการเขียน color มีหลายวิธ

วันนี้เราจะลองจัดตำแหน่ง Susuwatari ให้อยู่กึ่งกลาง สิ่งมีชีวิตเล็กๆ นี้ที่มักเรียกว่า เปיח ชอบเคลื่อนที่อยู่ตลอดเวลา จึงต้องทำให้มันอยู่นิ่งๆ และอยู่กึ่งกลางเพื่อถ่ายรูปได้ เริ่มกันเลย! หมายเหตุ: ขณะอ่าน โปรดอ้างอิงจาก repository ของบล็อกนี้ เพิ่มภาพลงใน HTML ความต้องการในการจัดภาพให้อยู่กึ่งกลางเป

คุณสมบัติ font-size กำหนดขนาดข้อความบนเว็บเพจ ใช้กับ class, ID, หรือ元素ที่มีข้อความ รับค่า px, em, rem, vw, vh, keywords CSS Font-Size การจัดรูปแบบขนาดฟอนต์สำคัญต่อการออกแบบเว็บ ข้อความไม่มีสไตล์ ทำให้อ่านยาก ประสบการณ์ไม่ดี ไวยากรณ์: font-size: sizeValue; วิธีระบุขนาด (ครอบคลุมในบทความ): Pixels (p

ออกแบบ layout ด้วย CSS มักจัดตำแหน่ง元素 ซ้าย/ขวา บน/ล่าง z-index ให้เลื่อน元素บน แกน Z (มิติที่ 3) แบบซ้อนทับ (stacking) ค่าของ z-index z-index: auto; z-index: -1; z-index: 9999; รับ auto หรือ integer (ลบ/บวกได้) เงื่อนไขสำคัญ: ต้องมี position เป็น relative, absolute หรือ fixed ถ้าไม่มี position จะเหม

คุณสมบัติ font-style จัดสไตล์ฟอนต์เพื่อเน้นข้อความ ไวยากรณ์และตัวเลือก font-style: normal; font-style: italic; font-style: oblique 30deg; font-style: oblique; /* global keywords */ font-style: inherit; font-style: initial; font-style: unset; normal: ฟอนต์ปกติใน font-family ที่ระบุ italic: เอียง (i

คุณสมบัติ background-image เปลี่ยนพื้นหลังเว็บไซต์เป็นภาพ ใช้ background-image: url(url_of_image) รองรับหลายภาพทับกันได้ CSS Background Image background-image กำหนดภาพเป็นพื้นหลังของ元素 — มักใช้กับหน้าทั้งเพจหรือส่วนหนึ่ง ไวยากรณ์: background-image: url(imageUrl); ตัวอย่าง: แบนเนอร์คาเฟ่ HTML: <

มาสร้าง CSS Shapes สนุกๆ กัน! ทุก shape ห่อหุ้มใน <div> 1. สี่เหลี่ยมผืนผ้าและสี่เหลี่ยมจัตุรัส Div เป็นสี่เหลี่ยมโดยค่าเริ่มต้น — กำหนด width/height: .rectangle { width: 2rem; height: 4rem; background-color: violet; } .square { width: 5rem; height: 5rem; background-color: lime; } Reminder: ใ

สร้างฟอร์มที่ 독특และน่าสนใจเพื่อ UX ที่ดี ใช้ CSS input type selectors จัดสไตล์ ไวยากรณ์และตัวอย่าง ไวยากรณ์พื้นฐาน: input[type=type] { /* styles */ } จัดสไตล์ Text Inputs input, label { font-size: 2rem; padding: 1rem; } input[type=text] { border: 0; border-bottom: 0.3rem solid mediumspringgreen; }

CSS selectors ให้ developer จัดสไตล์元素เฉพาะบนเว็บเพจ ต้องการเลือก元素ที่มี attribute เฉพาะ? ใช้ CSS attribute selector บทช่วยสอนนี้อธิบายการใช้ attribute selector จนเป็น expert HTML Attributes Attributes กำหนดคุณสมบัติเพิ่มเติมของ元素 เช่น height ของรูป, title ของ元素 เขียนแบบ name/value pair: name=value

เขียน CSS 时 อาจต้องการเปลี่ยนการจัดแนวตั้งของ元素 คุณสมบัติ vertical-align และค่า property values ต่างๆ จะช่วยแก้ไขได้ ไวยากรณ์ vertical-align: property-value; ค่าที่เป็นไปได้: baseline, length, sub, super, top, text-top, middle, bottom, text-bottom, initial, inherit คำอธิบายแต่ละค่า baseline (defa