การนำเข้าสไตล์ชีตภายนอกใน CSS

เราสามารถนำเข้าไฟล์ CSS เพิ่มเติมภายในการประกาศ CSS อื่นได้ กฎ @import ใช้เพื่อจุดประสงค์นี้เนื่องจากจะลิงก์สไตล์ชีตในเอกสาร โดยทั่วไปจะใช้เมื่อหนึ่งสไตล์ชีตขึ้นอยู่กับอีกสไตล์หนึ่ง มันถูกระบุไว้ที่ด้านบนของเอกสารหลังจาก @charset ประกาศภายใน .

ไวยากรณ์

ไวยากรณ์ของกฎ @import มีดังนี้

@import /*url or list-of-media-queries*/

แบบสอบถามสื่อสามารถเป็นคำสั่งผสมที่อาจระบุพฤติกรรมของเอกสารในสื่อต่างๆ

ตัวอย่าง

ตัวอย่างต่อไปนี้ใช้กฎ @import -

เอกสาร HTML −

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(style.css);
body {
   background-color: honeydew;
}
</style>
</head>
<body>
<p>This is demo paragraph one. </p>
<p class="two">This is demo paragraph two.</p>
<p>This is demo paragraph three</p>
</body>
</html>

เอกสาร CSS:style.css

p { color: navy; font-style: italic; }
.two { color: darkgreen; font-size: 24px; }

ผลลัพธ์

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

การนำเข้าสไตล์ชีตภายนอกใน CSS

ตัวอย่าง

เอกสาร HTML −

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div></div>
</body>
</html>

เอกสาร CSS −

div {
   height: 50px;
   width: 100px;
   border-radius: 20%;
   border: 2px solid blueviolet;
   box-shadow: 22px 12px 3px 3px lightblue;
   position: absolute;
   left: 30%;
   top: 20px;
}

ผลลัพธ์

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

การนำเข้าสไตล์ชีตภายนอกใน CSS