CSS를 HTML로 참조하는 방법-CSS 튜토리얼-php.cn

CSS를 HTML로 참조하는 방법

php中世界最好的语言

풀어 주다： 2017-11-21 17:24:33

원래의

2864명이 탐색했습니다.

CSS 스타일 시트를 참조하는 방법에는 div에서 직접 CSS 스타일을 사용하여 div+css 웹 페이지를 생성하고, html에 내장된 스타일을 사용하고, @import를 사용하여 외부 CSS 파일을 참조하고, 링크를 사용하여 외부 참조를 수행하는 방법이 있습니다. CSS 파일은 모두 장단점이 있으므로 오늘은 이 네 가지 방법의 차이점에 대해 자세히 설명하겠습니다.

다른 방법을 사용하여 CSS 스타일 시트를 참조하면 궁극적으로 동일한 효과를 얻을 수 있지만, 다른 방법을 사용하여 CSS 파일을 적용하면 SEO 및 웹 페이지 열기 속도와 효율성에 영향을 미칩니다. 다음으로 HTML에서 CSS를 하나씩 참조하는 방법에 대한 예를 설명하겠습니다

콘텐츠를 테스트 중입니다

2. html 헤더의 헤드 부분에 다음과 같이 스타일 설명 코드를 삽입합니다.

<style type="text/css"> 
<!-- 
.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/ 
--> 
</style>

로그인 후 복사

3. method

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css引用方法实例</title> 
<style type="text/css"> 
<!-- 
@import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/ 
--> 
</style> 
</head> 
 
<body> 
<div class="ceshi">我是测试内容</div> 
 
</body> 
</html>

로그인 후 복사

Wcss.css 파일 Code.ceshi {font-size:14px; color:#FF0000;}

이 방법을 사용하는 것과 내장된 참조 CSS 스타일 시트 방법을 사용하는 것에는 둘 다 유사점이 있음을 알 수 있습니다. 그 중 html 외부 CSS의 헤드에 있는 스타일 태그를 사용하여 참조해야 합니다.

4. 외부 CSS 파일을 호출하려면 링크를 사용하세요.

외부 wcss를 호출하려면 헤드에 를 배치하세요. CSS 파일을 참조하여 html을 구현하기 위한 CSS 파일

이 방법은 스타일 태그가 필요하지 않고 스타일을 링크하여 외부 스타일을 직접 참조합니다

일반적으로 링크를 사용하여 외부 CSS 스타일 방법을 참조하는 것이 좋습니다.

링크를 사용하여 외부 CSS를 참조할 때의 장점

1. 이 방법을 사용하여 외부 CSS 파일을 참조하면 CSS 스타일을 직접 추가하는 것보다 HTML 페이지의 소스 코드가 훨씬 작아집니다. 검색 엔진 스파이더가 크롤링되기 때문입니다. 때때로 CSS 파일이 크롤링되지 않아 HTML 소스 코드가 매우 작아지고 스파이더 크롤링 속도가 빨라지고 처리 속도가 줄어들어 이 웹페이지의 무게가 증가하고 순위에 유리합니다.

2. HTML을 저장하면 페이지를 로드하고 동시에 두 줄로 페이지를 여는 것처럼 웹 페이지를 다운로드할 때 브라우저가 스레드를 분리하여 웹 페이지를 더욱 빠르게 열 수 있습니다. (사용자가 이 웹페이지를 탐색할 때 html 소스 코드와 css 파일이 동시에 다운로드되어 속도가 빨라집니다.)

3. 웹 페이지의 스타일을 수정하는 것이 편리합니다. 수정하려면 CSS 스타일만 수정하면 됩니다. 웹페이지의 아트 스타일. 웹사이트 프로젝트에서 이 방법을 사용하면 전체 사이트가 공통 CSS 스타일을 사용하므로 전체 사이트의 스타일을 빠르고 편리하게 수정할 수 있습니다.

CSS 스타일 시트를 인용하는 네 가지 방법이 있습니다. 필요한 친구는 이를 저장할 수 있습니다. 이 사이트의 다른 업데이트에도 계속 관심을 가져주세요.