HTML+CSS CSS에 대한 기본 지식으로 쉽게 시작 가능

이제 CSS의 기본 지식에 대해 설명하겠습니다.

기본 지식에 앞서 CSS에서 댓글을 작성하는 방법을 알아야 합니다.

/*댓글 내용*/

글꼴: 글꼴

글꼴에 대해 어떤 작업이 있나요?:

글꼴 색상 색상 글꼴 크기 크기 글꼴 스타일 글꼴 패밀리 기울임꼴 글꼴 스타일 글꼴 두께 밑줄 텍스트 장식 줄 높이

예를 통해 설명하겠습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			font-size: 20px;	  /*字体大小*/
			color: red;			  /*字体颜色*/
			font-weight: bold;	  /*字体粗细*/
			font-style: oblique;   
			/*italic:斜体。对于没有斜体变量的特殊字体，将应用 oblique
			  normal:默认值。正常的字体
			  oblique倾斜的字体 
			*/
			text-decoration:none;   /*none         :　 默认值。无装饰 
									  blink        :　 闪烁 
									  underline    :　 下划线 
									  line-through :　 贯穿线 
									  overline     :　 上划线 
									*/
			font-family:隶书;		/*什么样的字体。宋体，隶书等*/

		}
	</style>
</head>
<body>
		中华名族伟大复兴
</body>
</html>

텍스트 텍스트

텍스트 정렬 텍스트 정렬

rreee

배경

배경 색상 배경색 배경 이미지 배경 이미지

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			text-align:center;
		}
	</style>
</head>
<body>
		中华名族伟大复兴
</body>
</html>

크기

너비 너비 높이 height

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			background-color:red;
			background-image:url("1.jpg");
		}
	</style>
</head>
<body>
		中华名族伟大复兴
</body>
</html>

margin and padding

margin 단축 속성은 하나의 명령문 속성에서 모든 여백을 설정합니다. 이 속성은 1~4개의 값을 가질 수 있습니다. <<>

여백: 10px 5px 15px 20px;

위쪽 거리는 10px입니다.

아래쪽 여백은 15px

왼쪽 여백은 20px

padding 속기 속성은 하나의 문에서 모든 패딩 속성을 설정합니다. 이 속성은 1~4개의 값을 가질 수 있습니다.

패딩: 10px 5px 15px 20px; 🎜>왼쪽 패딩은 20px

참고: 4개의 매개변수 중 아무것도 작성되지 않은 경우 기본값은 0px입니다

테두리 테두리

테두리의 두께와 색상 설정

border:1px solid red 테두리선은 실선입니다. 1픽셀인데 줄이 빨간색이군요

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			background-color: red;
			width: 100px;
			height:100px;
		}


	</style>
</head>
<body>
		<div></div>

</body>
</html>

이렇게 실행하면 단어가 나옵니다. div 왼쪽 상단에 있는 텍스트를 가운데로 이동하는 방법은 실제로 매우 간단합니다 div의 CSS에 두 가지 스타일을 추가하면 됩니다. text-align: center;

line-height: 150px;

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font-size: 20px; /*字体大小*/ color: red; /*字体颜色*/ font-weight: bold; /*字体粗细*/ font-style: oblique; /*italic:斜体。对于没有斜体变量的特殊字体，将应用 oblique normal:默认值。正常的字体 oblique倾斜的字体 */ text-decoration:none; /*none :　默认值。无装饰 blink :　闪烁 underline :　下划线 line-through :　贯穿线 overline :　上划线 */ font-family:隶书; /*什么样的字体。宋体，隶书等*/ } </style> </head> <body> 中华名族伟大复兴 </body> </html>

제출하다 코드 재설정

자동운전