css进阶知识速查

HTML：
1、web三要素：服务器、浏览器、HTTP协议
2、HTML：超文本标记语言，搭建网页结构，以.html	  .htm	.xhtml为后缀
		标记：<关键字>
		分为：<关键字></关键字>双标记
			<关键字/>单标记
		<!-- -->注释，注释不能嵌套
有序列表		
<dl>
	<dd></dd>
</dl>




CSS:层叠样式表
1、如何使用：
	内嵌样式：直接定义在标签内部。<div style="样式名称:样式值;..."></div
	内部样式：定义在HTML页头元素中
			<style>
				样式列表
			</style>
			</head>
	外部样式：定义在单独的.css文件中，在HTML文件中引用
			<link href=".css文件路径" rel="stylesheet" type="text/css">
2、css语法：
	{样式名称:样式值;样式名称:样式值;......}
	继承性、层叠性、优先级(越精确优先级越高，就近优先)
3、css选择器：
	1》通配选择器：选择页面所有元素
		*{...}
	2》标记选择器:选择指定标签的标记
		标记名称{...}	
	3》class选择器：选择具有相同class属性的标签，所有标签都有class属性
		.classname{...}
	4》id选择器：所有元素都有id属性，表示在页面的唯一标识
		#id{}
	5》群组选择器：
		标记选择器,.classname,id选择器...{...}
	6》派生选择器：
		父选择器	子选择器{...}父类下所有的子选择器
		父选择器>子选择器{...}父选择器下所有的直接子选择器
	7》伪类选择器：
		:link{}	向未被访问的超链接加样式，刷新状态
		:visited{} 访问过的超链接加状态，访问过状态
		:active{}	激活元素加样式状态，点击状态
		:hover{}	鼠标悬停状态
		:focus{}	元素获取焦点时状态
4、css具体样式：
	1》边框样式
		border:width style color;	四边设置
		border-top:...;
		border-bottom:...;
		border-left:...;
		border-right...;	单边设置	
		单位：px--像素，%--百分比，em--1em是当前字体尺寸，in---英寸 ，cm---厘米，mm--毫米 pt--磅
		颜色：1、十六进制，如：#FF0000;2、十六进制简写，如：#F00;3、RGB值，如：rgb(255,0,0)
			4、RGB百分比，如：rgb(100%,0,0);5、颜色的单词，如：red
		overflow:hidden/visible/scroll/auto;内容溢出边框处理
				  隐藏		让溢出	加滚动条   溢出加滚动条不溢出不加
	2》边距样式：
		padding:value;内边框，里面内容不变元素框变
		padding:value1 value2;
		padding-top/left/bottom/right:value;
		margin:value;外边框，
		margin-top/right/bottom/left:value;
		margin:auto;水平居中
	3》背景属性：
		background-color:color;背景色
		background-image:url(图片路径);背景图
		background-repeat:repeat/no-repeat/repeat-x/repeat-y;平铺方式
		background-position:x(右正) y(下正);调整背景图的位置
							x%	y%
							left/right/center/top/bottom
		background:  color  image repeat  附着方式 position; 总的样式	
		background-attachment:scroll/fixed;背景图是否随页面滚动，默认滚动，滚动/固定		
5、文本样式：
	font-fimaly:字体;
	font-size:value;字体大小
	font-weight:value;字体加粗
	color:value;字体颜色
	text-align:left/right/center;文本水平位置
	text-decoration:none/underline/throung-line,文本修饰线
	line-height:value;行高
	text-index:value;首行文本缩进，一般2em-----一个字体高度为1em
	font: style  weight size line-height family：总的样式
6、表格样式：
	**border-collapse:separate/collapse;是否合并相邻边框
	border:粗细  形状  颜色；
	border-top:		border-bottom:	border-left:	border-right:
	width:
	height:
	padding:	
	文本属性
定位：
1、确定元素出现的位置。
2、流定位：默认定位，
		块级元素：独占一行，垂直排列------div  p
		行内元素：水平排列。			a i 
3、浮动定位：在父元素之内移动，默认位置空间释放，
		浮动元素：float:none/left/right;
		清除浮动带来的影响：clear:none/left/right/both;
4、position定位：
	4.1、relative:相对定位，相对与元素本来的默认位置定位，top/bottom/left/right
		元素默认位置空间不释放
		以top/left为准，向右为正，向左为负，向下为正，向上为负，向中心为+，向外为-
		position:relative;
		top/bottom:		
		left/right:
	4.2、absolute:绝对定位，相对与离它最近的position已定位元素或根元素body定位，即父元素有position，子元素
	绝对定位就相对与父元素没有就像对于body，top/bottom/left/right
		元素默认位置释放
		position:absolute;
		top/bottom:
		left/right:
	4.3、fixed:固定定位,相对与浏览器窗口定位，不占用页面空间，不随页面滚动，top/bottom/left/right
		position:fixed;
		top/bottom:
		left/right:
	4.4、z-index:堆叠顺序:	控制元素堆叠在一起时的层次，value值越大越靠前，越小越靠后，可为负数
		z-index:value;value值越大越靠前显示越完整	
5、列表样式：
	5.1、list-style-type:列表前标记
					ul列表：none/disc/circle/square;
					ol列表：none/decimal(数字1,2...默认)/lower-roman/upper-roman;
	5.2、list-style-image:url(图片路径);用图片代替列表前标记
6、显示方式：
	6.1、块：有宽高独占一行，垂直排列-----hn、div、ol、ul、table、p
	6.2、行内：没有宽高不独占一行，水平排列----span、b、strong、i、a、em、
	4.3、行内快：有宽高，不独立成行（水平排列）---img input select textare
	修改显示方式
	display:none/block/inline/inline-block;
			none---不显示元素隐藏，释放空间
			block--显示元素，并将行内元素改为块元素。 如<a>
			inline-显示元素，并将块元素改为行内元素。如<p>
			inline-block--将元素改为行内块元素显示
7、鼠标形状：
	cursor:pointer/wait/text/default/crosshair/help;