CSS อนุญาตให้เราเชื่อมโยง external style sheets ไปยังไฟล์ของเรา ซึ่งช่วยให้เราทำการเปลี่ยนแปลง CSS แยกต่างหากได้ และปรับปรุงเวลาโหลดหน้าเว็บ ไฟล์ภายนอกถูกระบุในแท็ก <link> ภายใน <head> ของเอกสาร
ไวยากรณ์
ไวยากรณ์สำหรับการรวม CSS ภายนอกมีดังนี้:
<link rel="stylesheet" href="#location">
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการฝังไฟล์ CSS:
HTML file
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Demo Text</h2> <div> <ul> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> </ul> </div> </body> </html>
CSS file
h2 { color: red; } div { background-color: lightcyan; }
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่าง
HTML file
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Demo Heading</h2> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>
CSS file
p { background: url("https://www.tutorialspoint.com/images/QAicon.png"); background-origin: content-box; background-size: cover; box-shadow: 0 0 3px black; padding: 20px; background-origin: border-box; }
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
