การเชื่อมโยงสไตล์ชีตภายนอกใน CSS

CSS ช่วยให้เราเชื่อมโยงสไตล์ชีตภายนอกกับไฟล์ของเราได้ ซึ่งช่วยให้เราทำการเปลี่ยนแปลง CSS แยกกัน และปรับปรุงเวลาในการโหลดหน้าเว็บ ไฟล์ภายนอกระบุไว้ในแท็ก ภายใน ของเอกสาร

ไวยากรณ์

ไวยากรณ์สำหรับการรวม CSS ภายนอกมีดังนี้

<link rel="stylesheet" href="#location">

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นว่าไฟล์ CSS ถูกฝังอย่างไร &miuns;

ไฟล์ HTML

<!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

h2 {
   color: red;
}
div {
   background-color: lightcyan;
}

ผลลัพธ์

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

การเชื่อมโยงสไตล์ชีตภายนอกใน CSS

ตัวอย่าง

ไฟล์ HTML

<!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

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;
}

ผลลัพธ์

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

การเชื่อมโยงสไตล์ชีตภายนอกใน CSS