css基础知识点整理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
     span{
		font-size: 120px;
		color: orangered;
		border: 5px solid royalblue;
	 }
</style>
	</head>
	<body>
		<span>大忽悠到此一游</span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
     span{
		font-size: 120px;
		color: orangered;
		border: 5px solid royalblue;
	 }
</style>
	</head>
	<body>
		<span>大忽悠到此一游</span><br/>
		<span>卧槽，无情！！！</span>
		<div>卧槽,残忍！！！</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
      .BLACK{
		  font-size: 50px;
		  color: black;
	  }
	  .RED{
		  font-size: 50px;
		  color: red;
	  }
</style>
	</head>
	<body>
        <span class="BLACK">span1:要求变成黑色</span><br/>
		<span class="RED">span2:要求变成红色</span><br/>
		<div class="BLACK">div1:要求变成黑色</div>
		<div class="RED">div2:要求变成红色</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
   #d1{
	   font-size: 50px;
	 color: red;
 }
</style>
	</head>
	<body>
        <span >span1:要求变成黑色</span><br/>
		<span >span2:要求变成黑色</span><br/>
		<div >div1:要求变成黑色</div>
		<div id="d1">div2:要求变成红色</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
        div font{
			font-size: 50px;
			color: blue;
		}
</style>
	</head>
	<body>
       <div>
		   <font>字体大小为50像素，字体演示为蓝色</font>
			不用管我
		   </div>
		   
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
 div{
	 border: 1px solid blue;
	 width: 300px;
	 height: 300px;
 }
</style>
	</head>
	<body>
      <div>
		   大忽悠门派-----大忽悠掌门人
	  </div>		   
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
 div{
	 border: 1px solid blue;
	 width: 300px;
	 height: 300px;
	 background-color: beige;
 }
</style>
	</head>
	<body>
      <div>
		   大忽悠门派-----大忽悠掌门人
	  </div>		   
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
 #d1{
	 border: 1px solid blue;
	 width: 150px;
	 height: 150px;
	 background-color: beige;
	 float: right;
 }
 #d2{
 	 border: 1px solid blue;
 	 width: 150px;
 	 height: 150px;
 	 background-color: blue;
	  float: right;
 }
 #d3{
 	 border: 1px solid blue;
 	 width: 150px;
 	 height: 150px;
 	 background-color: red;
	  float: right;
 }
</style>
	</head>
	<body>
      <div id="d1"></div>		   
	    <div id="d2"></div>		
		  <div id="d3"></div>		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
    h1{
		display: inline;
	}
	div{
		display: inline;
	}
	span{
		display: block;
	}
	a{
		display: none;
	}
</style>
	</head>
	<body>
<h1>标题h1--块级元素</h1>
<div>默认占满一行---块级元素</div>
<span>行内元素</span>
<a>超链接----行内元素</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
div{
	font-size: 100px;
	color: green;
}
</style>
	</head>
	<body>
       <div>我想变大变Green</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
div{
	border-top: 1px solid blue;
	border-bottom: 1px solid red;
}
	
a
{
	border: 5px solid red;
}
</style>
	</head>
	<body>
       <div>我想</div><br/>
	   <a>你想吗?</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
div{
	border-top: 1px solid blue;
	border-bottom: 1px solid red;
	padding-top:10px;
	padding-bottom: 10px;
}
	
a
{
	border: 5px solid red;
	padding: 5px;
}
</style>
	</head>
	<body>
       <div>我想</div><br/>
	   <a>你想吗?</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
<style>
div{
	border-top: 1px solid blue;
	border-bottom: 1px solid red;
	padding-top:10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
	
a
{
	border: 5px solid red;
	padding: 5px;
	margin: 20px;
}
</style>
	</head>
	<body>
       <div>我想</div><br/>
	   <a>你想吗?</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<body>
<a style="font-size: 100px; color: red;">大忽悠<a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
	</head>
	<style>
	a{
		font-size: 50px;
		color: red;
	}
	</style>
		
	</style>>
	<body>
<a>大忽悠</a>
<a>大忽悠</a>
<a>大忽悠</a>
<a>大忽悠</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠个人主页</title>
		<link rel="stylesheet" type="text/css" href="a.css">
	</head>
	<body>
<a>大忽悠</a>
<a>大忽悠</a>
<a>大忽悠</a>
<a>大忽悠</a>
	</body>
</html>

a{
	font-size: 100px;
	color: blue;
}