다른 CSS 파일을 CSS 파일에 도입하는 방법은 무엇입니까? (코드 예)-CSS 튜토리얼-php.cn

다른 CSS 파일을 CSS 파일에 도입하는 방법은 무엇입니까? (코드 예)

青灯夜游

풀어 주다： 2019-02-12 11:05:55

원래의

11807명이 탐색했습니다.

@import 규칙을 사용하여 다른 CSS 파일을 CSS 파일에 도입하는 방법을 구현할 수 있습니다. @import 규칙은 여러 CSS 파일을 기본 HTML 파일 또는 기본 CSS 파일로 가져올 수 있습니다. 모든 사람에게 도움이 되기를 바랍니다.

다른 CSS 파일을 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 )

다른 CSS 파일을 CSS 파일에 도입하는 방법은 무엇입니까? (코드 예)

style2.css 파일:

 body { 
    background:gainsboro; 
        opacity: 0.5; 
} 
h1{
color: #008000;
}

로그인 후 복사

출력: style1.css 파일의 @import 규칙을 사용하여 style2.css 파일을 가져옵니다.

다른 CSS 파일을 CSS 파일에 도입하는 방법은 무엇입니까? (코드 예)

지침: @import 사용 규칙을 사용하여 다른 CSS 스타일 시트를 가져오는 두 가지 방법: @import url(style2.css); 및 @import "style2.css";

참고: @import 규칙을 사용하여 다른 CSS 스타일 시트를 가져오는 경우 이렇게 하려면 스타일 시트의 경로에 주의를 기울여야 합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !

위 내용은 다른 CSS 파일을 CSS 파일에 도입하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!