CSS 외부 링크의 형태는 무엇입니까?
- 青灯夜游원래의
- 2022-07-27 20:27:315928검색
CSS 외부 링크에는 두 가지 형태가 있습니다. 1. 링크 태그를 통해 CSS 외부 스타일을 HTML 페이지에 링크합니다. 링크 태그는 헤드 태그 영역에 배치되어야 하며 구문은 ""; 2. "@import url("css file path" 구문을 사용하여 스타일 태그의 "@import" 규칙을 통해 연결합니다. );".
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS 스타일이 웹 페이지 문서 외부의 파일에 배치된 경우 이를 외부 스타일 시트라고 합니다. CSS 스타일 시트 문서는 외부 스타일 시트를 나타냅니다.
실제로 외부 스타일 시트는 확장자가 .css인 텍스트 파일입니다. CSS 스타일 코드를 텍스트 파일에 복사하여 .css 파일로 저장하면 외부 스타일 시트가 됩니다.
아래 그림과 같이 외부 스타일 시트입니다.
그러면 CSS 외부 스타일 시트를 HTML 문서에 연결하는 방법은 무엇일까요? 외부 스타일 시트를 사용하는 방법에는 두 가지가 있습니다.
1) 링크 사용
링크 스타일은 CSS 스타일 시트를 외부에서 정의하고 .CSS 확장자를 가진 파일을 구성한 다음 <를 전달하는 것을 의미합니다. 페이지 ;link>링크 태그는 페이지에 연결되며 링크 문은 페이지의
<link>链接标记链接到页面中，而且该链接语句必须放在页面的标记区。语法：
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2）、使用@import
导入式是通过@import
<style type="text/css">
@import url("css文件路径");
</style>
2), @import
사용 가져오기는@import구문: h1{
color:red;
}
p{
font-size:14px;
color:green;
}간단한 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="styleSheet" href="style.css" />
<!-- <style>
@import url("style.cs");
</style> -->
</head>
<body>
<h1>link标签或@import的应用</h1>
<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
</body>
</html>
HTML 문서
rrreee구현 효과:
link와 @import의 차이점:
1 소속의 차이 @im. 포트는 CSS에서 제공하는 구문 규칙은 스타일 시트를 가져오는 데만 사용됩니다. link는 CSS 파일을 로드할 수 있을 뿐만 아니라 RSS, rel 연결 속성 등을 정의할 수 있는 HTML에서 제공되는 태그입니다. 2. 로드 순서의 차이페이지를 로드할 때 링크 태그에 의해 도입된 CSS가 동시에 로드됩니다. 페이지가 로드된 후에 @import에 의해 도입된 CSS가 로드됩니다. 3. 호환성 차이@import는 CSS2.1에서만 사용할 수 있는 구문이므로 IE5 이상에서만 인식할 수 있습니다. 링크 태그는 HTML 요소이며 호환성 문제가 없습니다.
4. DOM 제어성의 차이🎜🎜JS를 통해 DOM을 조작하고 링크 태그를 삽입하여 스타일을 변경할 수 있습니다. DOM 방식은 문서 기반이므로 @import를 사용하여 스타일을 삽입할 수 없습니다. 🎜🎜(동영상 공유 학습: 🎜웹 프론트엔드 시작하기🎜)🎜위 내용은 CSS 외부 링크의 형태는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!