CSS 스타일을 HTML에 어떻게 도입하나요? link와 @import의 차이점(코드 예)-HTML 튜토리얼-php.cn

CSS 스타일을 HTML에 어떻게 도입하나요? link와 @import의 차이점(코드 예)

青灯夜游

풀어 주다： 2022-08-03 17:14:03

원래의

4980명이 탐색했습니다.

프런트 엔드 웹사이트 개발 과정에서 우리 모두는 CSS 스타일을 사용해야 합니다. CSS 스타일을 사용하면 페이지의 레이아웃, 글꼴, 색상, 배경 및 기타 효과를 보다 정확하게 제어할 수 있습니다. 그러면 이러한 CSS 스타일 파일이나 코드를 HTML로 어떻게 가져오나요? 이 장에서는 CSS 스타일 파일을 HTML에 도입하는 방법을 보여줍니다. link와 @import(코드 예)의 차이점과 함께 CSS 스타일 파일 가져오기를 중심으로 CSS 스타일을 가져오는 방법을 모두가 이해할 수 있도록 하세요. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. CSS 스타일을 HTML로 가져오는 방법

HTML은 주로 웹 페이지의 콘텐츠 표시를 담당하는 반면 CSS 파일은 웹 콘텐츠의 스타일을 담당합니다. : 인라인, 임베디드, 외부 링크 유형,

및 외부 링크 유형은 링크 유형(링크)과 가져오기 유형(@import)으로 구분됩니다. [추천 학습: css 비디오 튜토리얼]

그럼 아래에서 소개하겠습니다:

1. 인라인 ---- HTML 태그에서 CSS 사용

코드 예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内式</title>
	</head>
	<body>
		<p style="color: red;font-size: 20px;">行内式行内式行内式行内式行内式行内式行内式行内式行内式<p>
	</body>
</html>

로그인 후 복사

렌더링:

CSS 스타일을 HTML에 어떻게 도입하나요? link와 @import의 차이점(코드 예)

CSS에서 참조하는 인라인 스타일은 인라인 스타일 또는 행 수준 스타일이라고도 합니다. 이는 태그 내부에 직접 도입되며 동시에 매우 편리하다는 점입니다. 또한 스타일을 재사용할 수 없게 됩니다. 단점: 코드 줄 수가 특정 길이에 도달하면 권장되지 않습니다. 인라인 CSS는 코드에서 버그를 찾기 위한 테스트로 자주 사용됩니다.

장점:

스타일 시트 파일이 없어 때로는 효율성을 향상시킬 수 있습니다.
스타일 속성을 사용하는 스타일 효과가 가장 강력하며 다른 소개 방법의 동일한 스타일 효과를 무시합니다. .

단점:

여러 요소가 스타일을 공유하기 어렵기 때문에 코드 재사용에 도움이 되지 않습니다.
HTML과 CSS 코드가 혼합되어 있어 프로그래머와 검색 엔진이 읽는 데 도움이 되지 않습니다.

2. 인라인---스타일 태그를 통해 head 태그에 CSS 콘텐츠를 작성합니다.

코드 예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内嵌式</title>
		<style>
			p{
				background-color: #21B4BB;
				color: #fff;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p>内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式<p>
	</body>
</html>

로그인 후 복사

Rendering:

CSS 스타일을 HTML에 어떻게 도입하나요? link와 @import의 차이점(코드 예)

CSS에서 참조하는 인라인도 가능합니다. 내부 스타일 또는 페이지 수준 스타일이라고 하며, 스타일은 이 페이지의 요소로 정의됩니다. , 매번 생각해보세요. 코드 페이지를 맨 위로 끌어올리는 것이 귀찮기 때문에 유지 관리가 더 어렵습니다.

장점: 인라인 스타일 시트와 마찬가지로 추가 요청이 생성되지 않으며 초기에 구조와 스타일의 분리를 구현하므로 단일 페이지 웹 사이트 애플리케이션에 더 적합합니다.

단점: 내부 스타일 시트가 HTML 파일로 작성되어 페이지가 불순하고, 파일 크기가 크고, 웹 크롤러가 정보를 얻는 데 도움이 되지 않으며, 유지 관리에 도움이 되지 않으며, 스타일을 공유할 수 없습니다. 페이지 간

3. 외부 연결 스타일 ---링크 태그를 통해 외부 스타일 시트(CSS 스타일 파일) 소개

1) 링크 스타일(링크)

구문:

<link rel="stylesheet"  type="text/css"  href="css的路径" >

로그인 후 복사

코드 예:

HTML 코드:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>链接式</title>
		<link rel="stylesheet" type="text/css" href="style.css"  >
	</head>
	<body>
		<p>链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式<p>
	</body>
</html>

로그인 후 복사

css 스타일 파일- -style.css 코드:

p{
	font-size: 20px;
	color: #fff;
	background-color: #70DBDB;
}

로그인 후 복사

효과 그림:

CSS 스타일을 HTML에 어떻게 도입하나요? link와 @import의 차이점(코드 예)

링크 유형은 웹 페이지 파일의 본문을 로드하기 전에 CSS 파일을 로드하므로 표시된 웹 페이지는 처음부터 스타일 효과를 가지게 되며 가져온 스타일은 스타일이 지정되지 않은 웹 페이지를 먼저 표시한 다음 스타일이 지정된 웹 페이지를 표시합니다. 이것이 링크 스타일의 장점입니다.

2) 가져오기(@import)

구문:

<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>

로그인 후 복사

코드 예:

HTML 코드:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导入式</title>
		<style type="text/css" media="screen">   
		@import url("style.css");   
		</style>
	</head>
	<body>
		<p>导入式导入式导入式导入式导入式导入式导入式导入式导入式<p>
	</body>
</html>

로그인 후 복사

렌더링:

CSS 스타일을 HTML에 어떻게 도입하나요? link와 @import의 차이점(코드 예)

전체 웹페이지가 로드된 후 가져오기 그런 다음 CSS 파일을 로드하면 문제가 발생합니다. 웹 페이지가 상대적으로 크면 스타일이 없는 페이지가 먼저 나타나고, 플래시 후에 웹 페이지의 스타일이 나타납니다. 이는 수입품의 본질적인 결함입니다.

3) 외부접속의 장단점

장점:

구조코드와 성능코드의 완벽한 분리
재사용 및 유지관리가 편리함
별도의 파일로 분리되어 있어 사용량 대폭 절감 HTML 파일 크기로 인해 프로그래머와 웹 크롤러가 페이지 구조를 더 쉽게 읽을 수 있습니다.
검색 엔진에 친화적이므로 검색 엔진이 페이지를 더 높게 평가할 수 있어 페이지 검색 엔진 순위에 유리합니다.
외부 스타일 시트는 사용자가 처음 방문한 후 사용자의 컴퓨터에 캐시되며 다음 방문 시 이를 로드할 필요가 없습니다

단점:

스타일이 많으면 CSS 파일이 너무 커지고 찾기 어려워집니다. 게다가 CSS 파일이 하나 더 있다는 것은 HTTP 요청이 하나 더 있다는 의미이므로 방문 횟수가 많은 웹사이트에서는 서버에 대한 부담이 커질 것입니다

2. 링크(link)와 가져오기(@import)의 차이점 )

link는 CSS를 로드하는 것 외에도 RSS와 같은 다른 트랜잭션을 정의할 수도 있지만 @import는 CSS 범주에 속하며
링크를 참조하는 경우에만 사용할 수 있습니다. CSS의 경우 페이지가 로드될 때 동시에 로드되며 @ Import에서는 페이지가 완전히 로드된 후에 로드되어야 합니다.
link는 XHTML 태그이며 호환성 문제가 없지만 @import는 CSS2.1에서 제안되었으며 하위 버전 브라우저에서는 지원되지 않습니다.
ink는 Javascript를 사용하여 DOM을 제어하여 스타일을 변경할 수 있도록 지원합니다. @import는 이를 지원하지 않습니다.
@import는 CSS 파일에 다른 스타일 시트를 다시 도입할 수 있습니다. 링크는 이를 지원하지 않습니다.

(동영상 공유 학습: 웹 프론트엔드 시작하기)

위 내용은 CSS 스타일을 HTML에 어떻게 도입하나요? link와 @import의 차이점(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!