CSS知识点

<!doctype html>
<html lang="en">
 <head>
  <title>day02</title>
  <meta  content="day02" charset="UTF-8">
 </head>
 <body>
  <pre>
	1、CSS：层叠样式表是网页用来显示效果。可以解决html代码的可维护性，并增强了网页的显示效果功能。CSS将网页内容和显示样式进行分离，提高了显示功能。
	  	-层叠：一层一层的
		-样式表：很多的属性和属性值
	
	2、css和html的结合方式（四种结合方式）
		-1、在每个html标签上面都有一个属性 style，把css和htnml结合在一起。
			-<div style="background-color:red;color:green;">hello world</div>
		-2、使用html的一个标签实<style>标签，写在head里面
			-<style type="text/css">
					div{
					background-color:green;
					color:yellow;
					}
			 </style>
		-3、在style标签里面使用语句
			-<style type="text/css">
				@import url(../css/div.css);
			 </style>
			 缺点：在有些浏览器下不起作用，一般使用第四种方式
		-4、使用头标签 link，引入外部css文件
			-<link rel="stylesheet" type="text/css" href="css文件路径"/>
		
		样式优先级：由上到下，由外到内，优先级由低到高，后加载的优先级高
		代码规范:
			-选择器名称{属性名：属性值；}
			-属性之间分号隔开
			-属性与属性值用冒号连接
			-如果一个属性多个值的话，那么多个值用空格隔开
	
	3、css的选择器(三种)
		-要对那个标签里面的数据进行操作
		-1、标签选择器
			*使用标签名作为选择器名称
			  		div{
						background-color:green;
						color:yellow;
						}
		-2、class选择器
			*每个html标签都有一个属性 class
				-<style type="text/css">
					.haha{
					background:red;
					color:blue;
					}
				</style>
				-<div class="haha">hello world</div>
				-<p class="haha">hello world</p>
		-3、id选择器
			*每个html标签上面都有一个属性id
				-	<style type="text/css">
						<!--div-->#haha{
							background:red;
						}
					</style>
				-<div id="haha">hello world</div>
				-<p id="haha">hello world</p>
			
			*基本选择器的优先级
				-class选择器优先级大于标签选择器
				-id选择器大于class选择器
				-结合方式style高于三种选择器
				即：style>id>class>label
		
		4、css扩展选择器
			-1、关联选择器:标签是可以嵌套的，两个或者多个选择器之间产生关系，就可以用此选择器
				*<div><p>helloworld</p></div>
				设置div标签里面的样式，嵌套标签里面的样式
				
				(外标签div和p之间用空格隔开）
				-  <style type="text/css">
					div p{
						background:orange;
					}
				  </style>
				-<div><p> hello world</p></div>

			-2、组合选择器：对多个不同选择器进行相同样式设置的时候应用此选择器
				*<div>helloworld</div>
				*<p>helloworld</div>
				把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
				
				-<style type="text/css">
					div,p{background:blue;}
				  </style>
			    -<div>hello world</div>
				-<p>hello html</p>

			-3、伪元素选择器：其实就在html中预先定义好的一些选择器。或者说当前元素处于的状态。
				*css里面提供一些定义好的样式，可以拿过来使用
				*比如超链接
					**超链接状态：
						原始状态：    :link
						鼠标悬停状态：:hover
						点击状态：    :active
						点击之后状态：:visited

						<style type="text/css">
						/*原始状态*/
							a:link{background:red;}
						/*悬停状态*/
							a:hover{background:green;}
						/*点击状态*/
							a:active{background:blue;}
						/*点击之后*/
							a:visited{background:gray;}
						</style>
						<a href="http://www.baidu.com" target="_blank">css概述和html结合方式超链接</a>
			
		5、css盒子模型
			*在进行布局之前需要把数据封装到一块一块的区域内，这个区域的专业术语叫盒子、
			边框:
				统一设置 border 
				上border-top
				下border-bottom
				左border-left
				右border-right
			内边距:
				统一设置 padding
				上padding-top
				下padding-bottom
				左padding-left
				右padding-right
			外边距:
				统一设置 margin
				上margin-top
				下margin-bottom
				左margin-left
				右margin-right
		
		6、css布局的漂浮
			*float：left/right
		
		7、css布局定位属性
			*position:
				-属性值：
					**static:默认值 无特殊定位，对象遵循html定位准则、
					**absolute:
						-将对象从文档流中拖出
						-使用left，tright，top，bottom等属性相对于其进行绝对定位、
					**relative:
						-不会将对象从文档流中拖出，对象不可层叠-依据left，right，top，bottom等属性在正常文档流中绝对位置、
		
		8、案例图文混排 float：left、right应用
					
		9、案例图像签名 position:absolute应用
			*在图片上显示文字

		10、内容总结：
			1、css和html四种结合方式

			2、css基本选择器
				*标签选择器
				*class选择器
				*id选择器
				
				**优先级：style>id>class>label

			3、css的扩展选择器
				*关联选择器
					-设置嵌套标签的样式 div p{}
				*组合选择器
					-不同的标签具有相同的样式 div,p{}
				*伪元素选择器
					-超链接的状态
						*原始：link
						*悬停：hover
						*点击：active
						*点击之后：visited
			
			4、盒子模型	
				*边框：  border：2px solid red;
					     上下左右：border-top、border-bottom、border-left、border-right
				*内边距：padding：20px;
					     上下左右：padding-top、padding-bottom、padding-left、padding-right
				*外边距：margin：20px;
						 上下左右：margin-top、margin-bottom、margin-left、margin-right

			5、布局的漂浮
				*float
					-left：后面的div到右边
					-right：后面的div到左边
			
			6、布局的定位
				*position
					-absolute：从文档流中拖出
					-relative：不会从文档流中拖出
  </pre>
 </body>
</html>
猜你喜欢
