วิธีเชื่อม CSS กับ HTML
วิธีเชื่อม CSS กับ HTML
เพื่อเชื่อม CSS (Cascading Style Sheets) กับ HTML, คุณจะใช้แท็ก `<link>` หรือแท็ก `<style>` ในเอกสาร HTML ของคุณ ดังนี้:
1. ใช้แท็ก `<link>`:
- ใช้แท็ก `<link>` เพื่อเชื่อมโยงไฟล์ CSS จากภายนอก เช่นไฟล์ CSS บนเซิร์ฟเวอร์หรือเว็บไซต์อื่น ๆ.
- แท็ก `<link>` นี้ควรถูกวางในส่วนหัว (head) ของหน้าเว็บ HTML เพื่อให้ CSS ถูกโหลดก่อนการแสดงผลหน้าเว็บ.
- นี่คือตัวอย่างการใช้แท็ก `<link>`:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- เนื้อหาของหน้าเว็บ -->
</body>
</html>
```
ในตัวอย่างนี้, เราใช้ `<link>` เพื่อเชื่อมโยงไฟล์ CSS ชื่อ "styles.css" ที่อยู่ในไดเรกทอรีเดียวกับหน้า HTML.
2. ใช้แท็ก `<style>`:
- ใช้แท็ก `<style>` เพื่อรวมรหัส CSS ลงในหน้า HTML โดยตรง.
- แท็ก `<style>` นี้ควรถูกวางในส่วนหัว (head) ของหน้าเว็บ HTML หรือในตัวเอกสาร HTML เอง.
- นี่คือตัวอย่างการใช้แท็ก `<style>`:
```html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* รหัส CSS ที่รวมในนี้ */
body {
background-color: lightblue;
}
h1 {
color: darkblue;
}
</style>
</head>
<body>
<h1>สวัสดี, นี่คือหัวข้อ</h1>
<p>นี่คือเนื้อหาของหน้าเว็บ</p>
</body>
</html>
```
ในทั้งสองวิธีด้านบน, คุณสามารถใส่รหัส CSS ที่คุณต้องการเพิ่มลงในไฟล์ CSS หรือในแท็ก `<style>` ตามที่คุณมีความคุ้นเคย และ CSS จะถูกใช้บนหน้าเว็บ HTML ของคุณเพื่อปรับรูปแบบและสไตล์ของเนื้อหาในหน้าเว็บนั้น.
ความคิดเห็น
แสดงความคิดเห็น