สูตรโกงการใช้ CSS | นครโค้ด สอนพัฒนาโปรแกรม

🧩 VSCode Extensions

ลิงก์	เกี่ยวกับ
IntelliSense for CSS	Autocomplete ของชื่อ Class
Colorize	แสดงสีของโค้ด CSS

🔗 ลิงก์ที่น่าสนใจ

ลิงก์	เกี่ยวกับ
CSSReference.io	เว็บไซต์ HTML, CSS
MDN	แหล่งความรู้พัฒนาเว็บโดย Mozilla (แนะนำ)
web.dev	แหล่งความรู้พัฒนาเว็บโดย Google
W3Schools	แหล่งความรู้แบบอ่านเข้าใจง่าย
Awesome CSS	รวมรายการที่น่าสนใจ
CSS Gradient	สร้างสีพื้นหลังแบบ Gradient
Web Code Tools	Generator สำหรับ CSS ต่างๆ
CSS Tricks (Flexbox)	คู่มือการใช้ CSS Flexbox
CSS Tricks (Grid)	คู่มือการใช้ CSS Grid

🏗️ CSS Structure

selector {
  /* Declaration */
  property-name: property-value;
}

<div style="property-name: property-value;"></div>

📝 วิธีการใช้งาน CSS รูปแบบต่างๆ

<!-- Inline -->
<div style="color: red; font-size: 2em;">Hello</div>

<!-- Internal -->
<head>
  <style>
    h1 {
      color: red;
      font-size: 2em;
    }
  </style>
</head>

<!-- External -->
<head>
  <link rel="stylesheet" href="/css/styles.css">
</head>

🎯 CSS Selector

Selector	ความหมาย
`*`	เลือกทุก Element
`h1`	เลือก Element `<h1>`
`.select-me`	เลือก Element ที่มี Attribute `<element class="select-me">`
`#select-me`	เลือก Element ที่มี Attribute `<element id="select-me">`
`[attr="value"]`	เลือก Element ที่มี Attribute `<element attr="value">`
`h1.title.text-blue`	`<h1 class="title text-blue"></h1>`
`input#title.text-red.bg-blue[type="email"]`	`<input id="title" class="text-red bg-blue" type="email">`
`#main .title` (เว้นวรรค)	`<div id="main"> <h1 class="title">✅</h1> <div> <p class="title">✅</p> </div> </div>`
`#main > .title`	`<div id="main"> <h1 class="title">✅</h1> <div> <p class="title">❌</p> </div> </div>`
`p + p`	`<div> <p>❌</p> <p>✅</p> <p>✅</p> </div>`
`#content { background-color: black; h1 { color: red; } .message { color: green; } }`	`<h1>❌ Nothing changes</h1> <div class="message">❌ Nothing changes</div> <div id="content"> <h1>✅ Text Red + Background Black</h1> <div class="message">✅ Text Green + Background Black</div> </div>`

💯 CSS Specificity Score

Selector	Score
`*`	0
`h1`	1
`.my-class`	10
`[target="_blank"]`	10
`#my-id`	100
`h1.my-class`	11
`h1#my-id`	101
`!important`	10,000

CSS Pseudo-classes

Pseudo-classes	ความหมาย
`:hover`	เมื่อเมาส์อยู่บน Element
`:active`	เมื่อมีการคลิก Element
`:focus`	เมื่อมีการ Focus Element
`:focus-within`	เมื่อมีการ Focus อยู่ใน Element ทั้งหมด
`:link`	เมื่อยังไม่เคยเข้าหน้าเว็บนี้
`:visited`	เมื่อมีการเปิดหน้าเว็บนี้แล้ว
`:target`	เมื่อถูกเลือกบน URL Fragment
`:first-child`	เมื่อ Element คือ Child แรก
`:last-child`	เมื่อ Element คือ Child สุดท้าย
`:only-child`	เมื่อ Element คือ Child เดียว
`:nth-child()`	เมื่อ Element คือ Child ที่มี Index ตามที่กําหนด
`:placeholder-shown`	เมื่อมี Placeholder แสดงอยู่
`:autofill`	เมื่อถูก Autofill
`:disabled`	เมื่อ Element ถูก Disable
`:enabled`	เมื่อ Element ถูก Enable
`:read-only`	เมื่อ Element ถูก Readonly
`:required`	เมื่อ Input Required
`:optional`	เมื่อ Input Optional
`:checked`	เมื่อมีการ Checked
`:default`	เมื่อ Check ถูกทำเป็นค่าเริ่มต้น
`:indeterminate`	เมื่อ Check ยังไม่ได้ถูกเลือก
`:valid`	เมื่อข้อมูลถูกต้อง
`:invalid`	เมื่อข้อมูลไม่ถูกต้อง
`:in-range`	เมื่อข้อมูลอยู่ในช่วงที่กําหนด
`:out-of-range`	เมื่อข้อมูลไม่อยู่ในช่วงที่กําหนด
`:empty`	เมื่อ Element ไม่มี Content
`:root`	เลือก `<html>` แต่ Specificity สูงกว่า
`:is()`	เลือกหลายตัวเลือก
`:where()`	เหมือนกับ `:is()` แต่ Specificity ค่า 0
`:has()`	หากมีตัวเลือก
`:not()`	ไม่ตรงกับตัวเลือก

🔠 Pseudo-elements

Pseudo-element	ความหมาย
`::before`	เนื้อหาช่วงหน้าของ Element
`::after`	เนื้อหาช่วงหลังของ Element
`::first-line`	ส่วนของบรรทัดแรกบน Element
`::first-letter`	ตัวอักษรแรกบน Element
`::selection`	เมื่อมีการ Select เนื้อหา
`::placeholder`	Placeholder ของ Input
`::marker`	เครื่องหมายของลำดับรายการ
`::file-selector-button`	ปุ่มเลือกไฟล์
`::backdrop`	พื้นหลังของ `<dialog>`
`::cue`	เลือกส่วนของ Video Caption

🔠 CSS Styling Text

Property Name	การใช้งาน
`color`	สีข้อความ
`background-color`	สีพื้นหลัง
`font-family`	รูปแบบตัวอักษร
`font-size`	ขนาดตัวอักษร
`font-weight`	ความหนาตัวอักษร
`font-style`	รูปแบบตัวเอียง
`text-align`	จัดตำแหน่งซ้าย-ขวาของข้อความ
`vertical-align`	จัดตําแหน่งบน-ล่างของข้อความ
`text-decoration`	ขีดเส้นของตัวอักษร
`text-transform`	แปลงภาษาอังกฤษตัวพิมพ์เล็ก-ใหญ่
`text-shadow`	เงาของตัวอักษร
`white-space`	จัดการบรรทัดของข้อความ
`overflow-wrap`	จัดการคำที่ยาวเกิน (มักใช้กับลิงก์ข้อความ)
`text-overflow`	จัดการข้อความที่ล้นขอบ
`text-indent`	ระยะห่างของย่อหน้า
`letter-spacing`	ระยะห่างของตัวอักษร
`word-spacing`	ระยะห่างของคํา
`line-height`	ความสูงของบรรทัด
`@counter-style`	กำหนดลำดับรายการ ใช้ร่วมกับ `list-style-type`
`list-style-type`	รูปแบบรายการ
`list-style-position`	ตําแหน่งรายการ
`list-style-image`	รูปภาพของลำดับรายการ

📦 CSS Box Model

Property Name	การใช้งาน
`display`	รูปแบบการแสดงผล
`position`	ตําแหน่ง Element
`width`	ความกว้างของ Element
`height`	ความสูงของ Element
`min-width`	ความกว้างของ Element ต่ําสุด
`max-width`	ความกว้างของ Element สูงสุด
`min-height`	ความสูงของ Element ต่ําสุด
`max-height`	ความสูงของ Element สูงสุด
`padding`	Padding Shorthand
`padding-left`, `padding-right`, `padding-top`, `padding-bottom`	ขยายขอบเนื้อหาใน Element ตามมุม
`margin`	Margin Shorthand
`margin-left`, `margin-right`, `margin-top`, `margin-bottom`	ระยะห่างภายนอกของ Element ตามมุม
`border`	Border Shorthand ทั้ง 4 มุม
`border-width`	ขนาดขอบ 4 มุม
`border-style`	รูปแบบขอบ 4 มุม
`border-color`	สีขอบ 4 มุม
`border-left`, `border-right`, `border-top`, `border-bottom`	ขอบตามมุมแบบ Shorthand
`border-left-width`, `border-right-width`, `border-top-width`, `border-bottom-width`	ขนาดขอบตามมุม
`border-left-style`, `border-right-style`, `border-top-style`, `border-bottom-style`	รูปแบบขอบตามมุม
`border-left-color`, `border-right-color`, `border-top-color`, `border-bottom-color`	สีขอบตามมุม
`border-radius`	กำหนดขอบมนและโค้งมุมของ Element
`outline`	Outline Shorthand
`outline-width`	ขนาดขอบ Outline
`outline-style`	รูปแบบขอบ Outline
`outline-color`	สีขอบ Outline
`outline-offset`	ระยะห่างขอบ Outline
`inset`	Shorthand `top` `right` `bottom` `left`
`top`, `right`, `bottom`, `left`	การจัดตำแหน่งตามมุม (ใช้กับ `position` อื่นๆนอกจาก `position: static`)
`z-index`	ลําดับการแสดงผล Element (ใช้กับ `position` อื่นๆนอกจาก `position: static`)
`visibility`	การแสดงผล Element
`box-sizing`	การตัดขอบ Element
`overflow`	การจัดการเนื้อหาที่ล้นขอบ
`float`	การจัดตำแหน่ง Element ไปยังซ้าย-ขวา
`box-shadow`	เงาของ Element

🖼️ CSS Background & Image

Property Name	การใช้งาน
`background`	Background Shorthand
`background-attachment`	การเลื่อนพื้นหลังตามเนื้อหา
`background-clip`	ขนาดพื้นหลังอ้างอิงตามขอบ
`background-color`	สีพื้นหลัง
`background-image`	รูปภาพพื้นหลัง
`background-origin`	ตำแหน่งเริ่มต้นของพื้นหลัง
`background-position`	ตําแหน่งพื้นหลัง
`background-repeat`	การทำซ้ำพื้นหลัง
`background-size`	ขนาดพื้นหลัง
`object-fit`	การวางภาพแบบเต็มบน Element
`object-position`	ตําแหน่งภาพบน Element

🌈 CSS Filter

Property Name	การใช้งาน
`filter`	ฟิลเตอร์เนื้อหาหลัก
`backdrop-filter`	ฟิลเตอร์ส่วนพื้นหลัง
`filter: blur()`	เบลอ
`filter: opacity()`	ความโปร่งใส
`filter: drop-shadow()`	เงาของรูป
`filter: brightness()`	ความสว่าง
`filter: contrast()`	ความแตกต่างระหว่างสี
`filter: grayscale()`	สีขาวดำ
`filter: saturate()`	ความอิ่มตัวของสี
`filter: hue-rotate()`	หมุนทิศสี
`filter: invert()`	สลับสี
`filter: sepia()`	สีซีเปีย

💪 CSS Flexbox

🔵 = ใช้บน Flex Container
🟡 = ใช้บน Flex Item

Property Name	การใช้งาน
`display: flex;`	กำหนดการแสดงผลเป็น Flexbox
🔵 `flex-flow`	Shorthand `flex-direction` `flex-wrap`
🔵 `flex-direction`	ตั้งทิศแกนหลักของ Flex Item
🔵 `flex-wrap`	การตัดบรรทัดของ Flex Item
🔵 `gap`	Shorthand `row-gap` `column-gap`
🔵 `row-gap`	ระยะห่างแถวของแต่ละ Flex Item
🔵 `column-gap`	ระยะห่างคอลัมน์ของแต่ละ Flex Item
🔵 `justify-content`	จัด Flex Item แกนหลัก
🔵 `align-items`	จัด Flex Item แกนรอง
🔵 `align-content`	จัด Flex Item แกนรองทุกบรรทัด (ใช้ได้เฉพาะ `flex-wrap: wrap;`)
🟡 `align-self`	จัด Flex Item เฉพาะชิ้นเดียว
🟡 `flex`	Shorthand `flex-grow` `flex-shrink` `flex-basis`
🟡 `flex-grow`	การขยายขนาด Flex Item
🟡 `flex-shrink`	การลดขนาด Flex Item
🟡 `flex-basis`	ขนาดเริ่มต้นของ Flex Item
🟡 `order`	ลําดับของ Flex Item

🪟 CSS Grid

🔵 = ใช้บน Grid Container
🟡 = ใช้บน Grid Item

Property Name	การใช้งาน
`display: grid;`	กำหนดการแสดงผลเป็น Grid
🔵 `grid`	Shorthand `grid-template-rows` `grid-template-columns` `grid-template-areas` `grid-auto-rows` `grid-auto-columns` `grid-auto-flow`
🔵 `grid-template`	Shorthand `grid-template-columns` `grid-template-rows`
🔵 `grid-template-columns`	กําหนดจํานวนและขนาดของคอลัมน์ (Explicit)
🔵 `grid-template-rows`	กําหนดจํานวนและขนาดของแถว (Explicit)
🔵 `grid-template-areas`	กำหนดขนาดตามชื่อของ `grid-area`
🔵 `grid-auto-flow`	Shorthand `grid-auto-columns` `grid-auto-rows`
🔵 `grid-auto-columns`	กําหนดจํานวนและขนาดของคอลัมน์ (Implicit)
🔵 `grid-auto-rows`	กําหนดจํานวนและขนาดของแถว (Implicit)
🟡 `grid-area`	กําหนดชื่อของ Grid Item
🔵 `gap`	Shorthand `row-gap` `column-gap`
🔵 `row-gap`	ระยะห่างแถว
🔵 `column-gap`	ระยะห่างคอลัมน์
🔵 `place-items`	Shorthand `align-items` `justify-items`
🔵 `justify-items`	จัด Grid Item แกนหลัก
🔵 `align-items`	จัด Grid Item แกนรอง
🔵 `place-content`	Shorthand `align-content` `justify-content`
🔵 `justify-content`	จัด Grid Content แกนหลัก
🔵 `align-content`	จัด Grid Content แกนรอง
🟡 `place-self`	Shorthand `align-self` `justify-self`
🟡 `justify-self`	จัด Grid Item เฉพาะชิ้นเดียว
🟡 `align-self`	จัด Grid Item เฉพาะชิ้นเดียว
🟡 `grid-column`	Shorthand `grid-column-start` `grid-column-end`
🟡 `grid-column-start`	กำหนดจุดเริ่มต้นของคอลัมน์
🟡 `grid-column-end`	กำหนดจุดสิ้นสุดของคอลัมน์
🟡 `grid-row`	Shorthand `grid-row-start` `grid-row-end`
🟡 `grid-row-start`	กำหนดจุดเริ่มต้นของแถว
🟡 `grid-row-end`	กำหนดจุดสิ้นสุดของแถว

CSS Grid Units & Functions

Units & Functions	การใช้งาน
`fr`	ขนาดสัดส่วน
`auto`	ขนาดอัตโนมัติ
`min-content`	ขนาดเล็กสุดตามเนื้อหา
`max-content`	ขนาดใหญ่สุดตามเนื้อหา
`minmax()`	กําหนดขนาดขั้นต่ำและสูงสุดของแต่ละ Grid Track
`repeat()`	สร้าง Grid Track ซ้ำ
`fit-content()`	ขนาดที่ปรับตามเนื้อหา แต่ต้องไม่เกิดขีดจำกัด

🏛️ CSS Column

Property Name	การใช้งาน
`columns`	Shorthand `column-width` `column-count`
`column-width`	กําหนดความกว้างของคอลัมน์
`column-count`	จํานวนคอลัมน์
`column-gap`	ระยะห่างระหว่างคอลัมน์
`column-rule`	Shorthand `column-rule-width` `column-rule-style` `column-rule-color`
`column-rule-width`	ความกว้างของเส้นแบ่งคอลัมน์
`column-rule-style`	สไตล์เส้นแบ่งคอลัมน์
`column-rule-color`	สีเส้นแบ่งคอลัมน์
`break-before`	ควบคุมการแบ่งก่อนคอลัมน์
`break-after`	ควบคุมการแบ่งหลังคอลัมน์
`break-inside`	ควบคุมการแบ่งภายในคอลัมน์

💫 CSS Transition

Property Name	การใช้งาน
`transition`	Shorthand
`transition-property`	กำหนด Property ที่จะ Transition
`transition-duration`	ระยะเวลาของการ Transition
`transition-timing-function`	รูปแบบความเร็ว Transition
`transition-delay`	เวลาที่หน่วงก่อนเริ่ม Transition

🔄 CSS Transform

Property & Function	การใช้งาน
`transform`	เปลี่ยนแปลงรูปแบบ Element
`transform: translate(x, y)`	เลื่อนตำแหน่ง Element บนแกน X และ Y
`transform: translateX(x)`	เลื่อน Element บนแกน X เท่านั้น
`transform: translateY(y)`	เลื่อน Element บนแกน Y เท่านั้น
`transform: translateZ(z)`	เลื่อน Element บนแกน Z (สำหรับ 3D)
`transform: scale(x, y)`	ปรับขนาด Element บนแกน X และ Y
`transform: scaleX(x)`	ปรับขนาด Element บนแกน X เท่านั้น
`transform: scaleY(y)`	ปรับขนาด Element บนแกน Y เท่านั้น
`transform: scaleZ(z)`	ปรับขนาด Element บนแกน Z (สำหรับ 3D)
`transform: rotate(angle)`	หมุน Element รอบจุดหมุนที่กำหนด
`transform: rotateX(angle)`	หมุน Element รอบแกน X
`transform: rotateY(angle)`	หมุน Element รอบแกน Y
`transform: rotateZ(angle)`	หมุน Element รอบแกน Z (สำหรับ 3D)
`transform: skew(x, y)`	เอียง Element บนแกน X และ Y
`transform: skewX(x)`	เอียง Element บนแกน X เท่านั้น
`transform: skewY(y)`	เอียง Element บนแกน Y เท่านั้น
`transform: matrix(a, b, c, d, e, f)`	ใช้ Matrix แปลง Element (2D)
`transform: matrix3d()`	ใช้ Matrix แปลง Element (3D)

🎞️ CSS Animation

Property Name	การใช้งาน
`@keyframes`	กำหนดการเปลี่ยนแปลง Animation ตามขั้นตอน
`animation-name`	ชื่อ Animation ตาม `@keyframes`
`animation-duration`	ระยะเวลา Animation
`animation-timing-function`	รูปแบบการเปลี่ยนแปลง Animation
`animation-delay`	การหน่วงเวลาเริ่มต้น Animation
`animation-iteration-count`	จำนวนครั้งที่ Animation เล่น
`animation-direction`	ทิศทางการเล่น Animation
`animation-fill-mode`	ควบคุมสถานะ Animation ก่อนเริ่มและหลังจบ
`animation-play-state`	สถานะการเล่น Animation
`animation`	Shorthand รวมทุกคุณสมบัติด้านบน

📱💻🖥️ CSS Responsive & Media Features

.container { width: 100%; } /* Mobile */
@media (min-width: 768px) { /* Tablet */
  .container { width: 80%; }
}
@media (min-width: 1024px) { /* Desktop */
  .container { width: 60%; }
}

h1 { color: black; } /* Light theme */
@media (prefer-color-scheme: dark) { /* Dark theme */
  h1 { color: white; background-color: black; }
}