CSS Part 01

สำหรับทำความเข้าใจหลักการทำงานและไวยากรณ์พื้นฐานของ CSS

1. การใช้งาน CSS (How to use CSS)

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

1. External Style Sheets

เป็นวิธีที่แนะนำที่สุด โดยการสร้างไฟล์ .css แยกต่างหาก แล้วเชื่อมโยงเข้ามาในหน้า HTML ด้วยแท็ก <link> วิธีนี้ทำให้สามารถใช้สไตล์เดียวกันในหลายๆ หน้าเว็บได้

<!-- ในไฟล์ index.html -->
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<!-- ในไฟล์ style.css -->
body {
  background-color: #f0f0f0;
}

2. Internal Style Sheets

เป็นการเขียน CSS ไว้ในแท็ก <style> ภายในส่วน <head> ของเอกสาร HTML ซึ่งจะมีผลเฉพาะกับหน้านั้นๆ เท่านั้น

<head>
  <style>
    h1 {
      color: green;
    }
    p {
      font-size: large;
    }
  </style>
</head>

3. Inline Styles

เป็นการกำหนดสไตล์โดยตรงที่ HTML element ผ่าน attribute style วิธีนี้ควรหลีกเลี่ยงหากไม่จำเป็น เพราะทำให้การแก้ไขและดูแลรักษาสไตล์ทำได้ยาก

<h1 style="color:blue; text-align:center;">This is a blue, centered heading</h1>

2. CSS Selectors

Selector คือส่วนที่ใช้ระบุว่าสไตล์ที่กำหนดจะถูกนำไปใช้กับ HTML element ใดบ้าง ซึ่งมีหลายรูปแบบเพื่อการเลือกที่เจาะจง

  • Tag Selector: เลือก element จากชื่อแท็ก เช่น p, h1, div
  • ID Selector: เลือก element ที่มี id ที่ตรงกัน ใช้สัญลักษณ์ # นำหน้า (ในหนึ่งหน้าเว็บควรมี id ที่ไม่ซ้ำกัน)
  • Class Selector: เลือก element ทั้งหมดที่มี class ที่ตรงกัน ใช้สัญลักษณ์ . นำหน้า
  • Group Selector: ใช้ , (comma) เพื่อเลือกหลาย selector พร้อมกันและใช้สไตล์เดียวกัน
  • Descendant Selector: ใช้เว้นวรรค (space) เพื่อเลือก element ที่อยู่ภายใน element อื่น (ไม่ว่าจะเป็นลูกโดยตรงหรือไม่)
  • Pseudo-class Selector: เลือก element ตามสถานะพิเศษของมัน เช่น :hover เมื่อนำเมาส์ไปชี้

ตัวอย่างการใช้ Selectors

ย่อหน้านี้ถูกเลือกด้วย ID Selector (#unique-id)

ย่อหน้านี้ถูกเลือกด้วย Class Selector (.highlight-class)

  • รายการนี้ก็ใช้ Class Selector เดียวกัน

ลิงก์นี้เป็นตัวอย่าง Pseudo-class: ลองเอาเมาส์มาวางหรือคลิกที่นี่

3. The Cascade (การทับซ้อนของ Styles)

เมื่อมีกฎ CSS หลายข้อที่กำหนดเป้าหมายไปที่ element เดียวกัน Browser จะต้องตัดสินใจว่าจะใช้กฎข้อไหน ซึ่งเรียกว่า "Cascade" โดยมีหลักการพิจารณาดังนี้:

  1. ความสำคัญ (Priority): สไตล์ที่ผู้สร้างเว็บเพจกำหนด (Author style sheet) จะมีความสำคัญเหนือสไตล์ของ Browser (User agent style sheet) แต่ถ้ามีการใช้ !important จะทำให้กฎนั้นมีลำดับความสำคัญสูงสุด
  2. ความเฉพาะเจาะจง (Specificity): Selector ที่มีความเฉพาะเจาะจงมากกว่าจะชนะ โดยลำดับความเฉพาะเจาะจงคือ Inline style > ID > Class > Tag
  3. ลำดับของกฎ (Rule Order): หากกฎมีความสำคัญและความเฉพาะเจาะจงเท่ากัน กฎที่ถูกประกาศไว้ทีหลังสุดในไฟล์ CSS จะถูกนำมาใช้

ข้อความนี้มีสีแดง เพราะ Inline style มีความเฉพาะเจาะจงสูงสุด

4. ระบบหน่วยวัดของ CSS (CSS Units)

หน่วยวัดใน CSS แบ่งเป็น 2 ประเภทหลัก:

Absolute Units

เป็นหน่วยวัดที่มีขนาดคงที่ ไม่ขึ้นอยู่กับขนาดของหน้าจอหรือ element อื่นๆ เหมาะสำหรับงานพิมพ์หรืองานที่ต้องการความแม่นยำสูง
ตัวอย่าง: px (pixels), pt (points), cm (centimeters)

Relative Units

เป็นหน่วยวัดที่อ้างอิงขนาดจาก element อื่นหรือขนาดของหน้าจอ (viewport) ทำให้การออกแบบมีความยืดหยุ่น (Responsive) มากกว่า
ตัวอย่าง:

  • em: อ้างอิงจากขนาดตัวอักษรของ parent element
  • rem: อ้างอิงจากขนาดตัวอักษรของ root element (<html>)
  • %: อ้างอิงจากขนาดของ parent element
  • vw / vh: 1% ของความกว้าง (width) / ความสูง (height) ของ viewport

ขนาด 1rem (เท่ากับ root font size, ปกติคือ 16px)

ขนาด 1.25em (1.25 เท่าของ 16px = 20px). ส่วนข้อความนี้มีขนาด 0.8em (0.8 เท่าของ 20px = 16px)

ความกว้าง 50vw (ครึ่งหนึ่งของความกว้างหน้าจอ)

5. การจัดรูปแบบตัวอักษร (Text Styling)

CSS มี property มากมายสำหรับจัดการรูปแบบของตัวอักษรและข้อความ

font-family
ใช้กำหนดรูปแบบของฟอนต์ เช่น Times New Roman (serif), Arial (sans-serif), Courier New (monospace).
font-size
กำหนดขนาดตัวอักษร เช่น Small, Large.
font-weight
กำหนดความหนาของตัวอักษร เช่น Normal (400), Bold (700).
color
กำหนดสีตัวอักษร เช่น สีน้ำเงิน, สีชมพู.
text-align
จัดตำแหน่งข้อความในแนวนอน (left, right, center, justify)
text-decoration
ตกแต่งข้อความ เช่น ขีดเส้นใต้, ขีดฆ่า, หรือ เอาขีดเส้นใต้ออกจากลิงก์
line-height
กำหนดความสูงของบรรทัด ทำให้ข้อความอ่านง่ายขึ้น
list-style-type
เปลี่ยนรูปแบบ bullet ของรายการ

ตัวอย่าง: จัดข้อความกึ่งกลาง

  • รายการที่ใช้ bullet แบบสี่เหลี่ยม
  • ด้วย list-style-type: square;
Back Top