05: CSS Fundamentals

เริ่มต้นตกแต่งหน้าเว็บให้สวยงามด้วย CSS (Cascading Style Sheets)

1. วิธีเขียน CSS (3 แบบ)

สามารถสั่งให้ CSS ทำงานได้ 3 วิธี แต่ละวิธีมีข้อดี-ข้อเสียต่างกัน

1. Inline Style

ฝังลงใน Tag เลย (ไม่แนะนำให้ใช้เยอะ)

html 
<h1 style="color: blue;">
  สวัสดี
</h1>
2. Internal CSS

เขียนไว้ในส่วน <head> ของไฟล์นั้นๆ

html 
<style>
  h1 { 
    color: blue; 
  }
</style>
3. External CSS

แยกไฟล์ .css ต่างหาก (มาตรฐานที่ถูกต้อง)

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

2. Selectors

หัวใจของ CSS คือการ "ชี้เป้า" ให้ถูกตัว มีวิธีการเลือกตั้งแต่พื้นฐานไปจนถึงเทคนิคขั้นสูง

2.1 Basic Selectors (พื้นฐาน)
Tag Selector
เหมาทั้งหน้า

เลือกจากชื่อ Tag (กระทบทุกตัวในหน้า)

HTML 
<p>ย่อหน้าที่ 1</p>
<p>ย่อหน้าที่ 2</p>
CSS 
p {
  color: gray;
}
Class Selector (.)
ใช้บ่อยที่สุด

เลือกจาก "ชื่อกลุ่ม" (ซ้ำกันได้)

HTML 
<div class="box">A</div>
<div class="box">B</div>
CSS 
.box {
  border: 1px solid red;
}
ID Selector (#)
ห้ามซ้ำ

เลือกจาก "ค่าประจำตัว" (มีได้ตัวเดียว)

HTML 
<div id="logo">Brand</div>
CSS 
#logo {
  font-size: 30px;
}
2.2 Advanced Selectors

เลือกแบบเจาะจง โดยดูจากความสัมพันธ์ของ Tag

1. Group Selector (,)

ใช้เมื่ออยากแต่งหลาย ๆ Elements ให้เหมือนกัน (ประหยัดบรรทัด)

HTML 
<h1>หัวข้อหลัก</h1>
<h2>หัวข้อรอง</h2>
CSS 
/* เครื่องหมาย comma (,) แปลว่า "และ" */
h1, h2 {
  color: navy;
  text-align: center;
}
2. Descendant (ลูกหลาน)

ใช้ เว้นวรรค คือ เลือกทุกลำดับชั้นที่อยู่ข้างใน (ลูก, หลาน, เหลน โดนหมด)

HTML 
<div class="container">
  <p>ฉันคือลูก (โดน)</p>
  <article>
     <p>ฉันคือหลาน (โดนด้วย)</p>
  </article>
</div>
CSS 
/* เลือก p ทุกตัว ที่อยู่ใน .container */
.container p {
  color: red;
}
3. Child (ลูกแท้ๆ)

ใช้ เครื่องหมาย > คือ เลือกเฉพาะลูกที่อยู่ติดกันชั้นเดียว (หลานไม่เกี่ยว)

HTML 
<div class="container">
  <p>ฉันคือลูก (โดนคนเดียว)</p>
  <article>
     <p>ฉันคือหลาน (รอดตัวไป)</p>
  </article>
</div>
CSS 
/* เลือก p เฉพาะที่เป็นลูกติดตัว */
.container > p {
  color: blue;
}

3. ระบบสี

ใน CSS เรากำหนดสีได้หลายรูปแบบ แต่ที่นิยมใช้มี 3 แบบหลักๆ

1. Hex Code
#FF5733

ใช้รหัสเลขฐาน 16 (RRGGBB) นิยมใช้มากที่สุด

2. RGB
rgb(255, 87, 51)

ผสมสี แดง-เขียว-น้ำเงิน (ค่า 0-255)

3. RGBA (Opacity)
rgba(255, 87, 51, 0.5)

เหมือน RGB แต่เพิ่มตัว A (Alpha) คือความโปร่งใส (0.0 - 1.0)

4. Text & Fonts

4.1 Basic Properties
Typography CSS 
h1 {
  /* 1. สีตัวอักษร */
  color: #333; 

  /* 2. ขนาด (px, rem, em) */
  font-size: 24px; 

  /* 3. ความหนา (normal, bold, 100-900) */
  font-weight: bold; 

  /* 4. การจัดตำแหน่ง (left, center, right) */
  text-align: center; 
}

Hello World

ทดสอบการจัดรูปแบบข้อความ

Image CSS 
img {
  /* 1. กำหนดขนาด (Width/Height) */
  width: 100%;       /* ปรับความกว้างตามกล่องที่ใส่ (หรือใส่เป็น px) */
  max-width: 300px;  /* จำกัดความกว้างสูงสุดไม่ให้ใหญ่เกินไป */
  height: auto;      /* สำคัญ! ช่วยรักษาสัดส่วนภาพไม่ให้เบี้ยว */

  /* 2. ความโค้งมนของขอบ (Border Radius) */
  border-radius: 8px; /* ใส่ค่ามากขอบยิ่งมน (ใส่ 50% เป็นวงกลม) */

  /* 3. การจัดตำแหน่ง (Alignment) */
  display: block;    /* เปลี่ยนสถานะให้เป็นบล็อกเพื่อจัดตำแหน่ง */
  margin: 0 auto;    /* จัดกึ่งกลางหน้าจอ (บน-ล่าง 0, ซ้าย-ขวา auto) */

  /* 4. ตกแต่งเพิ่มเติม (Decoration) */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* ใส่เงาให้ดูมีมิติ */
  object-fit: cover; /* (กรณีระบุ height) ตัดส่วนเกินออกให้ภาพเต็มกรอบสวยงาม */
}
Sample Image

ทดสอบการจัดรูปแบบรูปภาพ

4.2 Font Family & Google Fonts

การเลือกฟอนต์ที่เหมาะสม ช่วยให้เว็บดูดีขึ้น

Generic Font Families (5 ตระกูลมาตรฐาน)
ตระกูล (Family) ลักษณะเด่น ตัวอย่าง Code
Serif มี "เชิง" (ขีดที่ปลายตัวอักษร) ดูเป็นทางการ, คลาสสิก
CSS 
font-family: "Times New Roman", serif;
Sans-serif "ไม่มีเชิง" เรียบง่าย ทันสมัย
CSS 
font-family: Arial, sans-serif;
Monospace ความกว้างเท่ากันทุกตัวอักษร (เหมือนเครื่องพิมพ์ดีด/โค้ด)
CSS 
font-family: "Courier New", monospace;
Cursive เลียนแบบลายมือเขียน (Handwriting) ดูเป็นกันเอง
CSS 
font-family: "Brush Script MT", cursive;
Fantasy แบบตกแต่งพิเศษ แฟนตาซี (ใช้เฉพาะหัวข้อ)
CSS 
font-family: Impact, fantasy;
วิธีติดตั้ง Google Fonts (Step-by-Step)
  1. เข้าเว็บ fonts.google.com แล้วเลือกฟอนต์ที่ชอบ (เช่น "Kanit")
  2. กดปุ่ม Get font (หรือเครื่องหมาย +)
  3. กดปุ่ม Get embed code
  4. Copy โค้ดในช่อง Web (เลือกแบบ <link>) ไปวางใน <head> ของ HTML
  5. Copy โค้ด CSS class ไปใส่ในไฟล์ CSS
index.html (ใน <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=Kanit:wght@300;400;700&display=swap" rel="stylesheet">
style.css 
body {
  /* ใช้ชื่อฟอนต์ให้ตรงกับที่เลือกมา */
  font-family: 'Kanit', sans-serif;
}

Workshop: แต่งสวยให้ Travel Page

นำไฟล์ travel.html จากสัปดาห์ที่ 1 มาตกแต่งให้สวยงามด้วย External CSS:

  1. สร้างไฟล์ style.css ในโฟลเดอร์เดียวกัน
  2. เชื่อมไฟล์ด้วย <link rel="stylesheet" href="style.css"> ใน travel.html
  3. เปลี่ยน Background ของทั้งหน้าเว็บ (body) เป็นสีครีมอ่อน ๆ
  4. จัด หัวข้อ (h1) ให้เป็นสีน้ำเงินเข้ม และอยู่กึ่งกลาง
  5. ปรับ รูปภาพ (img) ให้มีความกว้าง 100% แต่ไม่เกิน 600px และจัดกึ่งกลาง (ใช้ display: block; margin: auto;)
Practice Mission: สร้างนามบัตรดิจิทัล "Link-in-Bio"
บรีฟจากลูกค้า (Influencer ท่านหนึ่ง):

"อยากได้หน้าเว็บรวมลิงก์เอาไว้แปะหน้า IG ขอโทนสีพาสเทล ดูมินิมอล ใช้ฟอนต์ภาษาไทยสวย ๆ"

1. โครงสร้าง HTML (สร้างไฟล์ bio.html)
  • Profile Image: ใส่รูปโปรไฟล์ (class="profile-pic")
  • Name & Bio: ชื่อ (h1) และคำบรรยายสั้นๆ (p)
  • Social Links: สร้างรายการของลิงก์ (ul > li > a) อย่างน้อย 3 ลิงก์ (เช่น Facebook, YouTube, IG) โดยให้ <a> มี class="btn-link"
  • Footer: ข้อความ Copyright เล็ก ๆ ด้านล่าง
2. ตกแต่ง CSS (สร้างไฟล์ bio-style.css)
  • Connect: เชื่อมไฟล์ CSS เข้ากับ HTML ให้ถูกต้อง
  • Font: ไปที่ Google Fonts เลือกฟอนต์มาใช้กับทั้งหน้าเว็บ (body)
  • Background: กำหนดสีพื้นหลังของทั้งหน้าเว็บ
  • Text Align: จัดทุกอย่างให้อยู่ กึ่งกลาง (text-align: center)
3. เก็บรายละเอียดให้สวยงาม

ใช้ Class Selector เพื่อตกแต่งเฉพาะจุด:

  • รูปโปรไฟล์ (.profile-pic): กำหนดความกว้าง 150px และทำเป็นวงกลม (ใช้ border-radius: 50%)
  • ชื่อ (h1): เปลี่ยนสีตัวอักษรให้เป็นสีเข้ม ๆ
  • รายการ (ul): เอาจุด Bullet ออก (ใช้ list-style: none; และ padding: 0;)
  • ปุ่มลิงก์ (.btn-link): ใส่สีพื้นหลัง (background-color), เปลี่ยนสีตัวอักษรเป็นสีขาว, และเอาขีดเส้นใต้ออก (text-decoration: none;)
บทก่อนหน้า บทต่อไป