CSS基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/Vincent_yuan1991/article/details/52175692
<!--
	css的引入方式：
		第一种：在head标签中使用style标签声明----内联声明
		第二种：在需要加样式的标签使用style属性来声明---内嵌声明
		第三种：在head标签中使用link标签来引入外部的css样式---外联声明，好处：一次书写，多次使用
				
	就近原则：
		如果三种引入方式对同一标签的同一样式进行了操作，则遵循就近原则，即谁离标签近谁优先显示。
	
	div块级标签
-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>css引入学习</title>
		<style type="text/css">	
			#div01{
				border: solid 2px;
				width: 200px;
				height: 200px;
				color: red;
			}
			#div02{
				border: solid 1px;
				color: blueviolet;
			}	
		</style>
		<link rel="stylesheet" type="text/css" href="css/first.css"/>
	</head>
	<body>
		<div style="background-color: chocolate;" id="div02">
			昨天看了新闻，老虎一发威真可怕。。。。。。不作不死	
		</div>
		<div id="showdiv">
			非常容易的css学习。。。。。。好开森
		</div>
		<div id="div01" style="">
			我是div01
		</div>
	</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------		
<!--
	css的选择器：
		标签选择器：
			标签名{
				属性名:属性值;
				属性名：属性值;
				.
				.
				.
			}
			同一给选中的标签元素加上样式
		
	---------------------------------------------------------	
		
		id选择器
			#标签id名{
				属性名:属性值;
				属性名:属性值;
			}
			给指定的标签加样式
	------------------------------------------------------------
		类选择器
			.类名{
				属性名：属性值;
				属性名:属性值;
			}
		使用方法：在标签上加上class属性，并将类选择器的名字写上。
		作用:可以使不同标签加上同样的样式
-->

<html>
	<head>
		<title>css的选择器</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			div{
				border: solid 1px;
				height: 100px;
			}
			#div01{
				background-color: red;
			}
			
			.common{
				color: green;
			}
		</style>
	</head>
	<body>
		<div id="div01">
			老九门更新了。。。。。。
		</div>
		<div class="common">
			没看。。。。就不剧透了，。。。加会员优先剧透
		</div>
		<div >
			
		</div>
		<br /><br />
		<input class="common" type="text" name="" id="" value="zhangsan" />
	</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------
<!--
	定位和盒子模型：
		定位：
			绝对定位：
				position：absolute;
				相对网页左上角.
				left：设置元素据左边的位置
				top:设置元素据上边的位置
			相对定位：
				position:relative;
				相对点位置在该元素上面所有元素高的和所在的位置
				top:据相对点位置的高的距离
				left：据左边的距离
-->

<html>
	<head>
		<title>绝对定位和盒子模型</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
/*  绝对定位 */
			
			
			/*#showdiv{
				background-color: red;
				border: solid 1px;
				height: 300px;
				width: 300px;
				position: absolute;
				left: 300px;
				top: 200px;
				z-index: 1000;
			}*/
			/*#div01{
				background-color: green;
				border: solid 1px;
				height: 300px;
				width: 300px;
				position: absolute;
				left: 400px;
				top: 100px;
			}*/
			
			
/*相对定位*/
			
			
			#showdiv{
				
				background-color: red;
				border: solid 1px;
				height: 300px;
				width: 300px;

			}
			
			#div01{
				background-color: green;
				border: solid 1px;
				height: 300px;
				width: 300px;
				/*position: relative;
				top:200px;
				left:200px;*/
				
			}
			#div02{
				background-color: lightslategrey;
				border: solid 1px;
				height: 300px;
				width: 300px;
				position: relative;
				top:100px;
				left:100px;
			}
		</style>
	</head>
	<body>
		<div id="showdiv">
			我是showdiv
		</div>
		<div id="div01">
			我是div01
		</div>
		<div id="div02">
			我是div02;
		</div>
	</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------
<!--
		盒子模型：
		 外边距：margin 给标签元素加上一个虚的看不到的外边框
			 margin：50px;这种写法相当于上下左右距离50px的外边框
			 margin-top:据上
			 margin-left:据左
			 margin-right:据右
			 margin-bottom:据下
		边框:
			border:设置标签元素的边框大小
			也可以单独的设置上下左右的距离
		内边距
			padding:设置的是标签内容距离边框的距离
			也可以单独的设置上下左右的距离
		内容：
			height
			width
			通过此两个属性可以设置元素内容的大小
			
css 学习内容：
	1、css的简介
		css的概念和优势
	2、css的声明
		三种声明方式
	3、css的选择器
		三种选择器
	4、css的定位和盒子模型
		绝对定位和相对定位
		盒子模型：外边距，边框，内边距，内容	
-->
<html>
	<head>
		<title>css盒子模型学习</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			#div01{
				background-color: yellow;
				border: solid 30px #eee;
				
				height: 300px;
				width: 100px;
				margin: 50px;
				margin-left: 300px;
				padding: 50px;
			}
			#div02{
				background-color: red;
				border: solid 1px;
				height: 300px;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div id="div01">
			我是div01
		</div>
		<div id="div02">
			我是div02
		</div>
	</body>
</html>
简单的CSS学习
