การใช้ HTML ร่วมกับ CSS เบื้องต้น

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

ทำไมต้องใช้ CSS?

HTML มีหน้าที่ในการกำหนดโครงสร้างของเนื้อหาบนหน้าเว็บ แต่ไม่ได้ออกแบบมาเพื่อการตกแต่งโดยตรง การใช้ CSS ช่วยให้เราแยกส่วนของการออกแบบ (Presentation) ออกจากโครงสร้าง (Structure) ซึ่งมีข้อดีหลายประการ:

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

วิธีการใช้ CSS ร่วมกับ HTML

มี 3 วิธีหลักในการใช้ CSS ร่วมกับ HTML:

Inline CSS: ใช้แอตทริบิวต์ style ในแท็ก HTML แต่ละแท็ก
Internal CSS: ใช้แท็ก <style> ภายในส่วน <head> ของ HTML
External CSS: ใช้ไฟล์ CSS ภายนอก และเชื่อมโยงกับ HTML โดยใช้แท็ก <link>

1. Inline CSS

Inline CSS เป็นวิธีที่ง่ายที่สุดในการเริ่มต้น แต่ไม่แนะนำให้ใช้ในระยะยาว เพราะทำให้โค้ด HTML ยุ่งเหยิงและยากต่อการบำรุงรักษา

ตัวอย่าง:

<p style="color: blue; font-size: 16px;">ข้อความนี้จะเป็นสีน้ำเงินและมีขนาด 16 พิกเซล</p>

ในตัวอย่างนี้ เราใช้แอตทริบิวต์ style ในแท็ก <p> เพื่อกำหนดสีและขนาดตัวอักษรให้กับข้อความ

2. Internal CSS

Internal CSS เหมาะสำหรับใช้ในการกำหนดสไตล์ให้กับหน้าเว็บเพียงหน้าเดียว โดยจะใส่โค้ด CSS ภายในแท็ก <style> ในส่วน <head> ของ HTML

ตัวอย่าง:

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    p {
      color: green;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <p>ข้อความนี้จะเป็นสีเขียวและใช้ฟอนต์ Arial</p>
</body>
</html>

ในตัวอย่างนี้ เรากำหนดสไตล์ให้กับแท็ก <p> ทั้งหมดในหน้าเว็บให้มีสีเขียวและใช้ฟอนต์ Arial

3. External CSS

External CSS เป็นวิธีที่แนะนำที่สุดในการใช้งาน CSS เพราะช่วยให้เราแยกโค้ด CSS ออกจาก HTML อย่างชัดเจน ทำให้โค้ดสะอาดและง่ายต่อการบำรุงรักษา นอกจากนี้ยังสามารถใช้ไฟล์ CSS เดียวกันกับหลายหน้าเว็บได้

ขั้นตอน:

สร้างไฟล์ CSS ใหม่ (เช่น style.css)
เขียนโค้ด CSS ในไฟล์ CSS
เชื่อมโยงไฟล์ CSS กับ HTML โดยใช้แท็ก <link> ในส่วน <head>

ตัวอย่าง:

ไฟล์ style.css:

body {
  background-color: #f0f0f0;
}

h1 {
  color: purple;
  text-align: center;
}

ไฟล์ index.html:

<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h1>
  <p>นี่คือเนื้อหาของหน้าเว็บ</p>
</body>
</html>

ในตัวอย่างนี้ เราสร้างไฟล์ CSS ชื่อ style.css และกำหนดสไตล์ให้กับ <body> และ <h1> จากนั้นเราเชื่อมโยงไฟล์ CSS กับ HTML โดยใช้แท็ก <link>

Selectors ใน CSS

Selectors ใน CSS ใช้เพื่อเลือกองค์ประกอบ HTML ที่เราต้องการกำหนดสไตล์ มีหลายประเภทของ Selectors เช่น:

Element Selector: เลือกองค์ประกอบตามชื่อแท็ก (เช่น p, h1, body)
Class Selector: เลือกองค์ประกอบที่มี class ที่กำหนด (ใช้ . นำหน้าชื่อ class)
ID Selector: เลือกองค์ประกอบที่มี id ที่กำหนด (ใช้ # นำหน้าชื่อ id)

Class Selectors

Class Selectors ใช้เพื่อกำหนดสไตล์ให้กับองค์ประกอบ HTML ที่มี class ที่กำหนด สามารถใช้ class เดียวกันกับหลายองค์ประกอบได้

ตัวอย่าง:

ไฟล์ style.css:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

ไฟล์ index.html:

<p>นี่คือข้อความปกติ</p>
<p class="highlight">นี่คือข้อความที่ถูกเน้น</p>
<p>นี่คือข้อความปกติอีกครั้ง</p>

ในตัวอย่างนี้ เรากำหนด class ชื่อ highlight และกำหนดสไตล์ให้มีพื้นหลังสีเหลืองและตัวหนา จากนั้นเราใช้ class นี้กับแท็ก <p> ที่เราต้องการเน้น

ID Selectors

ID Selectors ใช้เพื่อกำหนดสไตล์ให้กับองค์ประกอบ HTML ที่มี id ที่กำหนด ID แต่ละ id ควรมีเพียงหนึ่งเดียวในหน้าเว็บ

ตัวอย่าง:

ไฟล์ style.css:

#main-heading {
  color: navy;
  font-size: 24px;
}

ไฟล์ index.html:

<h1 id="main-heading">หัวข้อหลักของหน้าเว็บ</h1>

ในตัวอย่างนี้ เรากำหนด id ชื่อ main-heading และกำหนดสไตล์ให้มีสีน้ำเงินเข้มและขนาด 24 พิกเซล จากนั้นเราใช้ id นี้กับแท็ก <h1>

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

CSS มีคุณสมบัติมากมายที่ใช้ในการจัดรูปแบบข้อความและสี:

color: กำหนดสีของข้อความ
font-size: กำหนดขนาดตัวอักษร
font-family: กำหนดฟอนต์
font-weight: กำหนดความหนาของตัวอักษร (เช่น bold, normal)
text-align: กำหนดการจัดเรียงข้อความ (เช่น left, center, right)
background-color: กำหนดสีพื้นหลัง

ตัวอย่าง:

p {
  color: #333; /* สีเทาเข้ม */
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1.5; /* ระยะห่างระหว่างบรรทัด */
}

h2 {
  color: #007bff; /* สีฟ้า */
  text-align: center;
}

ในตัวอย่างนี้ เรากำหนดสไตล์ให้กับแท็ก <p> และ <h2> โดยใช้คุณสมบัติที่กล่าวมา

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการใช้ HTML ร่วมกับ CSS เพื่อตกแต่งหน้าเว็บ โดยเราได้ศึกษา Inline CSS, Internal CSS, และ External CSS รวมถึงการใช้ class และ id selectors ในการกำหนดสไตล์ให้กับองค์ประกอบ HTML นอกจากนี้เรายังได้เรียนรู้คุณสมบัติพื้นฐานในการจัดรูปแบบข้อความและสี การทำความเข้าใจพื้นฐานเหล่านี้จะช่วยให้คุณสามารถสร้างหน้าเว็บที่สวยงามและเป็นระเบียบมากยิ่งขึ้น