网页开发基础篇-CSS样式

 /*
 CSS:层叠样式表，解决html的显示效果

css和html相结合的几种方式：
	1.每一个html标签中都有一个style属性
	2.使用style标签的方式：
	    <style  type="text/css">
	    	div{
	    		background-color:#06F;
	    		color:#F00

	    	}
	    </style>
	3.第三种方式：
		<style  type="text/css">
	    	@import url(dic.css);
	    </style>


        4.通过<link  rel="stylesheet"    href="div.css"   type="text/css"/>;rel指明文件和html页面的关系，如样式表；

样式选择器：
	就是指定css要作用的标签，那个标签的名称就是选择器。意为要选择的容器
选择器共有三种：
	1.html标签名选择器。使用的就是html的标签名
	2.class选择器。其实使用的标签中的class属性
		div.classname{
			background-color:#06F;
	    	color:#F00
		}
		.classname{
			background-color:#06F;
	    	color:#F00
		}
	3.id选择器。其实使用的是标签中的id属性
	    #id{
			background-color:#06F;
	    	color:#F00
	    }

	    div#id{
			background-color:#06F;
			color:#F00;
	    }
	4.关联选择器：选择器中的选择器；例：span b a img表示span下的子层级标签img
	5.组合选择器：span,.classname{}
	6.伪元素选择器:不是真正的元素，其实表示的是标签的某些状态；如:
		a:link{            /*未点击时的样式
	
		}
		a:hover{           /*s鼠标悬停

		}
		a:active{}          /*s点击效果
		a:visited{}         /*s点击后效果
		p:first-letter{}    /*段落中第一字母
		p:first-line{}      /*段落中第一行文本
		:focus{}            /*具有焦点的元素，ie6不支持，firefox可以看到效果
		div:hover{}
	
*/