Introduction

CSS คืออะไร?

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

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

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

1. สร้างเว็บไซต์ที่สวยงาม

หากเว็บไซต์มีเพียง HTML อย่างเดียว จะได้เพียงข้อความและรูปภาพที่เรียงต่อกัน ไม่มีการจัดวางที่สวยงาม CSS ช่วยให้เราสามารถ:

• ปรับแต่งสีและรูปแบบตัวอักษร
• จัดวางองค์ประกอบให้น่าสนใจ
• เพิ่มเอฟเฟกต์และการเคลื่อนไหว

เว็บไซต์ที่ไม่ใช้ CSS

ToggleExpand

2. ประหยัดเวลาในการพัฒนา

CSS ช่วยให้เราสามารถกำหนดสไตล์ครั้งเดียวแล้วนำไปใช้ได้ทั้งเว็บไซต์ ไม่ต้องเสียเวลากำหนดสไตล์ซ้ำๆ ในทุกหน้า เช่น:

• กำหนดสีหลักของเว็บไซต์
• รูปแบบปุ่มที่ใช้ทั้งเว็บ
• ขนาดและสไตล์ของหัวข้อ

<div class="container">  
  <!-- หน้าที่ 1 -->  
  <section class="section">  
    <h2 class="site-heading">
      หน้าหลัก
    </h2>  
    <p>เนื้อหาหน้าหลักของเว็บไซต์</p>  
    <button class="site-button">
      อ่านเพิ่มเติม
    </button>  
  </section>

  <!-- หน้าที่ 2 -->
  <section class="section">
    <h2 class="site-heading">
      เกี่ยวกับเรา
    </h2>
    <p>ข้อมูลเกี่ยวกับบริษัทของเรา</p>
    <button class="site-button">
      ติดต่อเรา
    </button>
  </section>

  <!-- หน้าที่ 3 -->
  <section class="section">
    <h2 class="site-heading">บริการ</h2>
    <p>บริการต่างๆ ที่เรามีให้</p>
    <button class="site-button">
      ดูบริการทั้งหมด
    </button>
  </section>

</div>

จากตัวอย่างข้างต้น สามารถเห็นได้ว่าเรากำหนดสไตล์หลักของเว็บไซต์ในตัวแปรที่เรียกว่า Custom Properties หรือ CSS Variables แล้วนำไปใช้ในทุกส่วนของเว็บไซต์ ทำให้การเปลี่ยนแปลงสไตล์เว็บไซต์เป็นเรื่องง่ายและรวดเร็ว

Loading...

3. รองรับทุกอุปกรณ์

ปัจจุบันผู้ใช้เข้าเว็บผ่านอุปกรณ์ที่หลากหลาย โดยใน CSS จะเรียกว่า Media Query (เราจะมาทำความรู้จักกันในหัวข้อ Media Query และเรียนรู้การใช้งานในหัวข้อ CSS Responsive) ซึ่ง CSS ช่วยให้:

• เว็บแสดงผลได้ดีทั้งบนมือถือและคอมพิวเตอร์
• ปรับขนาดและการจัดวางตามหน้าจอ
• รักษาประสบการณ์การใช้งานที่ดีบนทุกอุปกรณ์

Previous slideNext slide

โครงสร้างพื้นฐานของ CSS (Syntax)

1. รูปแบบพื้นฐาน

Loading...

ตัวอย่าง:

Loading...

2. องค์ประกอบของ CSS

Selector: ตัวเลือกที่ระบุว่าจะจัดรูปแบบให้กับส่วนใดของ HTML

Loading...

Declaration Block: ส่วนที่อยู่ภายในเครื่องหมาย { }

• ประกอบด้วย property และ value
• แต่ละ declaration ต้องจบด้วยเครื่องหมาย Semicolon หรือ ;

Property: คุณสมบัติที่ต้องการกำหนด เช่น

Loading...

3. วิธีการใช้งาน CSS

Inline CSS: เขียนโดยตรงในแท็ก HTML

Loading...

Internal CSS: เขียนในส่วน head ของ HTML

Loading...

External CSS: เขียนแยกไฟล์ โดยใช้นามสกุลไฟล์ว่า .css

Loading...