HTML & CSS » HTML5和CSS3进阶教程

HTML5和CSS3进阶教程

发表于: HTML & CSS. 评论
Sponsor

虽然HTML5和CSS3还不完美，本文帮你了解这两种语言以及自己的网站。

HTML5

HTML5是HTML或Hypertext Markup语言的最新版本。目前只有少数浏览器支持该语言，但是明年这一情况将得到改善。估计到2014年，该语言才能比较完整，不过现在可用的 HTML5特殊性能也是了解HTML5的好方式，你还可以向网站添加一些很酷的要素。

Steve Jobs拒绝在iOS上运行Flash，因为后者bug太多，所以那些想要开发应用和和支持iOS系统的网站的人有必要学会如何使用HTML5的功能。随 着谷歌推出支持HTML5的Youtube版本, 许多程序员都看到了该系统在未来的重要性。不过，由于Firefox还不完全支持HTML5，程序员们在网站部署新功能的时候，不得不有所顾虑。

HTML5所隐藏的概念在于它不是一个很大的实体，而是由较小的部分组成的用来创造新事物的技术。每个浏览器都可以支持HTML5的各种特殊性能，这样一来，HTML5对那些希望通过编写代码搞清楚所需特殊性能以及不同浏览器所支持性能的人而言就十分重要。

HTML5得益于HTML4的广为流传。这意味着，程序员不需要舍弃已有的markup，而只需要在原有基础上进行丰富和改善即可。例如，表单可以 更新为支持新功能，如使用移动设备的人可以使用更佳的邮件输入方式。尽管如此，使用IE6的人会将其归类为文本的范畴，而且仍旧能够使用。

下面是HTML5的使用范例：

特色

1.任何HTML5句法都需要指定一个doctype，以便浏览器可以用标准模式显示页面。好的一方面是doctype已经从以前的HTML中得到简化。现在仅仅是： <!DOCTYPE html>

2.HTML5对音效和图像的支持功能卓越。只要它能完整运行，而且所有浏览器都支持HTML5，你就可以轻松地向页面添加音频或视频，而不需要额外的插件。

3.HTML5简化了网页内容的编辑操作。使用内容编辑的属性，就可以对任意要素添加 contenteditable=”true” 轻松更改页面文本。

4.画板要素可以让你不通过Photoshop就能制作二维图形，然后以自己的代码直接放置图形。

5.应用缓冲可以在离线状态下导航Web应用。

使用的原因

1.由于部署的WebSockets，所以HTML5比以往的版本加载更快。

2.如果页面使用HTML5，那么手机应用的接入会更顺利，因为你不需要再为某个手机品牌编写特定的应用，只需创建一个所有手机通用的应用即可。

3.可以更灵活地创建自己的应用。

4.视频，音频和图像的编写更简单，不再需要第三方软件。

5.这一语言处于成长期，因此，只会发展出更多，更新，更好和更快的性能，这些性能会让以前的网站看起来很老套。

6.HTML5建立在HTML4之上，因此开发新功能的时候，可以保留旧的markup。

7.HTML5和CSS3结合使用，可靠性更强。

CSS3

层叠样式表为网页内容的显示提供了更多灵活性。其实，它也就是让页面看起来更漂亮。虽然浏览器还不支持CSS3，但这并不阻碍它的流行趋势，因为比起Javascript插件或其他创建精准图像的手段来说，它可以大大简化我们的操作。

使用CSS存在一个缺点，即我们必须安装过滤器来更改不同浏览器所显示的屏幕内容。尽管IE有很多bug，但是Firefox或Chrome仍然以 错误的方式解读CSS。这样一来，一些Web设计师就创建了不同的CSS代码发往不同浏览器，或者使用过滤器完全取消CSS传输。

CSS3为网站显示提供了很多改进。虽然这些功能不一定是网站必需的，但是用户越来越期待网站看上去更炫，操作起来更顺畅。CSS3简化了设计操作。

有些性能，如菜单，就是几乎是所有浏览器中都必需的。但是有了CSS3，功能和美学的呼声就以指数方式上扬。子菜单，水平菜单，带标签的子菜单，带描述的子菜单等等不仅可用还配备有优化工具。用户会欣喜地看到自己不用花费大量加载时间就可以看到页面了。

炫丽的功能

盒子阴影–这一功能可用让主要的内容滑往另一区域，如页脚，或使这一区域看上去更像是渗透到页面中。程序员使用CSS3的话就不需要创建新的图像或是使用javascript插件。另一个技巧是鼠标停留就可使阴影出现。

文本阴影–听起来更像是在HTML文本要素下方提供一个下拉阴影。

h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

添加字体更简单–要想添加新的字体，只需向服务器简单加载文件，链接CSS文件，创建新的字体群即可。

多底色–将多个底色覆盖到页面成为可能：

body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}

边框图像–CSS3可用来向边框上传图像，这样就避免了呆板的边框。

不透明级别–以前，你必须要创建一个新图像或者使用CSS过滤器。现在你可以自由设置不透明的级别。

RGBA色调–不再受限于十六进制的色彩，你可以选择红，绿和蓝的用量以及设置其透明度，而且不需要使用对浏览器进行任何扩展。

转变–这一代码可以自由选择所需区域大小作为鼠标停留反应区。

圆形边角–这一功能可算是噱头，但是你可以在不使用图像的情况下磨圆棱角。

div {
border: 2px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 500px;
}

注意：Moz表示Mozilla，而Webkit代表Safari和Chrome。

大小重置–这一代码在Safari中有效，可以提供一个小小的重置框，让用户重置大小。

div {
resize: both;
}

原文链接：http://webdesignledger.com/tips/html5-css3-take-your-design-to-another-level

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 、 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

{ 发表评论 }