Category: CSS

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

โครงสร้างของ CSS Box Model ประกอบไปด้วย 4 ส่วนหลัก ๆ

Content (เนื้อหา)

• เป็นส่วนที่บรรจุเนื้อหาจริง ๆ ขององค์ประกอบ ไม่ว่าจะเป็นข้อความ รูปภาพ หรือเนื้อหาอื่นๆ ขนาดของส่วนนี้จะถูกกำหนดโดย width และ height ขององค์ประกอบ

ตัวอย่าง

div {
  width: 200px;
  height: 100px;
}

Padding (ช่องว่างระหว่างเนื้อหาและขอบ)

• เป็นพื้นที่ระหว่างเนื้อหากับขอบขององค์ประกอบ กำหนดช่องว่างภายในขององค์ประกอบ (ยิ่งค่า padding มากขึ้น เนื้อหาจะยิ่งห่างจากขอบมากขึ้น)

• สามารถกำหนด padding ให้เฉพาะด้านใดด้านหนึ่งได้ เช่น padding-top, padding-right, padding-bottom, และ padding-left

CSS height และ width เป็นคุณสมบัติที่ใช้ในการกำหนดขนาดขององค์ประกอบ (elements) บนหน้าเว็บ โดยจะควบคุมความสูงและความกว้างของกล่อง (box) ขององค์ประกอบต่างๆ เช่น <div>, <img>, <p>, ฯลฯ

Width (ความกว้าง)

width ใช้ในการกำหนดความกว้างขององค์ประกอบ โดยค่าเริ่มต้นจะไม่รวม padding, border, และ margin หากไม่ได้กำหนด box-sizing: border-box;

รูปแบบทั่วไป

.element {
  width: 300px;
}

หน่วยที่ใช้

• px (พิกเซล) เป็นหน่วยที่ใช้บ่อยที่สุด มีความแม่นยำในระดับหน้าจอ
• % (เปอร์เซ็นต์) ใช้ในการกำหนดความกว้างเป็นเปอร์เซ็นต์ของพ่อแม่ (parent element)
• vw (viewport width) อ้างอิงตามความกว้างของ viewport
• em หรือ rem อ้างอิงตามขนาดฟอนต์ปัจจุบัน

Padding ใน CSS คือระยะห่างระหว่าง เนื้อหา (content) กับ ขอบ (border) ขององค์ประกอบ (element) มันจะเพิ่มพื้นที่ภายในองค์ประกอบ แต่ไม่กระทบกับขนาดความกว้างหรือความสูงขององค์ประกอบ ยกเว้นในกรณีที่มีการกำหนดอย่างชัดเจน Padding ช่วยทำให้เนื้อหาดูไม่เบียดจนเกินไป

รูปแบบการใช้ Padding

คุณสามารถกำหนดค่า Padding ได้หลายรูปแบบดังนี้

• ค่าเดียว

padding: 20px;

การกำหนดค่าเดียวนี้ จะใช้กับทุกด้าน (บน, ขวา, ล่าง, ซ้าย) ขององค์ประกอบ

• สองค่า

padding: 20px 10px;

20px ใช้กับด้านบนและด้านล่าง

10px ใช้กับด้านขวาและด้านซ้าย

CSS Margin คือคุณสมบัติใน CSS ที่ใช้ในการสร้างช่องว่างรอบๆ ขอบขององค์ประกอบ (Element) หรือที่เรียกว่า “ระยะห่างภายนอก” (outer spacing) ระหว่างองค์ประกอบในหน้าเว็บ การใช้ margin จะช่วยในการจัดวางองค์ประกอบให้ดูเรียบร้อยและเหมาะสมยิ่งขึ้น

ลักษณะการใช้งานของ CSS Margin

คุณสามารถกำหนดค่าของ margin ได้หลายวิธี โดยสามารถตั้งค่าให้กับทุกด้านขององค์ประกอบ (ด้านบน, ด้านขวา, ด้านล่าง, และด้านซ้าย) พร้อมกันหรือแยกกันได้ดังนี้

1. ใช้คุณสมบัติเดียว margin เพื่อกำหนดให้ทุกด้านพร้อมกัน

.element {
  margin: 20px;
}

ในกรณีนี้ ทุกด้านขององค์ประกอบจะมีระยะห่าง (margin) 20px ทั้งด้านบน (top), ด้านขวา (right), ด้านล่าง (bottom), และด้านซ้าย (left)

CSS Borders เป็นคุณสมบัติที่ใช้ในการกำหนดขอบขององค์ประกอบ (element) ในหน้าเว็บ เราสามารถปรับแต่งลักษณะของขอบได้หลายแบบ ทั้งความหนา สี และสไตล์

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

การกำหนดขอบใน CSS สามารถระบุได้ผ่านคุณสมบัติหลักๆ ดังนี้

border-width กำหนดความหนาของขอบ

border-style กำหนดสไตล์ของขอบ เช่น เส้นทึบ, เส้นประ เป็นต้น

border-color กำหนดสีของขอบ

หรือสามารถใช้ border เพียงตัวเดียวในการกำหนดทั้ง 3 ค่าพร้อมกัน

ตัวอย่างการกำหนด border แบบละเอียด

div {
  border-width: 2px;    /* ความหนาของขอบ */
  border-style: solid;  /* สไตล์ของขอบ */
  border-color: red;    /* สีของขอบ */
}

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

สีพื้นหลัง background-color

background-color ใช้เพื่อกำหนดสีพื้นหลังขององค์ประกอบ สามารถใช้สีในรูปแบบต่าง ๆ เช่น ชื่อสี รหัสสีแบบ Hex, RGB, RGBA, HSL หรือ HSLA

ตัวอย่าง

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

/* ใช้รหัสสีแบบ Hex */
div {
  background-color: #3498db;
}

/* ใช้ค่าสีแบบ RGB */
div {
  background-color: rgb(52, 152, 219);
}

/* ใช้ค่าสีแบบ RGBA (รวมความโปร่งใส) */
div {
  background-color: rgba(52, 152, 219, 0.7);
}

CSS สี (Color) เป็นหนึ่งในคุณสมบัติพื้นฐานที่ใช้ในการตกแต่งหน้าเว็บเพื่อเพิ่มความสวยงามและดึงดูดสายตา โดยใน CSS คุณสามารถกำหนดสีได้หลายรูปแบบ รวมถึงการใช้ชื่อสี (color names), รหัสสีแบบ Hex, ค่าสี RGB, ค่าสี HSL, และฟังก์ชันความโปร่งใส เช่น RGBA และ HSLA ต่อไปนี้จะเป็นคำอธิบายแบบละเอียดของแต่ละวิธี

ชื่อสี (Color Names)

CSS รองรับชื่อสีมาตรฐานมากกว่า 140 สี ซึ่งรวมถึงสีทั่วไป เช่น red, blue, green, yellow, และอื่นๆ ตัวอย่างการใช้งาน

h1 {
    color: red;
}

รหัสสีแบบ Hex (Hexadecimal Colors)

สีในรูปแบบนี้จะใช้เลขฐานสิบหกที่มี 6 ตัวอักษรเพื่อแสดงค่าสี โดยมีรูปแบบคือ #RRGGBB ซึ่ง RR หมายถึงค่าสีแดง (Red), GG หมายถึงค่าสีเขียว (Green), และ BB หมายถึงค่าสีน้ำเงิน (Blue) เช่น

p {
    color: #FF5733; /* สีส้ม */
}

แต่ถ้าหากค่าสีแต่ละชุดมีค่าเหมือนกัน สามารถย่อเหลือ 3 หลักได้ เช่น

p {
    color: #333; /* สีเทา */
}

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

รูปแบบการเขียนคอมเมนต์ใน CSS

คอมเมนต์ใน CSS จะเริ่มต้นด้วย /* และสิ้นสุดด้วย */ ข้อความที่อยู่ภายในเครื่องหมายนี้จะไม่ถูกอ่านโดยเบราว์เซอร์

ตัวอย่าง

/* This is a comment */
body {
    background-color: #f0f0f0;
}

ในตัวอย่างนี้ ข้อความ “This is a comment” คือคอมเมนต์ที่ไม่ส่งผลต่อการทำงานของ CSS ใด ๆ

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

การเพิ่ม CSS ภายใน (Internal CSS)

นี่คือการเพิ่ม CSS ในไฟล์ HTML โดยตรงผ่านแท็ก <style> ที่อยู่ภายใน <head> ของเอกสาร HTML

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการเพิ่ม CSS ภายใน</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            color: green;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>ยินดีต้อนรับ</h1>
    <p>นี่คือตัวอย่างการใช้ Internal CSS</p>
</body>
</html>

คำอธิบาย

• <style> เป็นแท็กที่ใช้เขียนโค้ด CSS ภายในไฟล์ HTML นั้น ๆ
• คุณสามารถกำหนดลักษณะต่าง ๆ เช่น สี ขนาด ฟอนต์ และการจัดวางให้กับองค์ประกอบ HTML ได้โดยตรง

CSS Selectors คือวิธีการที่ใช้ในการระบุหรือเลือกองค์ประกอบ (element) บนหน้าเว็บเพื่อที่จะทำการกำหนดสไตล์ให้กับองค์ประกอบนั้น ๆ ใน CSS เราสามารถใช้ selectors ได้หลากหลายรูปแบบเพื่อเลือกองค์ประกอบตามชื่อแท็ก, class, id, ลักษณะความสัมพันธ์ และสถานะต่าง ๆ ขององค์ประกอบ

Type Selector

เลือกองค์ประกอบโดยใช้ชื่อแท็ก (tag name)

p {
  color: blue;
}

ตัวอย่างนี้จะทำให้ข้อความใน <p> ทุกตัวในหน้าเว็บมีสีฟ้า

Class Selector

เลือกองค์ประกอบที่มีการกำหนด class ใด class หนึ่ง

.button {
  background-color: green;
}

จะเลือกองค์ประกอบที่มี class="button" และให้มีพื้นหลังสีเขียว