집 > 기사 > 웹 프론트엔드 > HTML에서 CSS의 세 가지 링크 방법을 1분 안에 이해하세요

HTML에서 CSS의 세 가지 링크 방법을 1분 안에 이해하세요

烟雨青岚앞으로: 2020-07-06 13:17:383662검색

HTML의 CSS에는 세 가지 연결 방법이 있습니다. 그 세 가지가 무엇인지 아시나요? CSS 텍스트의 세 가지 연결 방법은 인라인 정의, 내부 CSS에 연결, 외부 CSS에 연결하는 방법입니다.

CSS 텍스트를 연결하는 방법에는 인라인 정의, 내부 CSS에 연결, 외부 CSS에 연결하는 세 가지 방법이 있습니다.

1.코드는

<html>
	<head>
		<title>内联定义</title>
	</head>
	<body>
		<p style="border:2px solid #000000">内联定义</p>
		<p style="color:red">内联定义</p>
		<p style="font-size:12px">内联定义</p>
	</body></html>

2.코드는

<html>
	<head>
		<title>链入内部css</title>
		<style type="text/css">
			#myid
			{
				width:200px;
				height:300px;
				color:red;
			}
			.myclass
			{
				width:200px;
				height:300px;
				color:red;
			}
		</style>
	</head>
	<body>
		<p id="myid">链入内部css</p>
		<p class="myclass">链入内部css</p>
		
	</body></html>

3.코드는

<html>
	<head>
		<title>链入外部css</title>
		<link type="text/css" rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<p id="p1">链入外部css</p>
		<p id="p2">链入外部css</p>
		<p class="p3">链入外部css</p>
	</body></html>

코드 3의 style.css는 html 파일과 같은 폴더에 있습니다.

코드는 :

#p1{
	border:2px;
	color:red;}
 #p2{
	border:2px;
	color:blue;}
 .p3{
	border:2px;
	color:red;}

CSS에서 수업 앞에 #

을 추가해야 합니다. 이 기사는 https://blog.csdn.net/weixin_43670802/article/details/94174581

HTML에서 CSS의 세 가지 링크 방법을 1분 안에 이해하세요

관련 기사