การเรียกใช้งาน CSS

How to add CSS

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

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

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

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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 ภายนอก (External CSS)

วิธีนี้เป็นการสร้างไฟล์ CSS แยกต่างหากจาก HTML แล้วนำไฟล์ CSS นั้นมาเชื่อมโยงในเอกสาร HTML ผ่านแท็ก <link>

1. สร้างไฟล์ CSS

สร้างไฟล์ใหม่ชื่อ styles.css

?
01
02
03
04
05
06
07
08
09
10
11
12
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: blue;
    text-align: center;
}
p {
    color: green;
    font-size: 16px;
}

2. เชื่อมโยงไฟล์ CSS กับ HTML

ในเอกสาร HTML ใช้ <link> เพื่อเชื่อมโยงกับไฟล์ CSS

?
01
02
03
04
05
06
07
08
09
10
11
12
13
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการเพิ่ม CSS ภายนอก</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>ยินดีต้อนรับ</h1>
    <p>นี่คือตัวอย่างการใช้ External CSS</p>
</body>
</html>

คำอธิบาย

  • <link> เป็นแท็กที่ใช้เพื่อเชื่อมโยงไฟล์ CSS ภายนอก โดยต้องระบุ href เพื่อบอกตำแหน่งของไฟล์ CSS

การเพิ่ม CSS แบบอินไลน์ (Inline CSS)

การเขียน CSS โดยตรงในแท็ก HTML โดยใช้แอตทริบิวต์ style

?
01
02
03
04
05
06
07
08
09
10
11
12
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการเพิ่ม CSS แบบอินไลน์</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">ยินดีต้อนรับ</h1>
    <p style="color: green; font-size: 16px;">นี่คือตัวอย่างการใช้ Inline CSS</p>
</body>
</html>

คำอธิบาย

  • ในการใช้ Inline CSS จะต้องเขียนโค้ด CSS ไว้ในแอตทริบิวต์ style ภายในแท็ก HTML นั้น ๆ โดยตรง

ข้อดี-ข้อเสียของแต่ละวิธี

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

วิธีที่แนะนำ

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

Leave a Reply