reveal.js

# สัปดาห์ที่ 3

CSS พื้นฐานและการจัดรูปแบบ

---

## เป้าหมายบทเรียน

- เชื่อม CSS กับ HTML ได้ถูกวิธี
- เลือกใช้ selector ได้เหมาะสม
- อธิบาย cascade, inheritance และ specificity ได้
- เข้าใจ Box Model
- ใช้ typography, color และ spacing เพื่อจัดลำดับสายตา

---

## CSS ทำอะไร

- สี
- ตัวอักษร
- ระยะห่าง
- ขนาด
- เส้นขอบ
- สถานะ hover/focus

---

## 1. วิธีเชื่อม CSS กับ HTML

มี 3 วิธีหลัก

| วิธี | เหมาะกับ |
|---|---|
| Inline CSS | ทดลองเร็ว ชั่วคราว |
| Internal CSS | ตัวอย่างขนาดเล็ก |
| External CSS | งานจริงและเว็บหลายหน้า |

---

## Inline CSS

```html
<p style="color: blue; font-size: 18px;">
  ข้อความตัวอย่าง
</p>
```

ใช้ได้เร็ว แต่ดูแลต่อยากและใช้ซ้ำไม่ได้

---

## Internal CSS

```html
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      color: #111827;
    }
  </style>
</head>
```

เหมาะกับ demo หรือไฟล์ตัวอย่างขนาดเล็ก

---

## External CSS

```html
<head>
  <link rel="stylesheet" href="css/style.css">
</head>
```

```css
body {
  font-family: Arial, sans-serif;
  background: #f9fafb;
}
```

แนวทางที่เหมาะกับงานจริง เพราะแยก structure ออกจาก presentation

---

## ลำดับการโหลด CSS

```html
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
```

ถ้า selector มีน้ำหนักเท่ากัน rule ที่โหลดทีหลังมักชนะ

---

## 2. Selectors

```css
h1 {}
.card {}
#main {}
nav a {}
a:hover {}
```

---

## Specificity

น้ำหนักของ selector ที่ใช้ตัดสินว่า rule ใดชนะ

| Selector | ตัวอย่าง | น้ำหนัก |
|---|---|---|
| Type | `p` | ต่ำ |
| Class | `.intro` | กลาง |
| Pseudo-class | `:hover` | กลาง |
| ID | `#first` | สูง |
| Inline style | `style="..."` | สูงมาก |

---

## ตัวอย่าง Specificity

```css
p {
  color: gray;
}

.intro {
  color: green;
}

#first-paragraph {
  color: blue;
}
```

```html
<p id="first-paragraph" class="intro">
  ข้อความนี้เป็นสีน้ำเงิน
</p>
```

---

## แนวทางใช้ Selector

- ใช้ class เป็นหลัก
- ตั้งชื่อ class ให้สื่อความหมาย
- ใช้ ID เท่าที่จำเป็น
- หลีกเลี่ยง selector ซ้อนลึกเกินไป
- ไม่ใช้ `!important` เป็นทางออกแรก

---

## 3. Cascade

Cascade คือกลไกที่เบราว์เซอร์ตัดสินว่า CSS rule ใดมีผลจริง

```css
.button {
  background: #e5e7eb;
}

.button {
  background: #2563eb;
}
```

ผลลัพธ์: `.button` เป็นสีน้ำเงิน เพราะ rule หลังชนะ

---

## Inheritance

บาง property ถ่ายทอดจาก parent ไป child

```css
body {
  font-family: Arial, sans-serif;
  color: #111827;
}
```

ข้อความส่วนใหญ่ในหน้าเว็บจะรับ font และสีจาก `body`

---

## Property ที่มักสืบทอด

- `color`
- `font-family`
- `font-size`
- `line-height`
- `text-align`

## Property ที่มักไม่สืบทอด

- `margin`
- `padding`
- `border`
- `background`
- `width`

---

## 4. Box Model

ทุก element คือกล่อง

```mermaid
flowchart TB
  M[Margin: ระยะนอกกล่อง] --> B[Border: เส้นขอบ]
  B --> P[Padding: ระยะในกล่อง]
  P --> C[Content: เนื้อหา]
```

---

## Box Model

```css
.card {
  width: 320px;
  padding: 16px;
  border: 1px solid #d1d5db;
  margin: 24px 0;
}
```

---

## box-sizing

```css
* {
  box-sizing: border-box;
}
```

ทำให้ `width` รวม content, padding และ border คำนวณ layout ง่ายขึ้น

---

## Padding vs Margin

| Property | ใช้เมื่อ |
|---|---|
| `padding` | ต้องการพื้นที่หายใจภายในกล่อง |
| `margin` | ต้องการเว้นระยะระหว่างกล่อง |
| `border` | ต้องการแสดงขอบเขตหรือแบ่งกลุ่ม |

---

## 5. Typography และ Web Font

- Font family
- Font size
- Font weight
- Line height
- Contrast
- Text alignment

---

## Typography พื้นฐาน

```css
body {
  font-family: Arial, "Noto Sans Thai", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #111827;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
}
```

---

## Web Font

```html
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;700&display=swap" rel="stylesheet">
```

```css
body {
  font-family: "Noto Sans Thai", sans-serif;
}
```

ใช้ font ไม่มากเกินไป เพื่อไม่ให้หน้าโหลดช้า

---

## Typography ที่อ่านง่าย

- ใช้ font ไม่เกิน 1-2 ตระกูล
- paragraph มี `line-height` ประมาณ `1.5` ถึง `1.8`
- หัวข้อใหญ่กว่าเนื้อหา
- สีข้อความ contrast กับพื้นหลัง
- ไม่ใช้ขนาดเล็กเกินไปบน mobile

---

## 6. Color, Background และ Border

สีช่วย

- แบ่งกลุ่มข้อมูล
- บอกสถานะ
- สร้างบุคลิกของเว็บ
- ชี้นำ action สำคัญ

---

## CSS Variables สำหรับสี

```css
:root {
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-bg: #f9fafb;
  --color-surface: #ffffff;
  --color-primary: #2563eb;
  --color-border: #d1d5db;
}
```

---

## ใช้สีใน Component

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

.alert {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
}
```

---

## แนวทางใช้สี

- กำหนดสีหลัก สีรอง สีพื้นหลัง สีข้อความ
- ตรวจ contrast
- ใช้สีเน้นกับ action สำคัญ
- อย่าใช้สีอย่างเดียวเพื่อบอกความหมาย
- ใช้ border/background อ่อนเพื่อแบ่งกลุ่มข้อมูล

---

## 7. Spacing และ Visual Hierarchy

Spacing ทำให้ข้อมูลอ่านง่าย

Visual Hierarchy ทำให้ผู้ใช้รู้ว่าอะไรสำคัญก่อนหลัง

---

## เครื่องมือสร้าง Spacing

```css
.content {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
```

---

## Visual Hierarchy

| วิธี | ตัวอย่าง |
|---|---|
| ขนาด | หัวข้อใหญ่กว่าเนื้อหา |
| น้ำหนัก | ปุ่มหลักใช้ตัวหนา |
| สี | action ใช้สี accent |
| ระยะห่าง | แยกกลุ่มด้วย whitespace |
| ตำแหน่ง | สิ่งสำคัญมาก่อน |

---

## ตัวอย่าง Card

```css
.course-card {
  padding: 20px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
}

.course-card h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.course-card p {
  color: #6b7280;
}
```

---

## Checklist ก่อนส่งงาน CSS

- เชื่อมไฟล์ CSS ด้วย external stylesheet
- ใช้ class selector เป็นหลัก
- ไม่ใช้ inline style โดยไม่จำเป็น
- กำหนด `box-sizing: border-box`
- ตัวอักษรอ่านง่าย
- สีมี contrast เพียงพอ
- ใช้ spacing สม่ำเสมอ
- เห็นหัวข้อ เนื้อหา และ action ชัดเจน

---

## กิจกรรม

ตกแต่งเว็บเพจส่วนตัวให้มี visual hierarchy ที่ชัดเจน

---

## คำถามท้ายบท

1. ทำไม external CSS จึงเหมาะกับงานจริงมากกว่า inline CSS
2. Specificity ช่วยอธิบายปัญหา style ไม่ทำงานได้อย่างไร
3. Padding และ margin ต่างกันอย่างไร
4. Visual hierarchy ทำให้ UX ดีขึ้นอย่างไร