จัดรูปแบบเว็บไซต์ด้วย CSS: สี, ตัวอักษร, และการจัดวาง

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

CSS คืออะไร? ทำไมต้องใช้?

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

วิธีการใส่ CSS ให้กับเว็บไซต์

มี 3 วิธีหลักๆ ในการใส่ CSS ให้กับเว็บไซต์ของเราครับ:

Inline CSS: เขียน CSS ลงใน HTML tag โดยตรง
Internal CSS: เขียน CSS ภายใน tag <style> ในส่วน <head> ของ HTML
External CSS: เขียน CSS ในไฟล์แยก (นามสกุล .css) แล้วเชื่อมโยงกับ HTML

1. Inline CSS

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

<p style="color: blue; font-size: 16px;">ข้อความสีฟ้า ขนาด 16px</p>

ในตัวอย่างนี้ เรากำหนดให้ข้อความใน <p> tag เป็นสีฟ้า (color: blue;) และมีขนาด 16px (font-size: 16px;)

ข้อควรระวัง: Inline CSS เหมาะกับการทดลองหรือแก้ไข style เล็กๆ น้อยๆ เท่านั้น ไม่ควรใช้กับเว็บไซต์ขนาดใหญ่

2. Internal CSS

Internal CSS คือการเขียน CSS ภายใน tag <style> ในส่วน <head> ของ HTML วิธีนี้ช่วยให้เราจัดกลุ่ม CSS ไว้ในที่เดียว ทำให้โค้ด HTML ของเราดูเป็นระเบียบมากขึ้น

<!DOCTYPE html>
<html>
<head>
  <title>เว็บไซต์ของฉัน</title>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>ข้อความสีเขียว ขนาด 18px</p>
</body>
</html>

ในตัวอย่างนี้ เรากำหนดให้ข้อความใน <p> tag ทั้งหมดเป็นสีเขียว (color: green;) และมีขนาด 18px (font-size: 18px;)

ข้อควรระวัง: Internal CSS เหมาะกับเว็บไซต์ที่มีขนาดเล็กและมี style ไม่เยอะมาก

3. External CSS

External CSS คือการเขียน CSS ในไฟล์แยก (นามสกุล .css) แล้วเชื่อมโยงกับ HTML วิธีนี้เป็นวิธีที่แนะนำสำหรับการสร้างเว็บไซต์ขนาดใหญ่ เพราะช่วยให้เราแยก CSS ออกจาก HTML อย่างชัดเจน ทำให้โค้ดของเราดูเป็นระเบียบและง่ายต่อการแก้ไข

ขั้นตอน:

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

ตัวอย่าง:

ไฟล์ style.css:

body {
  background-color: #f0f0f0; /* สีพื้นหลัง */
}

h1 {
  color: navy; /* สีหัวข้อ */
  text-align: center; /* จัดข้อความกึ่งกลาง */
}

ไฟล์ index.html:

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

ในตัวอย่างนี้ เราเชื่อมโยงไฟล์ style.css กับ HTML โดยใช้ <link rel="stylesheet" href="style.css"> ซึ่งจะทำให้ style ที่เรากำหนดใน style.css ถูกนำไปใช้กับ HTML

CSS Selectors: เลือกส่วนประกอบที่ต้องการจัดรูปแบบ

CSS Selectors คือตัวที่ใช้ในการเลือก HTML elements ที่เราต้องการจะจัดรูปแบบ CSS มี selectors หลายแบบ แต่ที่สำคัญและใช้งานบ่อยมีดังนี้:

Element Selector: เลือกจากชื่อ tag (เช่น p, h1, body)
Class Selector: เลือกจาก class attribute (เช่น .highlight)
ID Selector: เลือกจาก id attribute (เช่น #header)

Element Selector

Element Selector คือการเลือก HTML elements โดยใช้ชื่อ tag

p {
  color: red;
}

โค้ดนี้จะทำให้ข้อความใน <p> tag ทั้งหมดเป็นสีแดง

Class Selector

Class Selector คือการเลือก HTML elements โดยใช้ class attribute โดยใส่จุด (.) นำหน้าชื่อ class

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

.highlight {
  background-color: yellow;
}

โค้ดนี้จะทำให้พื้นหลังของ <p> tag ที่มี class เป็น "highlight" เป็นสีเหลือง

ID Selector

ID Selector คือการเลือก HTML elements โดยใช้ id attribute โดยใส่เครื่องหมาย # นำหน้าชื่อ id

<h1 id="main-title">หัวข้อหลัก</h1>

#main-title {
  font-size: 24px;
}

โค้ดนี้จะทำให้ขนาดตัวอักษรของ <h1> tag ที่มี id เป็น "main-title" เป็น 24px

ข้อควรจำ: ID ควรมีเพียงหนึ่งเดียวในหน้า HTML หนึ่งหน้าเท่านั้น ในขณะที่ Class สามารถใช้ซ้ำได้หลายครั้ง

คุณสมบัติ CSS ที่สำคัญ

ต่อไปนี้เป็นคุณสมบัติ CSS ที่สำคัญและใช้งานบ่อย:

color: กำหนดสีของตัวอักษร
font-family: กำหนดรูปแบบตัวอักษร
font-size: กำหนดขนาดตัวอักษร
margin: กำหนดระยะห่างจากขอบภายนอกของ element
padding: กำหนดระยะห่างจากขอบภายในของ element

สี (color)

เราสามารถกำหนดสีได้หลายวิธี เช่น:

ชื่อสี: เช่น red, blue, green
Hex code: เช่น #ff0000 (สีแดง), #0000ff (สีน้ำเงิน)
RGB: เช่น rgb(255, 0, 0) (สีแดง), rgb(0, 0, 255) (สีน้ำเงิน)

p {
  color: blue; /* ใช้ชื่อสี */
}

h1 {
  color: #336699; /* ใช้ Hex code */
}

ตัวอักษร (font-family, font-size)

font-family ใช้กำหนดรูปแบบตัวอักษร เช่น Arial, Times New Roman, Verdana

body {
  font-family: Arial, sans-serif;
}

font-size ใช้กำหนดขนาดตัวอักษร (หน่วยเป็น px, em, rem)

p {
  font-size: 16px;
}

การจัดวาง (margin, padding)

margin ใช้กำหนดระยะห่างจากขอบภายนอกของ element

div {
  margin: 20px; /* ระยะห่างรอบด้าน 20px */
}

padding ใช้กำหนดระยะห่างจากขอบภายในของ element

div {
  padding: 10px; /* ระยะห่างภายในรอบด้าน 10px */
}

ข้อแตกต่างระหว่าง margin และ padding: Margin คือระยะห่าง *ภายนอก* element ส่วน Padding คือระยะห่าง *ภายใน* element

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการใช้ CSS เพื่อตกแต่งเว็บไซต์ของเราให้สวยงามและน่าสนใจยิ่งขึ้น เราได้เรียนรู้เกี่ยวกับวิธีการใส่ CSS (Inline, Internal, External), CSS Selectors (Element, Class, ID), และคุณสมบัติ CSS ที่สำคัญ (color, font-family, font-size, margin, padding) ลองนำความรู้ที่ได้ไปปรับใช้กับเว็บไซต์ของคุณดูนะครับ ในบทต่อไป เราจะมาเรียนรู้การสร้างเมนูนำทาง (Navigation Menu) แบบง่ายๆ กันครับ