HTML 페이지에서 외부 스타일을 호출하는 방법은 무엇입니까
- 青灯夜游원래의
- 2022-09-15 18:17:246329검색
두 가지 호출 방법: 1. "" 구문으로 링크 태그를 사용하여 호출합니다. "@ import" 키워드를 사용하세요. 구문은 ""입니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
CSS 외부 스타일 시트
CSS 스타일이 웹 페이지 문서 외부의 파일에 배치된 경우 이를 외부 스타일 시트라고 합니다. CSS 스타일 시트 문서는 외부 스타일 시트를 나타냅니다.
사실 외부 스타일 시트는 확장자가 .css인 텍스트 파일입니다. CSS 스타일 코드를 텍스트 파일에 복사하여 .css 파일로 저장하면 외부 스타일 시트가 됩니다.
html 페이지에서 외부 스타일 시트를 호출하는 두 가지 방법
외부 스타일 시트를 브라우저에서 인식하고 구문 분석하려면 먼저 웹 문서로 가져와야 합니다. 외부 스타일 시트 파일은 두 가지 방법으로 HTML 문서로 가져올 수 있습니다.
1. 태그를 사용하여 호출(링크 스타일)
태그를 사용하여 외부 스타일 시트 파일 호출:
<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />
각 속성 설명:
href 속성 외부 스타일 시트를 설정하려면 파일 주소는 상대 주소 또는 절대 주소일 수 있습니다.
rel 속성은 관련 문서를 정의하며, 여기서는 관련 스타일 시트를 의미합니다.
type 속성은 스타일 요소와 마찬가지로 CSS 텍스트 파일을 나타냅니다.
일반적으로 태그를 정의할 때 3가지 기본 속성을 정의해야 하며, 그 중 href는 필수 설정 속성입니다.
HTML의 태그를 통해 외부 스타일 시트 파일을 HTML 문서에 연결하는 것은 인터넷 웹사이트에서 가장 일반적으로 사용되는 방법이자 가장 실용적인 방법입니다. 이 방법은 HTML 문서와 CSS 파일을 완전히 분리하고, 구조 레이어와 프리젠테이션 레이어를 완전히 분리하며, 웹 페이지 구조의 확장성과 CSS 스타일의 유지 관리성을 향상시킵니다.
예: 링크 스타일을 사용하여 작성 및 변경이 쉬운 HTML 코드에 스타일을 적용합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>我是被 lianjie-2.css 文件控制的，楼下的你呢？？</p>
<h3>楼上的，<span>lianjie.css</span> 文件给我穿的花衣服。</h3>
</body>
</html>
위의 예에서는 두 개의 CSS 파일이 링크를 통해 연결되어 있으며 둘 다 유효합니다. 이것이 웹 사이트 제작자가 공통 부분을 CSS 파일에 넣고 현재 페이지 스타일에 대한 새로운 스타일 파일을 작성하는 이유입니다. .
lianjie.css 파일 코드:
h3{
font-weight: normal; /*取消标题默认加粗效果*/
background-color: #66CC99; /* 设置背景色 */
height: 50px; /*设置标签的高度*/
line-height:50px; /* 设置标签的行高 */
}
span{
color: #FFOOOO; /* 字体颜色 */
font-weight:bold; /* 字体加粗 */
}lianjie-2.css 파일 코드:
p{
color: #FF3333; /*字体颜色设置*/
font-weight: bold; /* 字体加粗 */
border-bottom: 3px dashed #009933; /* 设置下边框线 */
line-height: 30px; /* 设置行高 */
}링크 스타일은 CSS 코드와 HTML 코드를 완전히 분리하여 구조와 스타일의 분리를 달성하여 HTML 코드가 페이지 구조를 구체적으로 구축할 수 있도록 합니다. , 미화 작업은 CSS를 사용하여 수행됩니다.
링크 기반 CSS 스타일 가져오기의 이점:
CSS 파일을 다른 HTML 파일에 배치하여 웹 사이트의 모든 페이지 스타일을 통합할 수 있습니다.
또한 CSS 코드를 하나의 CSS 파일에 넣을 수 있습니다. 관리를 용이하게 합니다.
CSS 파일이 수정되면 서버에서 모든 페이지를 검색하고 수정 후 업로드할 필요 없이 이 CSS 파일을 적용하는 모든 HTML 파일이 업데이트됩니다.
2. @import 키워드를 사용하여 호출하세요.
@import 명령을 사용할 때는 HTML의
<style type="text/css">
@import url("外部样式表文件路径");
</style>@import 키워드 뒤에 url() 함수를 사용하여 특정 외부 스타일 시트의 주소를 포함합니다. 파일.
예: lianjie.css 및 daoru.css 스타일 시트를 가져오고
태그의 배경색을 작성합니다. 가져온 스타일 시트와 태그 스타일은 반전될 수 없습니다.<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url(lianjie.css);
@import url(daoru.css);
body { background-color: #e4e929; }
</style>
</head>
<body>
<div>
<p>我是被 lianjie-2.css 文件控制的，楼下的你呢？？</p>
<h3>褛上的，<span>lianjie.css</span>文件给我穿的花衣服。</h3>
</div>
</body>
</html>
위 예에서는
@import url("lianjie-2.css"); p{text-indent: 3em;}，而不能是p{text-indent:3em;} @import url("lianjie-2.css");lianjie.css 파일 코드, 이전 예제와 동일, 즉 링크 스타일입니다.
daoru.css 파일 코드:
@import url("lianjie-2.css");
p { text-indent: 3em; }두 방법의 차이점(link 및 @import)태그는 html 태그에 속하지만 @import는 css에서 제공하는 방법입니다. 태그는 CSS를 가져올 수 있을 뿐만 아니라 다른 작업도 수행할 수 있지만 @import는 CSS만 가져올 수 있습니다.
로딩 순서의 차이: 페이지를 탐색할 때 링크에 의해 소개된 CSS는 동기식으로 로드되는 반면, @import가 참조하는 CSS는 다른 모든 요소가 다운로드될 때까지 로드되지 않습니다.
호환성 차이: @import CSS2.1에서 제안되었기 때문에 IE5 이상에서만 지원됩니다. 하위 버전의 브라우저에서는 이 문제가 발생하지 않습니다.
Javascript를 사용하여 DOM을 변경하는 경우 스타일에서는 @import를 DOM으로 제어할 수 없기 때문에 < ;link> 태그만 사용할 수 있습니다.
(동영상 공유 학습: 웹 프론트엔드 시작하기)
위 내용은 HTML 페이지에서 외부 스타일을 호출하는 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!