①css基础
	样式表：
		内联式样式表 #使用标签的style属性（行内样式）
		嵌入式样式表 #（植入样式）
		外联样式表#（链接样式）
		输入样式表 #使用@import url(style/test.css)


	选择器：
		html选择器
		class 选择器
		id 选择器
		关联选择器（td.classA）#<td class="classA">
		组合选择器（空格隔开）
		伪元素选择器：（一个标签的不同状态）	
			a:link
				a:hover
			a:visited
	布局：
		属性：
			margin (外边距)
				margin-left,margin-right,margin-top,margin-bottom
			padding (内边距)
				padding-left,padding-right,padding-top,padding-bottom
			float (区域漂浮对齐) :right,left,none
			clear (清除指定的浮动空间)
				none | left | right | both
				clear:left;#不允许元素的左边有漂浮元素
	示例：
		body{
				margin:0px;
				text-align:center;
				background:#ffffcc
			}
		//清除与浏览器的边距，文本居中，网页背景色设置
		
		#container{
					width:800px;
					height:1000px;
					background:yellow;
					margin:auto 0px;
				}
		//网页主题部分居中，定宽，设置主题背景
		
		#header{
					float:left;
					width:800px;
					height:100px;
					margin:auto 0px;
					background:red;					
					clear:both;
				}
		//头部在container中，为整个网页的头部，左右无其他元素
		
		#logo{
				float:left;
				width:25px;
				height:90px;
				background:green;
				clear:right;
				margin:0px;
			}
		//logo在header的内部，居左
		
		#banner{
					float:right;
					width:530px;
					height:90px;
					marigin:0px;
					clear:left;
					background:blue;
				}
		//banner在header中，居右
		
		#menu{
				width:800px;
				height:35px;
				margin:auto 0px;
				clear:both;
				background:#ff00ff;
			}
		//menu在container中，横式
		
		.nav{
				margin:auto 0px;
				width:800px;
				height:10px;
				float:left;
				clear:both;
				background:#ffffff;
				line-height:10px;
			}
		//空格条位于container中
		
		#footer{
					width:800px;
					height:100px;
					background:red;
					margin:auto 0px;
				}
		//footer位于网页底部，在container中
		
		#menu ul{
					float:left;
					list-style:none;
					margin:0px;
				}
				
		#menu il li{
						float:left;
						display:block;
						line-height:35px;
						margin :0px 10px;
					}
						
		.menuDiv{
					width:1px;
					heigt:35px;
					background:green;
				}
		//菜单栏中的竖线分隔符
		
		#menu ul li a:link,#menu ul a:visited{
							font-weight:bold;
							color:blue;
						}
		#menu ul li a:hover{
							font-weight:800;
							color:red;
						}
		//菜单栏中的链接
		
	
	样式表的执行顺序：
		Inline styles （行内样式） 
		Embedded styles （植入样式） 
		Linked styles （链接样式） 
		Imported styles （输入样式） 
		Default browser styles（缺省浏览器样式） 
		浏览器将按照上述顺序执行样式表的指令。


②css文字处理
	font-size单位：
		point:	pt
		ems:	em
		pixels:	px
		other:	cm mm in pc ex
	font-size的关键字类型：
		xx-small 
		x-small 
		small 
		medium 
		large 
		x-large 
		xx-large 
	font-size比例尺寸：
		300%
	font-style:设置斜体
		italic(oblique) normal
	font-weight:字重
		blod
	text-transform:字体变形
		uppercase 使所有字母大写显示，
		lowercase使所有字母小写显示，
		capitalize 使每个单词的第1个字母大写显示
		none 使所有继承的文字变形参数被忽略，文字将以正常形式显示。
	text-decoration:文字修饰
		underline 给文字下划线
		overline给文字上划线. 
		line-through给文字划出删除线
		blink是你在恶梦中常常看到的－－文字在闪烁
		none使得上述效果都不会发生。 
	font:一次性定义字体属性

③文字定位/段落排版
	word-spacing:字间距
		单位：
			in （英寸） 
			cm （厘米） 
			mm （毫米） 
			pt （点数） 
			pc （打字机字间距） 
			em （ems） 
			ex (x-height) 
			px （象素） 
	letter-spacing:字母间距
	line-height:设置行距
		方法：
			数字 （字号乘以数值pt）
			长度单位 
			比例 
	text-align:段落水平对齐
		left
		right
		center
		justify:左右对齐
	vertical-align:垂直对齐方式
		top将要素顶部同最高的母体要素对齐。 
		bottom将要素的底部同最低的母体要素对齐。  
		text-top将要素的顶部同母体要素文字的顶部对齐。 
		text-bottom将要素的底部同母体要素文字的底部对齐。 
		baseline将要素的基准线同母体要素的基准线对齐。 
		middle将要素的中点同母体要素的中点对齐。 
		sub将要素以下标的形式显示。 
		super将要素以 上标的形式显示。
	text-indent:首行缩进
	
	每一个整块的素或替代要素都包含在样式表生成器称为box的容器之内，box包括：
		要素本身 
		围绕要素的空格填充（padding） 
		围绕空格填充的边框（border） 
		围绕边框的边距（空白－margin）
		
	顶边距、底边距、左边距和右边距
		这4项属性可以使你控制一个要素的四周的边距。如下： 
		H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }
		
	顶空格填充，底空格填充，左空格填充和右空格填充
		空格填充的作用类似于边距控制，你可以设定一个要素的前后左右的空格填充的尺寸。 
		H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }

	顶边框宽度，底边框宽度，左边框宽度和右边框宽度
		可以控制整个边框的宽度，也可以分别控制每一边的边框宽度： 
		H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }
		IMG { border-width: 1in }
		参数可以使用关键词：
			thin
			medium
			thick
			
	边框颜色 
		P { border-color: green; border-width: 3px }
	
	border-style:边框样式
		solid
		double
		dotted
		dashed
		groove
		ridge
		inset
		outset 

	float：浮动，设置周围文字的围绕方式
	clear：清除，清除周围文字的围绕方式

④颜色背景
	color:颜色
		颜色名称:red
		16进制色彩控制:#00ff00
		rgb值: rgb(255,255,255)
	background-color:背景色
	background-p_w_picpath：背景图像
		url(source_path)
		/*设置背景图像时最好设置一种背景色，下载图像时可以先显示背景色*/
	background-repeat:背景重复，控制背景平铺
		no-repeat
		repeat-x
		repeat-y
		repeat
	background－p_w_upload:固定背景，不随页面滚动
		fixed
	background-position:背景定位
		关键词参数：
			top将背景图象同前景要素的顶部对齐。 
			bottom将其同前景要素的底部对齐。 
			left将其同左边对齐。 
			right将其同右边对齐。 
			center将其水平居中（如果使用在另一关键字前面）或垂直居中（如果用在另一关键字后面）。
		长度参数，可设置水平和垂直：
			P { background-position: 70px 10px; background-repeat: repeat-y; background-p_w_picpath: url(background.gif) }
		比例值：
			P { background-position: 75% 50%; background-p_w_picpath: url (background.gif) }
			
	background:可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位
		P { background: url(background.gif) #CCFFCC repeat-y top right }

⑤定位和叠放
	绝对定位
		左边和顶部：
			H4 { position: absolute; left: 100px; top: 43px }
			/*设置元素相对于浏览器左侧和顶部的距离*/
	相对定位
		P { position: relative; left: 40px; top: 10px } 
		/*指定了元素的位置相对于在文件中所分配的位置*/
	position还有一个static值，同HTML的位置定位，不能设定特定的值
	
	width:宽度
	height:高度
	visibility:可视性
		visible使要素可以被看见 
		hidden使要素被隐藏 
		inherit指它将继承母体要素的可视性设置
	/*当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图象周围，那么，其显示效果将是文字包围着一块空白区域*/
	z-index:设置元素出现的层次，叠放文字和图像
		参数：纯整数，数值越大出现在越上层