สอน HTML5 & CSS3 สำหรับผู้เริ่มต้น [Phase1]

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

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

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

CSS คืออะไร?

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

ประโยชน์ของ CSS

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

โครงสร้างของ CSS

โครงสร้างหลักของ CSS ประกอบด้วยสองส่วนสำคัญ คือ Selector และ Declaration

Selector

Selector คือส่วนที่ใช้ในการเลือก HTML element ที่คุณต้องการปรับแต่ง เช่น คุณอาจต้องการเลือกทุกย่อหน้า (p) หรือเลือกเฉพาะย่อหน้าที่มี class ชื่อ “highlight”

Declaration

Declaration คือส่วนที่ใช้ในการกำหนดคุณสมบัติและค่าให้กับ Selector Declaration จะประกอบด้วย property (คุณสมบัติ) และ value (ค่า) เช่น คุณอาจต้องการกำหนดให้ตัวอักษรในย่อหน้าเป็นสีแดง (color: red;)

รูปแบบการเข้าถึง CSS Selector

มี 3 รูปแบบหลักในการเข้าถึง CSS Selector ได้แก่ Element Selector, Class Selector และ ID Selector

Element Selector

Element Selector ใช้ในการเลือก HTML element โดยตรง เช่น p, h1, div Element Selector จะเลือกทุก element ที่มี tag name นั้นๆ

Class Selector

Class Selector ใช้ในการเลือก HTML element ที่มี class attribute ที่ตรงกับชื่อ class ที่คุณระบุ Class Selector เริ่มต้นด้วยเครื่องหมายจุด (.) ตามด้วยชื่อ class

ID Selector

ID Selector ใช้ในการเลือก HTML element ที่มี id attribute ที่ตรงกับ id ที่คุณระบุ ID Selector เริ่มต้นด้วยเครื่องหมาย # ตามด้วย id

Union Selector

Union Selector คือการรวม Selector หลายตัวให้มีคุณสมบัติเดียวกัน โดยใช้เครื่องหมาย comma (,) คั่นระหว่าง Selector

Tag Class Selector

Tag Class Selector คือการเลือก Element ที่มี Class เฉพาะ โดยระบุ Tag ตามด้วย Class

การกำหนดคุณสมบัติ (Decoration)

การกำหนดคุณสมบัติ (Decoration) คือการตั้งค่าต่างๆ เพื่อปรับแต่งรูปลักษณ์ของ HTML element ซึ่งประกอบด้วย Properties และ Value

Properties

Properties คือ คุณสมบัติที่คุณต้องการปรับแต่ง เช่น color (สีตัวอักษร), font-size (ขนาดตัวอักษร), background-color (สีพื้นหลัง)

Value

Value คือ ค่าที่คุณกำหนดให้กับ property เช่น red (สีแดง), 16px (ขนาดตัวอักษร 16 พิกเซล), #f0f0f0 (สีเทาอ่อน)

รูปแบบการประกาศใช้ CSS

มี 3 รูปแบบหลักในการประกาศใช้ CSS ได้แก่ Inline CSS, Internal CSS และ External CSS

Inline CSS

Inline CSS คือการเขียน Style ใน Tag HTML โดยตรง โดยใช้ attribute style เช่น <p style=”color: red;”>ข้อความ</p> Inline CSS มีความสำคัญน้อยที่สุดและควรหลีกเลี่ยง

Internal CSS

Internal CSS คือการเขียน Style ใน Tag <style> ในส่วน <head> ของ HTML document เช่น

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

External CSS

External CSS คือการเขียน Style ในไฟล์ .css แยกต่างหาก แล้วนำมาเชื่อมต่อกับ HTML document โดยใช้ tag <link> ในส่วน <head> เช่น

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

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

การเขียน Comment ใน CSS

Comment ใน CSS ใช้เพื่ออธิบายโค้ดและทำให้โค้ดอ่านง่ายขึ้น Comment จะไม่ถูกประมวลผลโดยเบราว์เซอร์ Comment ใน CSS ใช้รูปแบบ /* … */ เช่น

/* This is a comment */
p {
  color: red; /* This is also a comment */
}

หน่วยวัดใน CSS

หน่วยวัดใน CSS ใช้ในการกำหนดขนาดและระยะห่างต่างๆ มีทั้งแบบ Absolute Units (หน่วยตายตัว) และ Relative Units (หน่วยอัตราส่วน)

Absolute Units (หน่วยตายตัว)

Absolute Units เป็นหน่วยวัดที่มีค่าคงที่ ไม่เปลี่ยนแปลงตามขนาดหน้าจอหรือขนาดขององค์ประกอบอื่นๆ

px (พิกเซล): หน่วยวัดที่นิยมใช้มากที่สุด เหมาะสำหรับหน้าจอ
pt (พอยต์): หน่วยวัดที่ใช้ในการพิมพ์
cm (เซนติเมตร), mm (มิลลิเมตร), in (นิ้ว), pc (picas): หน่วยวัดอื่นๆ ที่ใช้ในการพิมพ์

Relative Units (หน่วยอัตราส่วน)

Relative Units เป็นหน่วยวัดที่มีค่าสัมพันธ์กับขนาดขององค์ประกอบอื่นๆ หรือขนาดหน้าจอ ทำให้เว็บไซต์สามารถปรับขนาดได้ตามความเหมาะสม

% (เปอร์เซ็นต์): อ้างอิงตามขนาดของ parent element
em: อ้างอิงตามขนาด font-size ของ element นั้นๆ หรือ parent element
rem: อ้างอิงตามขนาด font-size ของ root element (html)
vw (viewport width): อ้างอิงตามความกว้างของ viewport (หน้าจอ)
vh (viewport height): อ้างอิงตามความสูงของ viewport (หน้าจอ)
vmin: อ้างอิงตามขนาดที่เล็กที่สุดของ viewport (width หรือ height)
vmax: อ้างอิงตามขนาดที่ใหญ่ที่สุดของ viewport (width หรือ height)

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

💬 ปรึกษาการเงินฟรีกับผู้เชี่ยวชาญ คลิกเพื่อแอดไลน์

👉 แอดไลน์เพื่อปรึกษาฟรี

หรือสแกน QR เพื่อแอด

QR Code Line

สอน HTML5 & CSS3 สำหรับผู้เริ่มต้น [Phase1] ฉบับสมบูรณ์