C3 的那些新玩意儿 （附案例）

一、CSS3 简介

	1.兼容性写法
		-moz-   	firefox
		-webkit-  	谷歌   苹果
		-o-			欧朋
		-ms-   		iE
	2.css Hack
		(1) CSS Hack一般都是利用各浏览器的支持CSS的能力和BUG来进行的;
			所以对浏览器的选择大致可以分为能力选择和怪癖选择（BUG）;
			能力通常是指浏览器对CSS特性的支持程度，而怪癖是指浏览器特有的一些BUG;
		(2) 尽量找到通用方法而减少对CSS Hack的使用; 
			大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题

二、CSS3 选择器

	1.css3关系型选择器:
		~ 普通兄弟选择器
		
	2.属性选择器:
		E[attr]				任何带有bttr属性名的标签;
		E[attr = value]		属性值为"value"的标签	
		E[attr ~= value]  	属性值中包含"value"单词的标签, 其他属性值通过空格隔开的标签
		E[attr ^= value]  	属性值以"value"开头的标签
		E[attr $= value]  	属性值以"value"结尾的标签
		E[attr *= value]  	属性值以包含"value"字符串的标签
		E[attr |= value]	属性值以"value"开头, 并包含"value"的标签
		
	3.伪元素选择器:
		::before 	  在元素之前添加内容;   ::after 在元素之后添加内容
		:first-letter 向文本的第一个字符添加特殊样式，搭配浮动首字下沉的特效     
		:first-line   向文本的首行添加特殊样式 
		::selection	  光标选中文本的样式, 默认为深蓝色, 写自己的网站可以用    
		::placehoder  占位符, 改变input框中的占位符文本样式
		
	4.伪类选择器:
		E:not(s)   	给除s外所有E中添加样式
		E:root     	匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
		E:target	URL后面跟锚点#, 指向文档内某个具体的元素。
					这个被链接的元素就是目标元素（target element）: target选择器用于选取当前活动的目标元素。
		// ***-child	
		E:first-child	匹配父元素的第一个子元素E	（E必须是父元素的第一个子元素）
		E:last-child    匹配父元素的最后一个子元素E	（E必须是父元素的最后一个子元素）
		E:only-child   	匹配父元素仅有的一个子元素E
		E:nth-child(n)  匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效
		E:nth-last-child(n)		匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效
		// ***-of-type
		E:first-of-type		匹配父元素下第一个类型为E的子元素
						   （不同的父元素，也是其父元素的首个类型为E的子元素，所以都会被命中）
		E:last-of-type    	匹配父元素下的所有E子元素中的最后一个
		E:only-of-type  	匹配父元素的所有子元素中唯一的那个子元素E
		E:nth-of-type(n)  	匹配父元素的第n个子元素E
		E:nth-last-of-type(n)	匹配父元素的倒数第n个子元素E
		// 属性类伪类
		E:empty 空的:		匹配没有任何子元素的元素E（包括text节点, 注释节点算空） 
		E:checked   		匹配用户界面上处于选中状态的元素E
		E:enabled   		匹配用户界面上处于可用状态的元素E
		E：disabled  		匹配用户界面上处于禁用状态的元素E
		E:read-only  		只读元素添加样式
		E:read-write		只写元素添加样式
		hasChildNodes()		返回Boolean, 验证是否有子节点   

三、target 实现手风琴菜单

（1）效果图

（2）源码

	// 样式
	ul:not(:target){
		display: none;
	}
	a{
		display: block;
	}
	
	// 结构
	<a href="#ul_01">标题一</a>
	<ul id="ul_01">
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</ul>
	<a href="#ul_02">标题二</a>
	<ul id="ul_02">
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</ul>
	<a href="#ul_03">标题三	</a>
	<ul id="ul_03">
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</ul>

四、两列定宽布局

（1）效果图

（2）源码w

	/* CSS样式 */
	.left {
	   width: 200px;
	    height: 300px;
	    background-color: #f00;
	    float: left;
	}
	// 方案一:
	.right {
		// calc(); 浏览器解析运算当中数据 注：减号前后必须有空格
	  	width: calc(100% - 200px);		
	    height: 300px;
	    background-color: #0f0;
	    float: left;
	}
	// 方案二:
	.right {
			// left 设宽并浮动，right 不设宽不设浮动；
		    height: 300px;
		    background-color: #0f0;
		}
		
	<div class="left"></div>
	<div class="right"></div>

五、用less写css样式

less特点:
	1.语法糖;
	2.浏览器只认识html,css,js; less浏览器无法识别,使用的时候需要映入编译好的css文件;
	3.因为第2点的原因，.less文件需要编译成.css文件, 让浏览器解析编译完成的css文件;
	
less编译成css几种方式:
	1.浏览器直接编译, 走到服务端;
	2.客户端工具: koala;
	3.服务端: node
	
less的使用
	1.less完全不需要管css代码，样式写入.less文件中, 后期维护也在, less中操作；
	2.less两种编译方式: (1)normal 普通编译less; (2)compress 压缩编译less;
	
less 嵌套:	
	ul {
	    width: 600px;
	    li {
	        margin: 10px;
	        list-style: none;
	        background-color: #ccc;
	        a {
	            color: #000;
	            text-decoration: none;
	            &:hover {
	                cursor: pointer;
	                color: red;
	            }
	        }
	    }
	}

less 内使用 calc():
	width: ~'calc(100% - 200px)';	//这个运算是留给浏览器来运算的不是给less运算的

less中使用变量和函数
	1.定义变量方式: @变量名 : 变量值;
	2.函数  		参数 : 可以写默认参数
	.border02(@borderWidth) {	
		border: @borderWidth solid aqua;
	}
	3.调用
	.div {
	    .border02(10px);
	}	
	

~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~