认识CSS3和HTML5

认识CSS3和HTML5(源码网整理：)CSS3教程：background-clip和background-originbackground-clip和background-origin是CSS3中新加的backgroundmodule属性，用来确定背景的定位。background-clip用来判断background是否包含border区域。而background-origin用来决定background-position计算的参考位置。语法为：background-clip:[border|padding][,[border|padding]]*background-origin:[border|padding|content][,[border|padding|content]]*对于background-clip：如果是padding值，则background忽略padding边缘，border是透明的。如果是border值，则background包括border区域。如果background-image图片有多个，对应的background-clip值之间用逗号分隔。对于background-origin：如果是padding值，则position相对于padding边缘（00为padding边缘的左上角，而100%100%为右下角）。如果是border值，则意味着相对border边缘。而border值则相对于内容边缘。与background-clip相同，多个值也用逗号分隔。如果background-clip是padding值，background-origin是border值，并且background-position是topleft（默认初始值），则背景图左上角将会被截取掉部分。这两个属性仅从CSS3才出现，在未使用该属性backgroundmodule中的默认表现又如何呢？background-clip默认类似于background-clip:border。background-origin默认类似于background-origin:padding。但IE又是特例（Itsucks）。在IE6、IE7中，一般元素（button等除外）的背景相当于：background-clip:border;background-origin:border;而hasLayout的元素（加上button等）的背景则相当于：background-clip:padding;background-origin:padding;这一对CSS3属性已在Mozilla,Safari3和Konqueror等浏览器中实现，不过都是通过其私有属性的表达方式。引用：基本非IE的浏览器的私有属性一般都会以-xxx-这样开始，-o-就是以Presto为引擎的Opera私有的、-icab-是iCab私有的，-khtml-是以KHTML为引擎的浏览器（如KonquerorSafari）、-moz-就是以Mozilla的Gecko为引擎的浏览器（如Firefox，Mozilla）、-webkit-就是以Webkit渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。即支持的私有属性分别为：moz-background-clipwebkit-background-clipkhtml-background-clipmoz-background-originwebkit-background-originkhtml-background-origin下面举个运用background-origin属性的简单例子，效果如下图：运行代码框!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/titlebackground-clip与background-origin的一则运用/titlestyletype=text/cssbutton{display:inline-block;/*触发hasLayout*/height:26px;padding:020px;cursor:pointer;*overflow:visible;/*消除IE按钮左右padding随字数长度变化的BUG*/border:3pxdouble#95071b;/*用3px双边来模拟设计图中的白线*/border-right-color:#650513;border-bottom-color:#650513;background-color:#95071b;/*设置背景裁切方式和参考线*/-moz-background-clip:padding;-webkit-background-clip:padding;-khtml-background-clip:padding;-moz-background-origin:padding;-webkit-background-origin:padding;-khtml-background-origin:padding;/*向前兼容*/background-clip:padding;background-origin:padding;color:#fff;font-size:12px;line-height:20px;/*修正IE6下高度问题*/_padding-top:2px;_line-height:14px;}/style/headbodyh1background-clip与background-origin的一则运用/h1ulli兼容：IE6、IE7、Firefox2+、Firefox3+、Safari、Konqueror/li/ulpbutton这里是按钮，是钮不是妞/button/ppDesignedby：ahref==PlanABC-怿飞'sBlog怿飞/a/p/body/htmlHTML部分：button这里是按钮，是钮不是妞/buttonCSS部分（详细见注释）：button{display:inline-block;/*触发hasLayout*/height:26px;padding:020px;cursor:pointer;*overflow:visible;/*消除IE按钮左右padding随字数长度变化的BUG*/border:3pxdouble#95071b;/*用3px双边来模拟设计图中的白线*/border-right-color:#650513;border-bottom-color:#650513;background-color:#95071b;/*设置背景裁切方式和参考线*/-moz-background-clip:padding;-webkit-background-clip:padding;-khtml-background-clip:padding;-moz-background-origin:padding;-webkit-background-origin:padding;-khtml-background-origin:padding;/*向前兼容*/background-clip:padding;background-origin:padding;color:#fff;font-size:12px;line-height:20px;/*修正IE6下高度问题*/_padding-top:2px;_line-height:14px;}不足之处：此效果在Opera下无法实现。当然这只是一种对HTML代码有洁癖的解决方法（限于对background-clip和background-origin属性的学习和理解），当然也可尝试其他方法，也许会使CSS更简洁，至于各种方法的优缺点自己衡量。细说CSS3中的选择符英文原文：中文翻译：=197注：本文写于2006年1月，当时IE7、IE8和Firefox3还未发行，文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Firefox3中，文中的大部分选择符已经被支持[dudo注]在2005年的9月和10月，我先后发表了几篇关于CSS2.1中选择符的介绍文章。大体看来那几篇文章中介绍过的大部分选择符都已经可以在像Mozilla/Firefox，Safari和Opera等现代浏览器中使用了。我们现在要做的就是等待InternetExplorer尽快赶上来，那我们就可以尽情地使用CSS2.1中的选择符了。好在InternetExplorer在其第7个版本中已经在尽力追赶了，至少在某些扩展方面。如果我们再向前看一点，在CSS3中还有功能更加强大的选择符等待我们去发掘和使用。CSS3中的很多选择符已经在现代浏览器中得到很好的应用（IE8.0中也已经部分地支持了CSS3，dudo注），但是这些基本功能上的支持还远远不能满足开发者使用的要求。但是在某些情况下使用他们可以带来很好的超前体验，因此我认为了解一下CSS3新增选择符是如何使用还是有益处的。本文中对选择符描述主要是参考了《2005年12月15日W3C制定的选择符草稿》。草稿中讲到的新的选择符可能会在CSS的第3个版本中出现，但是也可能会出现在其他语言中。如果你是几个月前甚至是几年前读过这篇草稿，那么现在你应该再去看一下是不是已经出现了最新版本了。这里我不打算去解释CSS选择符工作的基本原理。如果你想重要复习一下的话，最好从《细说CSS2.1中的选择符》开始。首先，快速浏览一下CSS3中新增的选择符：CSS3选择符语法概览：选择符类型表达式描述子串匹配的属性选择符E[att^=val]匹配具有att属性、且值以val开头的E元素子串匹配的属性选择符E[att$=val]匹配具有att属性、且值以val结尾的E元素子串匹配的属性选择符E[att*=val]匹配具有att属性、且值中含有val的E元素结构性伪类E:root匹配文档的根元素。在HTML中，根元素永远是HTML结构性伪类E:nth-child(n)匹配父元素中的第n个子元素E结构性伪类E:nth-last-child(n)匹配父元素中的倒数第n个结构子元素E结构性伪类E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E结构性伪类E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E结构性伪类E:last-child匹配父元素中最后一个E元素结构性伪类E:first-of-type匹配同级兄弟元素中的第一个E元素结构性伪类E:only-child匹配属于父元素中唯一子元素的E结构性伪类E:only-of-type匹配属于同类型中唯一兄弟元素的E结构性伪类E:empty匹配没有任何子元素（包括text节点）的元素E目标伪类E:target匹配相关URL指向的E元素UI元素状态伪类E:enabled匹配所有用户界面（form表单）中处于可用状态的E元素UI元素状态伪类E:disabled匹配所有用户界面（form表单）中处于不可用状态的E元素UI元素状态伪类E:checked匹配所有用户界面（form表单）中处于选中状态的元素EUI元素状