Category: CSS

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

CSS Syntax เขียนยังไง

CSS Syntax
CSS Syntax

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

โครงสร้าง CSS

selector {
  property: value;
  property: value;
  ...
}
  • Selector (ตัวเลือก) คือส่วนที่บอกว่าเราต้องการให้กฎ CSS นี้ใช้กับองค์ประกอบไหนใน HTML เช่น p สำหรับแท็ก <p>, .class สำหรับ class, #id สำหรับ id
  • Property (คุณสมบัติ) คือสิ่งที่เราต้องการเปลี่ยนแปลง เช่น สีของตัวอักษร (color), ขนาดของตัวอักษร (font-size), ระยะห่าง (margin/padding) เป็นต้น
  • Value (ค่า) คือค่าที่เรากำหนดให้กับคุณสมบัติ เช่น red สำหรับสี, 16px สำหรับขนาดตัวอักษร

ประเภทของ Selectors

Element Selector ใช้เลือกทุกองค์ประกอบที่เป็นแท็กนั้น ๆ

Continue reading “CSS Syntax เขียนยังไง”

CSS คืออะไร?

CSS3
CSS3

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

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

CSS ใช้ “กฎ” (Rules) เพื่อบอกว่าองค์ประกอบ HTML ใดจะได้รับรูปแบบอย่างไร กฎแต่ละกฎประกอบไปด้วยสองส่วนหลัก

ตัวเลือก (Selector) ระบุว่าองค์ประกอบใดใน HTML ที่จะถูกปรับแต่ง

คุณสมบัติ (Property) และค่า (Value) เป็นคู่ข้อมูลที่กำหนดว่าจะเปลี่ยนลักษณะขององค์ประกอบอย่างไร

ตัวอย่าง

h1 {
    color: blue;
    font-size: 24px;
}

ในตัวอย่างนี้ h1 เป็น selector ที่บอกว่าให้เปลี่ยนแปลงรูปแบบของหัวข้อ h1 โดยมีการเปลี่ยนสีเป็นสีฟ้า (color: blue;) และขนาดของตัวอักษรเป็น 24 พิกเซล (font-size: 24px;)

Continue reading “CSS คืออะไร?”