CSS学校笔记 001................................................


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="style01.css"><!--外部式 常用-->
		<!-- 内部式  常用
		<style>
		   p{
			   background-color:#e2e2e2;
		   }
		</style> -->
		<style>
			/* #para1{
				background-color:darkgray;
			} */
			.text1{
				background-color:darkred;
			}
		</style>
	</head>
	<body>
		<h1 style="background-color:darkgray">标题<h1><!--内联式 有弊端不常用-->
		<h1 class="text1">标题2<h2><!--class为类 可以多个命名 上面整体操作-->
		<p id="para1" class="text1">1段落</p><!--id命名 上面单独设置-->
		<p>2段落</p>
	</body>
</html>

<!-- style1.CSS -->
p {
	background-color: #e2e2e2;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			background-color 背景颜色
			color 文字颜色
			*{
				font-size: 24px;
				margin:0px;
				padding:0px;
			}
			div{
				background-color: #efc;
			}
			#text1{
				background-color:darkgray;
			}
			span{
				background-color: #0ff;
			} */
			div p{
				background-color: yellow;
			}
			*{<!--对全部进行设置-->
				font-size: 24px;<!--设置文字大小-->
				margin:0px;<!--设置外边距-->
				padding:0px;<!--设置内边距-->
			}
		</style>
	</head>
	<body>
		<div>
		<h1 id="text1">标题</h1>
		<p id="para1">段<span>一</span>落</p>
		<p>段二落</p>
		</div>
		<p>段三落</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#one{
				color: blue;
				background-color: darkgray;
			}
			div{
				text-align: center;
				width: 300px;
				background-color: #e2e2e2;
			}
			span{
				color: darkgreen;
			}
			#two{
				color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<div>
		<h1 id="one">静<span>夜</span>思</h1>
		<p>李白</p>
		<p id="two">
		床前明月光，<br>
		疑似地上霜。<br>
		举头望明月，<br>
		低头思故乡。
		</p>
		</div>
	</body>
</html>