여러 CSS 파일을 하나의 CSS 파일로 가져오는 방법-CSS 튜토리얼-php.cn

여러 CSS 파일을 하나의 CSS 파일로 가져오는 방법

高洛峰

풀어 주다： 2016-12-16 15:48:02

원래의

1511명이 탐색했습니다.

HTML에 CSS를 도입하는 두 가지 방법:

가져오기와 링크의 목적은 독립적인 CSS 파일을 파일에 도입하는 것입니다. 사실 둘 사이의 가장 큰 차이점은 없습니다. 두 가지는 링크 유형이 HTML 태그를 사용하여 외부 CSS 파일을 도입하는 반면 가져오기 유형은 CSS 규칙을 사용하여 외부 CSS 파일을 도입한다는 것입니다. 따라서 구문도 다릅니다.

1. 링크 스타일을 사용하는 경우 다음 명령문을 사용하여 외부 CSS 파일을 도입해야 합니다.

2. import를 사용하는 경우 다음 문을 사용해야 합니다.

```` 또한 이 두 가지 방법을 사용한 후의 실제 효과도 약간 다릅니다. 링크형을 사용하는 경우 페이지의 주요 부분을 로드하기 전에 CSS 파일을 로드하므로 실제 페이지는 처음부터 스타일 효과를 갖게 됩니다. 가져오기 유형을 사용하는 경우 전체 페이지 후에 CSS 파일이 로드됩니다. 일부 브라우저의 경우 페이지 파일이 비교적 큰 경우 스타일이 지정되지 않은 페이지가 먼저 나타나고 플래시 후에 스타일 설정 효과가 나타나는 경우가 있습니다. 뷰어의 관점에서 보면 이는 가져오기 사용의 단점입니다.
````대규모 웹사이트의 경우 유지 관리를 용이하게 하기 위해 모든 CSS 스타일을 여러 CSS 파일에 넣을 수 있습니다. 이런 식으로 링크 가져오기를 사용하는 경우 CSS를 별도로 가져오려면 여러 문이 필요합니다. 문서. CSS 파일의 분류를 조정하려면 html 파일도 동시에 조정해야 합니다. 이는 유지 관리 작업의 단점입니다. 가져오기 방법을 사용하는 경우 일반 CSS 파일만 가져올 수 있으며, 링크 방법에는 이 기능이 없지만 이 파일에 있는 다른 독립 CSS 파일을 가져올 수 있습니다.
````그래서 여기에서 제안하는 것은 하나의 CSS 파일만 도입하는 경우 링크 방법을 사용하고, 여러 CSS 파일을 도입해야 하는 경우 먼저 링크 방법을 사용하여 "디렉토리" CSS 파일을 도입하는 것입니다. "디렉토리" CSS 파일을 가져온 다음 가져오기를 사용하여 다른 CSS 파일을 도입합니다.
````그러나 JavaScript를 통해 가져올 CSS 파일을 동적으로 결정하려면 연결을 사용해야 합니다.

여러 CSS 파일을 하나의 CSS 파일로 가져오는 방법은 무엇입니까?

답변:

3개의 CSS 스타일 시트를
css_red.css , css_blue.css , css_green.css
작성하여 기본 스타일 스타일을 작성할 수 있습니다. .css 세 가지 스타일 시트를 모두 설치합니다:
@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";

전화할 때, style.css를 호출하면 됩니다.

특정 코드:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字体属性</title>
<link rel="stylesheet"  type="text/css" href="style.css" />
</head>

<body>
<p class="red">红色</p>
<p class="blue">蓝色</p>
<p class="green">绿色</p>
</body>
</html>

로그인 후 복사

style.css

@charset "utf-8";


@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";

로그인 후 복사

css_red.css

@charset "utf-8";


.red {
color:red;
}

로그인 후 복사

css_blue.css

@charset "utf-8";


.blue{
color:blue;
}

로그인 후 복사

css_green.css

@charset "utf-8";


.green{
color:green;
}

로그인 후 복사

여러 CSS 파일을 하나의 CSS 파일로 가져오는 방법에 대한 자세한 관련 기사를 보려면, PHP 중국어 웹사이트를 팔로우하세요!