Kodokon kodokon.com

การเชื่อม CSS เข้ากับหน้าเว็บ

ทำความรู้จักว่า CSS คืออะไร วิธีเชื่อมมันเข้ากับหน้า HTML และวิธีเขียนกฎแรกของคุณ

8 นาที · 3 คำถาม

เปิดบทเรียนนี้ใน Kodokon

HTML อธิบายเนื้อหาของหน้าเว็บ ทั้งหัวข้อ ย่อหน้า และรูปภาพ ส่วน CSS (ย่อมาจาก Cascading Style Sheets) อธิบายหน้าตาของมัน ทั้งสี ขนาด และระยะห่าง ลองนึกภาพบ้านหลังหนึ่ง HTML คือกำแพงและห้องต่าง ๆ ส่วน CSS คือสีทา เฟอร์นิเจอร์ และของตกแต่ง หากไม่มี CSS ทุกหน้าเว็บก็จะหน้าตาเหมือนกันหมด คือตัวอักษรสีดำบนพื้นหลังสีขาว

กฎของ CSS ประกอบด้วยสามส่วน ส่วนแรกคือ ตัวเลือก (selector) ซึ่งบอกว่าองค์ประกอบใดบนหน้าจะได้รับผลกระทบ (เช่น ย่อหน้าทั้งหมด) จากนั้นภายในวงเล็บปีกกา { } จะมี การประกาศ (declaration) หนึ่งรายการหรือมากกว่านั้น การประกาศแต่ละรายการจับคู่ คุณสมบัติ (property) (สิ่งที่คุณต้องการเปลี่ยน เช่น สี) เข้ากับ ค่า (value) (ตัวเลือกที่คุณกำหนด เช่น สีแดง) โดยคั่นด้วยเครื่องหมายทวิภาค : และปิดท้ายด้วยเครื่องหมายอัฒภาค ;

CSS
p {
  color: red;
  font-size: 18px;
}
กฎของ CSS: ทุกย่อหน้าเป็นสีแดง ขนาด 18 พิกเซล

มาอ่านกฎนี้ทีละคำกัน p คือตัวเลือก มันเจาะจงทุกองค์ประกอบ <p> บนหน้า หรืออีกนัยหนึ่งคือย่อหน้า color คือคุณสมบัติที่กำหนดสีของข้อความ และ red คือค่าของมัน font-size กำหนดขนาดของข้อความ ในที่นี้คือ 18px (18 พิกเซล ซึ่งเป็นหน่วยที่ใช้วัดหน้าจอ) มีสามวิธีในการเชื่อม CSS นี้เข้ากับหน้า HTML วิธีที่แนะนำคือ ไฟล์ภายนอก (external file) โดย CSS จะอยู่ในไฟล์ของตัวเอง เช่น styles.css ซึ่งคุณเสียบเข้ากับ HTML ด้วยแท็ก <link> ที่วางไว้ภายใน <head>

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>This text will be red.</p>
  </body>
</html>
แท็ก <link> เชื่อมไฟล์ styles.css เข้ากับหน้าเว็บ

วิธีที่สอง: CSS ภายใน (internal CSS) คุณเขียนกฎลงในไฟล์ HTML โดยตรง ภายในแท็ก <style> ที่วางไว้ใน <head> วิธีนี้สะดวกสำหรับการทดสอบอย่างรวดเร็ว แต่สไตล์จะมีผลกับหน้านั้นเพียงหน้าเดียว วิธีที่สาม: CSS แบบอินไลน์ (inline CSS) คุณเขียนการประกาศลงบนแท็กโดยตรง ในแอตทริบิวต์ style สังเกตว่าไม่มีตัวเลือกและไม่มีวงเล็บปีกกา เพราะสไตล์มีผลกับแท็กนั้นเพียงแท็กเดียวเท่านั้น

HTML
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p style="color: blue;">I am blue.</p>
  <p>I am red.</p>
</body>
CSS ภายในอยู่ใน <style> และ CSS แบบอินไลน์อยู่บน <p> ตัวแรก

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

  1. ในกฎ p { color: red; } color คืออะไร?
    • ตัวเลือก
    • คุณสมบัติ
    • ค่า
    • เครื่องหมายอัฒภาค
  2. แท็กใดที่เชื่อมไฟล์ CSS ภายนอกเข้ากับหน้า HTML?
    • <style>
    • <css>
    • <link rel="stylesheet" href="styles.css">
  3. ทำไมไฟล์ CSS ภายนอกจึงเป็นวิธีที่แนะนำ?
    • เป็นวิธีเดียวที่ทำงานได้บนมือถือ
    • ไฟล์เดียวสามารถจัดสไตล์ให้หลายหน้าพร้อมกัน
    • มันทำให้เขียนโค้ดเว็บได้เร็วขึ้นโดยอัตโนมัติ