สัปดาห์ที่ 3 CSS พื้นฐานและการจัดรูปแบบ

สไลด์บทเรียน

วัตถุประสงค์

  1. ใช้ CSS เพื่อกำหนดหน้าตาของเว็บเพจได้
  2. อธิบาย Selector, Cascade, Specificity และ Box Model ได้
  3. เลือกใช้สี ตัวอักษร ระยะห่าง และเส้นขอบเพื่อปรับปรุงการอ่านได้

หัวข้อย่อย

  1. วิธีเชื่อม CSS กับ HTML
  2. Selectors และ Specificity
  3. Cascade และ Inheritance
  4. Box Model: content, padding, border, margin
  5. Typography และ Web Font
  6. Color, Background และ Border
  7. Spacing และ Visual Hierarchy

เนื้อหา

CSS ใช้กำหนดการแสดงผลของ HTML ตั้งแต่สี ขนาดตัวอักษร ระยะห่าง ไปจนถึง layout หลักการสำคัญคือการแยกโครงสร้างออกจากการตกแต่ง ทำให้แก้ไขหน้าตาเว็บได้โดยไม่กระทบเนื้อหา

Box Model เป็นพื้นฐานของการจัดตำแหน่งและขนาด ทุก element ประกอบด้วย content, padding, border และ margin หากเข้าใจ Box Model จะควบคุมระยะห่างและพื้นที่ของหน้าเว็บได้แม่นยำขึ้น

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

CSS สามารถเชื่อมกับ HTML ได้หลายวิธี แต่ละวิธีเหมาะกับสถานการณ์ต่างกัน การเรียน Front-end ควรเข้าใจทุกวิธี แต่ในการทำงานจริงควรแยก CSS ออกเป็นไฟล์ภายนอกเพื่อให้ดูแลต่อได้ง่าย

Inline CSS

เขียน style ไว้ใน attribute style ของ element โดยตรง

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

ข้อดีคือทดลองเร็ว แต่ข้อเสียคือแก้ไขยาก ใช้ซ้ำไม่ได้ และทำให้ HTML ปนกับ presentation จึงไม่ควรใช้เป็นรูปแบบหลักในงานส่ง ยกเว้นใช้ทดสอบชั่วคราวหรือกรณีพิเศษจริง ๆ

Internal CSS

เขียน CSS ไว้ใน <style> ภายใน <head> ของไฟล์ HTML

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

เหมาะกับไฟล์ตัวอย่างขนาดเล็กหรือการสอน แต่ถ้าเว็บเริ่มมีหลายหน้า การเขียนแบบนี้จะทำให้ style ซ้ำกันในหลายไฟล์

External CSS

แยก CSS เป็นไฟล์ เช่น css/style.css แล้วเชื่อมด้วย <link>

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

body {
  font-family: Arial, sans-serif;
  color: #111827;
  background: #f9fafb;
}

แนวทางนี้เหมาะที่สุดสำหรับงานจริง เพราะแยกโครงสร้าง HTML ออกจากการตกแต่ง CSS ทำให้แก้ theme, layout และ component style ได้ง่ายขึ้น

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

ถ้ามี CSS หลายไฟล์ เบราว์เซอร์จะอ่านจากบนลงล่าง กฎที่มาทีหลังอาจ override กฎก่อนหน้าได้ หาก selector มีน้ำหนักเท่ากัน

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

ในตัวอย่างนี้ pages.css โหลดหลังสุด จึงเหมาะกับ style เฉพาะหน้า ส่วน base.css เหมาะกับค่าพื้นฐาน เช่น font, color, reset และตัวแปรสี

2. Selectors และ Specificity

Selector คือวิธีเลือก HTML element ที่ต้องการตกแต่ง ส่วน Specificity คือค่าน้ำหนักที่ช่วยตัดสินว่า CSS rule ใดจะชนะเมื่อมีหลาย rule กำหนด style ให้ element เดียวกัน

ตัวอย่าง selector ที่ใช้บ่อย:

/* Type selector */
p {
  line-height: 1.7;
}

/* Class selector */
.profile-card {
  border: 1px solid #d1d5db;
}

/* ID selector */
#main-content {
  max-width: 960px;
}

/* Descendant selector */
nav a {
  text-decoration: none;
}

/* Pseudo-class */
a:hover {
  color: #2563eb;
}

โดยทั่วไป specificity เรียงจากน้ำหนักน้อยไปมากได้ประมาณนี้:

Selector ตัวอย่าง น้ำหนักโดยประมาณ
Type selector p, h1, section ต่ำ
Class selector .card, .active กลาง
Attribute / pseudo-class [type="email"], :hover กลาง
ID selector #header สูง
Inline style style="..." สูงมาก

ตัวอย่างการชนกันของ selector:

p {
  color: gray;
}

.intro {
  color: green;
}

#first-paragraph {
  color: blue;
}

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

ข้อความนี้จะเป็นสีน้ำเงิน เพราะ #first-paragraph มี specificity สูงกว่า .intro และ p

แนวทางที่ดีคือใช้ class เป็นหลัก หลีกเลี่ยงการใช้ ID เพื่อ styling บ่อยเกินไป และไม่ควรแก้ปัญหาด้วย !important ถ้าไม่จำเป็น เพราะจะทำให้ style ดูแลต่อยาก

3. Cascade และ Inheritance

Cascade คือกลไกที่เบราว์เซอร์ใช้ตัดสินว่า style ใดมีผลจริงเมื่อมีกฎหลายชุดส่งผลต่อ element เดียวกัน การตัดสินขึ้นกับแหล่งที่มา specificity และลำดับการประกาศ

ตัวอย่าง cascade:

.button {
  background: #e5e7eb;
}

.button {
  background: #2563eb;
}

ถ้า selector มีน้ำหนักเท่ากัน rule ที่มาทีหลังจะชนะ ดังนั้น .button จะมีพื้นหลังสีน้ำเงิน

Inheritance คือการสืบทอดค่าบาง property จาก parent ไปยัง child เช่น color, font-family, line-height มักสืบทอดได้ แต่ margin, padding, border, background มักไม่สืบทอดโดยอัตโนมัติ

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

เมื่อกำหนด font และสีที่ body ข้อความส่วนใหญ่ในหน้าเว็บจะได้รับค่าพื้นฐานนี้โดยไม่ต้องกำหนดซ้ำทุก element

ตัวอย่าง property ที่มักสืบทอด:

  1. color
  2. font-family
  3. font-size
  4. line-height
  5. text-align

ตัวอย่าง property ที่มักไม่สืบทอด:

  1. margin
  2. padding
  3. border
  4. background
  5. width

การเข้าใจ cascade และ inheritance ช่วยลดการเขียน CSS ซ้ำ และช่วย debug ได้เร็วขึ้นเมื่อ style ไม่เป็นอย่างที่คาด

4. Box Model: content, padding, border, margin

ทุก element บนหน้าเว็บถูกมองเป็นกล่อง กล่องหนึ่งประกอบด้วย 4 ส่วนหลัก

ส่วน ความหมาย
Content พื้นที่ของเนื้อหาจริง เช่น ข้อความหรือรูปภาพ
Padding ระยะห่างระหว่าง content กับ border
Border เส้นขอบของ element
Margin ระยะห่างระหว่าง element นี้กับ element อื่น 
.card {
  width: 320px;
  padding: 16px;
  border: 1px solid #d1d5db;
  margin: 24px 0;
}

ค่า width โดยค่าเริ่มต้นจะหมายถึงความกว้างของ content เท่านั้น หากมี padding และ border เพิ่ม ขนาดจริงของ element จะกว้างกว่า width ที่กำหนด จึงนิยมใช้ box-sizing: border-box

* {
  box-sizing: border-box;
}

เมื่อใช้ border-box ค่า width จะรวม content, padding และ border ทำให้คำนวณ layout ง่ายขึ้น

ตัวอย่างการใช้ margin และ padding ให้ถูกจังหวะ:

.section {
  margin-bottom: 40px;
}

.card {
  padding: 20px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

แนวคิดจำง่าย:

  1. ใช้ padding เมื่ออยากให้เนื้อหาหายใจภายในกล่อง
  2. ใช้ margin เมื่ออยากเว้นระยะระหว่างกล่องกับสิ่งรอบข้าง
  3. ใช้ border เพื่อแสดงขอบเขตหรือแบ่งกลุ่มข้อมูล

5. Typography และ Web Font

Typography คือการจัดการตัวอักษรให้อ่านง่าย มีลำดับความสำคัญ และเหมาะกับบุคลิกของเว็บไซต์ ไม่ใช่เพียงเลือก font ให้สวยเท่านั้น

Property สำคัญ:

Property หน้าที่
font-family กำหนดชุดตัวอักษร
font-size กำหนดขนาดตัวอักษร
font-weight กำหนดความหนา
line-height กำหนดระยะบรรทัด
letter-spacing กำหนดระยะห่างตัวอักษร
text-align จัดแนวข้อความ

ตัวอย่าง typography พื้นฐาน:

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;
}

.muted {
  color: #6b7280;
}

Web Font คือ font ที่โหลดจากภายนอกหรือจากไฟล์ในโปรเจกต์ ช่วยให้เว็บมีบุคลิกเฉพาะขึ้น แต่ควรระวังเรื่อง performance เพราะ font ที่ใหญ่หรือหลายชุดเกินไปทำให้หน้าโหลดช้า

ตัวอย่างการใช้ Google Fonts มักอยู่ในรูปแบบ <link> ใน <head>:

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

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

แนวทาง typography ที่ดี:

  1. ใช้ font ไม่เกิน 1-2 ตระกูลในงานพื้นฐาน
  2. ข้อความทั่วไปควรอ่านง่าย ไม่เล็กเกินไป
  3. line-height สำหรับ paragraph ควรโปร่งพอ เช่น 1.5 ถึง 1.8
  4. หัวข้อควรมีขนาดและน้ำหนักต่างจากเนื้อหา
  5. สีข้อความต้อง contrast กับพื้นหลังเพียงพอ

6. Color, Background และ Border

สีช่วยกำหนดอารมณ์ของเว็บ แบ่งกลุ่มข้อมูล และชี้นำความสนใจของผู้ใช้ แต่การใช้สีมากเกินไปหรือ contrast ต่ำเกินไปจะทำให้เว็บอ่านยากและดูไม่เป็นระบบ

CSS รองรับรูปแบบค่าสีหลายแบบ เช่น

.color-samples {
  color: black;
  background: #f3f4f6;
  border-color: rgb(209, 213, 219);
}

ตัวอย่าง color palette เบื้องต้น:

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

body {
  color: var(--color-text);
  background: var(--color-bg);
}

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

Background ใช้กำหนดพื้นหลังของ element เช่น สี ภาพ หรือ gradient แต่ในงานพื้นฐานควรเริ่มจากสีพื้นเรียบก่อน เพื่อให้เนื้อหาอ่านง่าย

.hero {
  background: #eff6ff;
  padding: 48px 24px;
}

Border ใช้แบ่งขอบเขตของข้อมูล สร้าง card หรือเน้นสถานะบางอย่าง

.alert {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  padding: 12px 16px;
  border-radius: 8px;
}

แนวทางการใช้สี:

  1. กำหนดสีหลัก สีรอง สีพื้นหลัง สีข้อความ และสีเส้นขอบให้ชัดเจน
  2. อย่าใช้สีเพียงอย่างเดียวเพื่อบอกความหมาย ควรมีข้อความหรือ icon ประกอบ
  3. ตรวจ contrast ระหว่างข้อความกับพื้นหลัง
  4. ใช้สีเน้นกับ action สำคัญ เช่น ปุ่มหลัก
  5. ใช้ border หรือ background อ่อนเพื่อแบ่งกลุ่มข้อมูลโดยไม่รบกวนสายตา

7. Spacing และ Visual Hierarchy

Spacing คือระยะห่างระหว่างองค์ประกอบ ส่วน Visual Hierarchy คือการจัดลำดับความสำคัญทางสายตา เพื่อให้ผู้ใช้รู้ว่าควรอ่านอะไรก่อน กดอะไรได้ และส่วนใดเป็นเนื้อหาหลัก

เครื่องมือหลักในการสร้าง spacing:

  1. margin สำหรับระยะห่างภายนอก element
  2. padding สำหรับระยะห่างภายใน element
  3. gap สำหรับระยะห่างระหว่าง item ใน flex/grid
.content {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
}

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

Visual Hierarchy สร้างได้ด้วยหลายปัจจัย:

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

ตัวอย่างการออกแบบ card ที่มี hierarchy:

.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 {
  margin: 0 0 16px;
  color: #6b7280;
}

.course-card a {
  color: #2563eb;
  font-weight: 700;
}

ในตัวอย่างนี้ หัวข้อเด่นที่สุด รายละเอียดเป็นสีรอง และ link ใช้สีหลักเพื่อบอกว่าเป็น action ที่ผู้ใช้กดได้

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

  1. เชื่อมไฟล์ CSS ด้วย external stylesheet
  2. ใช้ class selector เป็นหลัก และตั้งชื่อ class สื่อความหมาย
  3. ไม่ใช้ inline style โดยไม่จำเป็น
  4. กำหนด box-sizing: border-box
  5. ตัวอักษรอ่านง่าย มี line-height เหมาะสม
  6. สีข้อความกับพื้นหลังมี contrast เพียงพอ
  7. ใช้ spacing สม่ำเสมอ ไม่อัดแน่นหรือกระจัดกระจาย
  8. มี visual hierarchy เห็นหัวข้อ เนื้อหา และ action ชัดเจน

ตัวอย่าง

.profile-card {
  padding: 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
}

กิจกรรมในชั้นเรียน

นำเว็บเพจส่วนตัวจากสัปดาห์ที่ 2 มาตกแต่งด้วย CSS ให้มี typography, color palette และ spacing ที่อ่านง่าย

ศึกษาค้นคว้านอกเวลา

ทดลองปรับ theme สี 2 แบบ แล้วเปรียบเทียบผลต่อความอ่านง่ายและบุคลิกของเว็บ

คำถามทบทวน

  1. Selector และ Specificity ส่งผลต่อ CSS อย่างไร
  2. Padding และ Margin ต่างกันอย่างไร
  3. Visual Hierarchy ช่วยให้ผู้ใช้อ่านเว็บง่ายขึ้นอย่างไร

กลับรายวิชา