다른 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; } 출력
이것은 다음 출력을 생성합니다 -
예시
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;
} 출력
이것은 다음과 같은 출력을 제공합니다 -
