CSS와 이미지를 HTML에 삽입하는 방법-HTML 튜토리얼-php.cn

CSS와 이미지를 HTML에 삽입하는 방법

coldplay.xixi

풀어 주다： 2023-01-03 09:27:26

원래의

4190명이 탐색했습니다.

HTML에 CSS와 이미지를 삽입하는 방법: 1. HTML의 스타일 요소를 사용하여 문서에 CSS 스타일을 정의합니다. 2. 각 HTML 요소에는 스타일을 직접 정의할 수 있는 스타일 속성이 포함되어 있습니다. 3. 외부를 동적으로 참조합니다. CSS 파일은 문서의 표현을 정의합니다.

CSS와 이미지를 HTML에 삽입하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, html5 버전, DELL G3 컴퓨터.

HTML에 CSS와 이미지를 삽입하는 방법:

1. 삽입

HTML의 스타일 요소를 사용하여 문서에 CSS 스타일을 정의합니다.

코드는 다음과 같습니다.

<head> 
<style type="text/css"> 
h1{color:red} 
p{color:blue} 
</style> 
<head>

로그인 후 복사

2. 인라인

모든 HTML 요소에는 스타일을 직접 정의할 수 있는 스타일 속성이 포함되어 있습니다. 이 스타일은 이 요소의 콘텐츠에만 적용할 수 있으며 동일한 이름을 가진 다른 요소에는 영향을 미치지 않습니다.

코드는 다음과 같습니다.

<p style="color:#FFF;font-weight:bold;">内联样式</p>

로그인 후 복사

3. 외부 참조

외부 참조는 HTML 문서 자체에 CSS 스타일이 포함되어 있지 않지만 외부 CSS 파일을 동적으로 참조하여 문서의 표현을 정의한다는 의미입니다.

1. 스타일시트 처리 명령문을 사용하세요

HTML 문서 시작 부분에 스타일시트에 대한 명령 처리 명령문을 작성하세요.

코드는 다음과 같습니다.

<?xml-stylesheet type="text/css" href="mystyle.css" ?> 
<html> 
指令语句 
</html>

로그인 후 복사

단, xml 구문 형식으로 작성된 HTML 문서만 가능합니다. 이 지침의 사용을 지원하므로 대부분의 브라우저는 xhtml 또는 xml 형식으로 저장된 경우에만 유효하며 JS는 이러한 종류의 CSS를 처리할 수 없으므로 사용하지 않는 것이 좋습니다.

2. @import 명령을 사용하세요.

외부 CSS 파일을 가져오려면 스타일 요소 사이에 @import 명령을 사용하세요.

코드는 다음과 같습니다.

<head> 
<style type="text/css"> 
<!--下面两行代码效果一样 
@import "mystyle.css"; 
@import url("mystyle.css"); 
--> 
</style> 
</head>

로그인 후 복사

모든 @import 규칙은 모든 규칙 앞에 나타나야 합니다. 매개변수는 CSS 파일의 URL 주소입니다. CSS 파일에서 @import 지시문을 사용하여 다른 CSS 파일을 가져올 수도 있습니다.

3. 링크 요소 사용

코드는 다음과 같습니다.

<head> 
<link rel="stylesheet" href="css的url" type="text/css" > 
</head>

로그인 후 복사

이 방법도 가장 일반적으로 사용됩니다.

4. HTTP 메시지 헤더를 사용하여 스타일 시트에 연결

HTTP 메시지 헤더의 링크 필드를 사용하여 외부 스타일 시트에 연결할 수 있습니다.

코드는 다음과 같습니다.

link:<mystyle.css>;rel=stylesheet; 
//等同于<link rel="stylesheet" href="css的url" type="text/css" >

로그인 후 복사

HTTP 헤더에 여러 링크를 사용하여 여러 스타일 시트를 연결할 수 있으며, HTTP 헤더에 있는 링크가 HTML 문서(head 요소에 있는)의 링크보다 우선합니다.

관련 학습 권장사항: html 비디오 튜토리얼

위 내용은 CSS와 이미지를 HTML에 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!