다른 CSS 파일을 CSS 파일에 도입하는 방법은 무엇입니까? (코드 예)
- 青灯夜游원래의
- 2019-02-12 11:05:5511752검색
@import 규칙을 사용하여 다른 CSS 파일을 CSS 파일에 도입하는 방법을 구현할 수 있습니다. @import 규칙은 여러 CSS 파일을 기본 HTML 파일 또는 기본 CSS 파일로 가져올 수 있습니다. 모든 사람에게 도움이 되기를 바랍니다.
@import 규칙
먼저 @import 규칙을 이해해 봅시다.
@import 규칙은 한 스타일 시트를 다른 스타일 시트로 가져오는 데 사용됩니다. 이 규칙은 사용자가 미디어 관련 스타일 시트를 가져올 수 있도록 미디어 쿼리도 지원합니다. @import 규칙은 @charset 선언 이후 문서 상단에서 선언되어야 합니다. [동영상 튜토리얼 추천: CSS 튜토리얼]
@import 기능:
● @import 규칙은 스타일 시트를 HTML 페이지나 다른 스타일 시트로 가져오는 데 사용됩니다.
● @import 규칙은 미디어 쿼리를 추가하는 데도 사용되므로 가져오기는 미디어에 따라 다릅니다.
● @import 규칙은 항상 문서 상단에 선언됩니다.
기본 문장 패턴:
@import url | string list-of-mediaqueries;
url | 문자열: 가져올 리소스의 위치를 나타내며 상대적이거나 절대적일 수 있습니다.
list-of-mediaqueries: URL 링크에 정의된 CSS 규칙의 적용을 결정합니다.
코드 예제
아래에서는 예제를 사용하여 다른 CSS 파일을 CSS 파일에 도입하는 방법을 보여줍니다.
HTML 부분: index.html이라는 파일 만들기
<!DOCTYPE html> <html> <meta charset="UTF-8"> <link rel="stylesheet" href="style1.css" /><!--在HTML文件中导入style1.css文件--> <head> <body> <div class="box"> <h1>PHP中文网</h1> <p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p> </div> </body> </html>
CSS 부분:
style1.css 파일:
/*导入另一个CSS文件 */
@import "style2.css"; /* 或者@import url(style2.css);*/
.box{
width: 400px;
margin: 100px auto;
}
h1 {
color:red;
text-align: center;
}
p {
color:black;
padding: 10px;
background-image: linear-gradient(to right, #fbd6d3, #ff1200);
position:static;
}출력: @import 규칙을 사용하지 않고 다른 CSS 파일(style2) 가져오기 .css )
style2.css 파일:
body {
background:gainsboro;
opacity: 0.5;
}
h1{
color: #008000;
}출력: style1.css 파일의 @import 규칙을 사용하여 style2.css 파일을 가져옵니다.
지침: @import 사용 규칙을 사용하여 다른 CSS 스타일 시트를 가져오는 두 가지 방법: @import url(style2.css); 및 @import "style2.css";
참고: @import 규칙을 사용하여 다른 CSS 스타일 시트를 가져오는 경우 이렇게 하려면 스타일 시트의 경로에 주의를 기울여야 합니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !
위 내용은 다른 CSS 파일을 CSS 파일에 도입하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!