วิธีใช้งาน Element <link> ใน HTML

เรียนรู้วิธีใช้งาน Element <link> ใน HTML

Element <link> ใน HTML ใช้หลักสำหรับนำเข้าไฟล์ CSS ภายนอกที่เพิ่มสไตล์ให้เว็บไซต์

Element <link> อยู่ภายใน Element <head> และรับแอตทริบิวต์หลายประเภท:

<!DOCTYPE html> <html> <head> <title>Document title</title> <link href="/styles/main.css" rel="stylesheet" /> </head> <body></body> </html>

แอตทริบิวต์ที่พบบ่อยที่สุดของ <link> คือสองตัวที่เห็นข้างต้น href และ rel:

• href ระบุตำแหน่งของไฟล์ที่ลิงก์ เช่น ไฟล์สไตล์ชีตชื่อ main.css
• rel ย่อมาจาก relationship ระบุความสัมพันธ์ระหว่างเอกสารและไฟล์ CSS ที่ลิงก์

วิธีอื่นในการจัดสไตล์เว็บไซต์คือใช้ Element <style> ซึ่งฝัง CSS โดยตรงในเอกสาร (เรียกว่า Internal CSS)

แต่วิธีสมัยใหม่คือใช้ <link> นำเข้าสไตล์ ไม่ว่าจากโฟลเดอร์โปรเจกต์ของคุณ your-project/styles/main.css หรือจากผู้ให้บริการภายนอก (โดเมนอื่น)

ข้อมูลที่ควรทราบ:

หากใช้ทั้ง <style> และ <link> ในเอกสารเดียวกัน จะง่ายมากที่จะทับซ้อนสไตล์โดยไม่ได้ตั้งใจ

ตัวอย่างที่ใช้ทั้งสองวิธี:

<!DOCTYPE html> <html> <head> <!-- Embedded (internal) styles --> <style> h1 { color: red; } p { color: green; } </style> <!-- Import external style sheet --> <link href="/styles/main.css" rel="stylesheet" /> </head> <body> <h1>This is a red heading</h1> <p>This is a green paragraph</p> </body> </html>

หากไฟล์สไตล์ชีตภายนอกกำหนดคุณสมบัติ color ให้ Selector h1 และ p เช่น ให้น้ำเงิน (blue) ค่าสีแดงและสีเขียวจะถูกทับ เพราะ <link> อยู่หลัง <style> ในมาร์กอัป

เรื่องนี้เกิดขึ้นง่าย จึงแนะนำให้ใช้ <link> เป็นหลัก และใช้ <style> เฉพาะกรณีเฉพาะเจาะจง