하나의 CSS 파일을 다른 파일에 포함 할 수 있습니까?
하나의 CSS 파일을 다른 파일에 포함 할 수 있습니까?
예 :
@import url("base.css");
노트 :
@import규칙은 앞에 와야합니다 (제외한 다른 모든 규칙@charset).- 추가
@import명령문에는 추가 서버 요청이 필요합니다. 또는 여러 HTTP 요청을 피하기 위해 모든 CSS를 하나의 파일로 연결합니다. 예를 들어, 콘텐츠의 복사base.css및special.css로를base-special.css단지 참조base-special.css.
예. CSS 파일을 다른 CSS 파일로 수 있습니다.
@import 규칙을 사용하는 스타일 시트의 첫 번째 규칙을 사용해야합니다 .
@import "mystyle.css";
@import url("mystyle.css");
유일한주의 사항은 오래된 웹 브라우저는이를 지원하지 않습니다. 사실은 이전 브라우저에서 CSS 스타일을 숨기는 CSS '해킹'중 하나입니다.
브라우저 지원 은 이 목록 을 참조하십시오 .
이 @import url("base.css");모든 것을 염두에 미세하지만 곰을 작동 @import문은 서버에 새로운 요청입니다. 이 문제가 없을 경우 최적의 성능이 필요하지 않습니다 @import.
CSS @import규칙이 수행됩니다. 예 :
@import url('/css/common.css');
@import url('/css/colors.css');
예.
@import "your.css";
어떤 경우에는 @import "file.css"를 사용하는 것이 가능하며 대부분의 최신 브라우저를 지원해야합니다. NN4와 같은 구형 브라우저는 약간 미쳐 버릴 것입니다.
참고 : import 문은 파일의 다른 모든 선언 할 것 와야하며 사용하기 전에 대상 브라우저에서 테스트해야합니다.
예, @import를 사용합니다.
쉽게 검색 할 수있는 자세한 정보는 http://webdesign.about.com/od/beginningcss/f/css_import_link.htm 에 있습니다 .
예 @import를 사용하고 css 파일의 경로를 제공하는 것이 가능합니다.
@import url("mycssfile.css");
또는
@import "mycssfile.css";
@import("/path-to-your-styles.css");
이것이 CSS를 사용하여 CSS 스타일 시트에 CSS 스타일 시트를 포함하는 가장 좋은 방법입니다.
"@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>
예 당신은 쉽게 하나의 CSS를 다른 CSS로 수 있습니다. (웹 사이트의 모든 위치) 다음과 같이 있습니다.
@import url("url_path");
@import url('style.css');
최선의 서비스와는 HTTP / 2.0을 사용할 때 모든 CSS 파일을 하나의 청크로 묻지 않는 것이 좋습니다.
altervista 및 wordpress로 부트 가져 오기
나는 이것을 사용하여 wordpress로 altervista에서 bootstrap.css를 가져옵니다.
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
페이지에 넣으면 html 링크 rel 코드가 삭제되므로 잘 작동합니다.
어떤 이유로 든 @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"에는 myap-print.css 및 myap-screen.css의 두 가지 스타일 시트가 있습니다. myap-print.css 내에 myap-screen.css를 포함하는 것과 동일한 효과입니다.
@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;
main.css 파일을 만들고 모든 CSS 파일을 포함했습니다.
main.css 파일은 하나만 포함 할 수 있습니다.
@import url('style.css');
@import url('platforms.css');
나는 이것을 우연히 만났고 CSS에서 @IMPORT를 사용하지 마십시오 !!!! import 문이 클라이언트로 전송되고 클라이언트가 다른 요청을 수행합니다. CSS를 여러 파일로 나누려면 Less를 사용하십시오. Less에서는 import 문이 서버에서 발생하고 출력이 캐시되며 클라이언트가 다른 연결을 만들도록하여 성능 저하를 일으키지 않습니다. Sass는 또한 내가 탐구하지 않은 또 다른 옵션입니다. 솔직히 Less 또는 Sass를 사용하지 않는다면 시작해야합니다. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html
참고 URL : https://stackoverflow.com/questions/147500/is-it-possible-to-include-one-css-file-in-another
'ProgramingTip' 카테고리의 다른 글
| 언제 git pull --rebase를 쓰고 있습니까? (0) | 2020.09.29 |
|---|---|
| git log 또는 git diff를 종료하는 방법 (0) | 2020.09.29 |
| std :: string을 다듬는 가장 좋은 방법은 무엇입니까? (0) | 2020.09.29 |
| Visual Studio의 프로젝트에 기존 디렉터리 트리를 추가 비용하나요? (0) | 2020.09.29 |
| div 블록 내부의 CSS 중앙 텍스트 (가로 및 세로) (0) | 2020.09.29 |