CSS Complete Guide

Basic Syntax - ไวยากรณ์พื้นฐาน

selector {
  property: value;
}

Selectors - ตัวเลือก

ประเภท Selector	ตัวอย่าง	คำอธิบาย
Element	p { }	เลือกทุกแท็ก <p>
Class	.class { }	เลือก element ที่มี class="class"
ID	#id { }	เลือก element เดียวที่มี id="id"
Attribute	[type="text"]	เลือก element ที่มี attribute ตรงตามเงื่อนไข
Pseudo-class	a:hover	เลือก element ในสถานะต่างๆ เช่น hover, focus
Pseudo-element	p::first-line	เลือกส่วนย่อยของ element
Combinator	div p	เลือก element ตามความสัมพันธ์
Universal	* { }	เลือกทุก element

Box Model - โมเดลกล่อง

.box {
  width: 300px;
  padding: 20px;
  margin: 30px;
  border: 2px solid black;
}

Layout - การจัดวาง

Flexbox

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

Responsive Design - การออกแบบที่ตอบสนอง

@media (max-width: 768px) {
  /* Mobile styles */
}

ค่าและหน่วย

หน่วยและค่าต่างๆ ที่ใช้ใน CSS

หน่วยสัมบูรณ์

• px - พิกเซล (1px = 1/96 ของ 1 นิ้ว)
• cm - เซนติเมตร
• mm - มิลลิเมตร
• in - นิ้ว (1in = 96px = 2.54cm)

หน่วยสัมพัทธ์

• em - เทียบกับขนาดฟอนต์ขององค์ประกอบแม่
• rem - เทียบกับขนาดฟอนต์ขององค์ประกอบรูท (ปกติ 16px)
• % - เปอร์เซ็นต์ของค่าจากองค์ประกอบแม่
• vw - 1% ของความกว้างวิวพอร์ต
• vh - 1% ของความสูงวิวพอร์ต

ค่าสี

• Hex: #RRGGBB หรือ #RGB
• RGB: rgb(255, 0, 0)
• RGBA: rgba(255, 0, 0, 0.5)
• HSL: hsl(120, 100%, 50%)
• สีชื่อ: red, blue เป็นต้น

ตัวอย่างการใช้งาน

.box {
  width: 80%; /* สัมพัทธ์กับองค์ประกอบแม่ */
  padding: 1rem; /* สัมพัทธ์กับฟอนต์รูท */
  margin: 20px; /* ค่าสัมบูรณ์ */
  color: #4285f4; /* สีระบบ Hex */
  background-color: rgba(66, 133, 244, 0.1);
}

Design Token

/* Colors */
:root {
  /* Primary Colors */
  --primary-50: #e8f4fe;
  --primary-100: #d1e6fd;
  --primary-500: #4285f4;
  --primary-900: #1a56c8;

  /* Neutral Colors */
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-500: #adb5bd;
  --black: #000000;

  /* Fonts */
  --font-sans: 'Segoe UI', sans-serif;
  --font-mono: 'Courier New', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-md: 1rem;
  --space-xl: 2rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-lg: 8px;
}

/* Usage Example */
.button {
  background-color: var(--primary-500);
  color: var(--white);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
}

Theme

:root {
  --primary-color: #4285f4;
  --secondary-color: #34a853;
  --text-color: #202124;
}

body {
  color: var(--text-color);
  font-family: 'Segoe UI', sans-serif;
}

.button {
  background-color: var(--primary-color);
  color: white;
}