HTML5+CSS3技术培训解答.ppt

CSS3-样式 边框背景 border-image: url(border.png) 27 27 27 27 round round; 渐变 background: -moz-linear-gradient(20%, center, 30%, center, from(blue), to(yellow)) no-repeat; 背景 background-size: 100px 50px; background-origin: content-box|border-box|padding-box; background-clip: border-box|padding-box CSS3-样式 透明 opacity: 0.5; RGBA color: rgba(0, 255, 0, 0.5); HSL/A color: hsl(240, 50%, 50%); hsla(240, 50%, 50%, 0.5) 调整元素尺寸 resize: both|horizontal|vertical CSS3-布局 盒模型 box-sizing: content-box|border-box; 网格模型 column-count: 3; column-width: 13em; column-gap: 1em; column-rule: 1px solid black; CSS Table Display #content{display: table;}#main{display: table-cell; width:620px; padding-right: 22px;}#side{display: table-cell; width: 300px;} Outline outline-offset CSS3-动画 变换 transform: rotate(30deg); transform: scale(0.5, 2.0); transform: skew(-30deg); transform: translate(30px, 0); 过渡 transition: all 1s ease-out ; 动画 animation: greenPulse infinite ease-in-out 3s; CSS3-其它 媒体查询 .entry{color: red;}@media all and {min-width: 100em}{ .entry{color: black;}} 语音支持 voice-volume, voice-balance, voice-family 浏览器前缀 Firefox: -moz-box-shadow Safari: -webkit-box-shadow Opera: -o-box-shadow IE: -ms-box-shadow CSS3应用原则 优雅降级 对于不支持CSS3的浏览器可以使用Javascript来实现 如ie7.js, ie8.js对CSS选择符的优化 如对于不支持:hover的ie6使用JS 在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术 参考资源 /html5/index.asp /wiki/HTML_5 /html5/ /html5/spec/Overview.html / /TR/html5-diff/ /articles/previewofhtml5 /cn/DOM/Storage /TR/css3-roadmap/ /html5/ /csswg/ /modules/ Thanks! HTML5和CSS3 浏览器兼容性 网站标准的简单历史 XHTML 1 Content CSS2.1 Presentation 2001-2006 网站标准的简单历史 WHATWG? Web Hypertext Application Technology Working Group W3C Word Wide Web Consortium 2004-Present 网站标准的简单历史 HTML5 Content CSS3 Presentation 2007-Present HTML5 HTML5 DEMO HTML发展历史 1998 2000 2002 2004 2007 HTML4.0 XHTML1 XHTML2 WHATG HTML5 HTML5技术概览 HTML5新增和移除的元素 HTML5基本布局 HTML5对表单的支持 HTML5 DOM变化 HTML5的Javascript APIs Canvas Video/Audio DragDrop Geolocation Application Cache Database Storage X-D