하나의 CSS 파일을 다른 CSS 파일에 포함시킬 수 있습니까?

779

css

— 가이즈 카 아옌데
소스

26

참고로 HTTP 요청을 저장하지 않습니다. 가져온 .css 파일을 다른 곳에 포함시키지 않아도됩니다.

— T. Brian Jones

1

나는 최고의 CSS가 아닌 다른 CSS를 포함하는 것과 거의 같을 것입니다.

— Gaizka Allende

1084

예:

@import url("base.css");

노트 :

@import규칙은 앞에 와야합니다 (제외한 다른 모든 규칙 @charset).
추가 @import명령문에는 추가 서버 요청이 필요합니다. 대안으로 여러 HTTP 요청을 피하기 위해 모든 CSS를 하나의 파일로 연결하십시오. 예를 들어 base.css및 의 내용을 참조 special.css하여 복사하십시오 .base-special.cssbase-special.css

— 케빈 읽기
소스

143

예. CSS 파일을 다른 CSS 파일로 가져올 수 있습니다.

@import 규칙을 사용하여 스타일 시트에서 첫 번째 규칙이어야합니다 .

@import "mystyle.css";
@import url("mystyle.css");

유일한 경고는 오래된 웹 브라우저가 지원하지 않는다는 것입니다. 사실 이것은 오래된 브라우저에서 CSS 스타일을 숨기는 CSS '해킹'중 하나입니다.

브라우저 지원에 대해서는 이 목록 을 참조하십시오 .

— 로니 리우
소스

42

이 @import url("base.css");모든 것을 염두에 미세하지만 곰을 작동 @import문은 서버에 새로운 요청입니다. 이것은 문제가되지 않지만 최적의 성능이 필요할 때는를 피해야합니다 @import.

— 유전자
소스

2

CSS 파일이 캐시되지 않습니까? 파일을 한 번만 요청합니까? 걱정하는 것은 사소한 것 같습니다.

— endolith

1

CSS를 하나의 파일로 축소하지 않으면 맞습니다.하지만 일단 그렇다면 하나의 CSS 파일을 호출하는 것입니다. 물론 내가 틀렸다면 나를 바로 잡으십시오.

— mjwrazor

27

CSS @import규칙은 바로 그렇게합니다. 예 :

@import url('/css/common.css');
@import url('/css/colors.css');

— 소렌 쿠 클라우
소스

16

예.

@import "your.css";

규칙은 여기 에 문서화되어 있습니다 .

— 고든 윌슨
소스

11

어떤 경우에는 @import "file.css"를 사용하는 것이 가능하며 대부분의 최신 브라우저는이 기능을 지원해야합니다. NN4와 같은 이전 브라우저는 약간 간결합니다.

참고 : import 문은 파일의 다른 모든 선언보다 우선하고 프로덕션 환경에서 사용하기 전에 모든 대상 브라우저에서 테스트해야합니다.

— seanb
소스

8

예, @import를 사용하십시오.

자세한 정보는 http://webdesign.about.com/od/beginningcss/f/css_import_link.htm 에서 쉽게 검색 할 수 있습니다 .

— 대런
소스

6

예, @import를 사용하고 CSS 파일의 경로를 제공하는 것이 가능합니다.

@import url("mycssfile.css");

또는

@import "mycssfile.css";

— 비디
소스

6

@import("/path-to-your-styles.css");

이것이 CSS를 사용하여 CSS 스타일 시트에 CSS 스타일 시트를 포함시키는 가장 좋은 방법입니다.

— 플로이드
소스

6

"@import"규칙은 여러 스타일 파일을 호출 할 수 있습니다. 이러한 파일은 HTML 태그가 CSS를 호출하는 등 필요할 때 브라우저 나 사용자 에이전트에 의해 호출됩니다.

<!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" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>

CSS 파일 "main.css"는 다음 구문을 포함합니다.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

스타일 요소에 createTexNode를 사용하려면 innerHTML을 사용하지 말고 다음을 사용하십시오 .

<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
    @import 'fineprint.css' print;
    @import 'bluish.css' projection, tv;
    @import 'custom.css';
    @import 'chrome://communicator/skin/';
    @import 'common.css' screen, projection;
    @import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>

— 체 타바 하나
소스

@hylp는 가져 오기 (클래스 projection및 screen?) 에서 클래스를 재정의 할 수 있다고 지적하지만 이것은 결코 좋은 일이 아닙니다. ;)

— Tcll

2

@import url('style.css');

최선의 대답과 달리 HTTP / 2.0을 사용할 때 모든 CSS 파일을 하나의 덩어리로 집계하지 않는 것이 좋습니다

— peterC_
소스

2

altervista 및 wordpress를 사용하여 부트 스트랩 가져 오기

나는 이것을 워드 프레스로 altervista에서 bootstrap.css를 가져 오기 위해 사용합니다.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

페이지에 넣으면 HTML 링크 관련 코드가 삭제되므로 제대로 작동합니다.

— 지오바니 G. PY
소스

1

예 한 CSS를 다른 CSS로 쉽게 가져올 수 있습니다 (웹 사이트의 모든 위치) 다음과 같이 사용해야합니다.

@import url("url_path");

— NARGIS PARWEEN
소스

1

어떤 이유로 든 @import가 나를 위해 작동하지 않았지만 실제로 필요하지는 않습니까?

html에서 대신 내가 한 일이 있습니다.

  <link rel="stylesheet" media="print" href="myap-print.css">
  <link rel="stylesheet" media="print" href="myap-screen.css">
  <link rel="stylesheet" media="screen" href="myap-screen.css">

media = "print"에는 2 개의 스타일 시트가 있습니다 : myap-print.css 및 myap-screen.css. myap-print.css에 myap-screen.css를 포함하는 것과 동일한 효과입니다.

— 콜린 키넌
소스

아니요, 정확하지 않습니다. 여기에는 HTML 파일 내에서 여러 CSS 파일이 포함되며 다른 CSS 파일 내에서 CSS 파일은 포함되지 않습니다.

— TylerH

0

여기 에서 CSS @import Rule을 부릅니다.

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;

— Pocky_Thailand
소스

0

main.css 파일을 만들고 모든 CSS 파일을 포함 시켰습니다.

하나의 main.css 파일 만 포함 할 수 있습니다

@import url('style.css');
@import url('platforms.css');

— 디 네시 비타 주
소스

-3

나는 이것을 우연히 만났고 CSS에 @IMPORT를 사용하지 마십시오! import 문은 클라이언트에게 보내지고 클라이언트는 다른 요청을합니다. CSS를 다양한 파일로 나누려면 Less를 사용하십시오. Less in import 문은 서버에서 발생하고 출력이 캐시되며 클라이언트가 다른 연결을 수행하도록하여 성능 저하를 일으키지 않습니다. Sass는 내가 탐색하지 않은 옵션이기도합니다. 솔직히, Less 또는 Sass를 사용하지 않는다면 시작해야합니다. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— 윌 세이츠
소스

1

클라이언트는 다른 연결이 아닌 다른 요청을 수행합니다. 그리고 품질을 위해서는 수입 CSS를 사용하는 것이 좋습니다. 프로젝트에 따라 커지고 커지는 큰 CSS 파일 대신 수입품을 가져 오는 것이 훨씬 좋습니다 ...

— YvesR

3

이것은 Google ( developers.google.com/speed/docs/best-practices/… )과 Yahoo ( developer.yahoo.com/performance/rules.html#csslink ) 의 추천입니다

— WillSeitz

1

여전히-하나의 요청 일뿐입니다. 완전한 페이지로드를 위해 잠재적으로 수백 가지 중.

— Steve Bennett

8

권리?! 한 번 더 요청하면 팔 소리와 모든 모자 면책 조항을 거의 보증하지 않습니다. 요청은 나쁜 습관이 아닙니다. 대답에 -1-LESS 및 SASS화물 컬트.

— Chris Baker

글쎄, 그것은 하나의 요청 만 더 ..하지만 더 많은 CSS를 하나로 가져올 수 있으며 병렬로 다운로드됩니다.

— wh1sp3r 12