하나의 CSS 파일을 다른 파일에 포함하는 것이 가능합니까?
하나의 CSS 파일을 다른 파일에 포함하는 것이 가능합니까?
예:
@import url("base.css");
참고:
- 규칙은 다른 모든 규칙 앞에 와야 합니다( 제외).
@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 사용
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 inner를 사용하지 마십시오.HTML이지만:
<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>
altervista 및 wordpress를 사용하여 부트스트랩 가져오기
나는 이것을 워드프레스로 altervista의 bootstrap.css를 가져오는 데 사용합니다.
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
그리고 페이지에 넣으면 HTML 링크 릴 코드가 삭제되기 때문에 잘 작동합니다.
@import url('style.css');
최선의 답변과 달리 HTTP/2.0을 사용할 때는 모든 CSS 파일을 하나의 청크로 집계하지 않는 것이 좋습니다.
나는 main.css 파일을 만들고 그 안에 모든 css 파일을 포함시켰습니다.
main.css 파일은 하나만 포함할 수 있습니다.
@import url('style.css');
@import url('platforms.css');
예 하나의 CSS를 다른 CSS로 쉽게 가져올 수 있습니다(웹사이트 어디서나).다음과 같이 사용해야 합니다.
@import url("url_path");
여기서 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;
어떤 이유로든 @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.message와 myap-screen.message의 두 가지 스타일시트가 있습니다.이것은 myap-print.css에 myap-screen.css를 포함하는 것과 같은 효과입니다.
나는 이것을 우연히 발견했고 나는 단지 CSS에서 @IMPORT를 사용하지 말라고 말하고 싶었어요!!!가져오기 문이 클라이언트로 전송되고 클라이언트가 다른 요청을 수행합니다.CSS를 다양한 파일로 나누고 싶다면 Less를 사용합니다.최소에서 가져오기 문은 서버에서 발생하고 출력은 캐시되며 클라이언트가 다른 연결을 강제로 설정하여 성능 저하를 일으키지 않습니다.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
'programing' 카테고리의 다른 글
| Excel: VLOOKUP에 일치하는 항목이 없을 때 셀을 (0 대신) 비워 두는 방법은 무엇입니까? (0) | 2023.06.10 |
|---|---|
| 고유/임의 이름으로 파일 저장 (0) | 2023.06.10 |
| 두 인수 중 하나가 NaN인 경우 C/C++ <, <= 및 == 연산자가 true를 반환하는 원인은 무엇입니까? (0) | 2023.06.10 |
| 명령줄을 사용하여 Firebase 데이터베이스 보안 규칙을 배포하는 방법은 무엇입니까? (0) | 2023.06.10 |
| 웹 API 인증 필터의 경우 내 클레임 ID가 항상 거짓인 이유는 무엇입니까? (0) | 2023.06.10 |