HTML5+CSS3应用详解
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联和
标签的基础上对网站添加漂亮而细腻的风格样式。事实上，我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。
虽然我们现在已经普遍使用了HTML4和 CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在，HTML5和CSS3正跃跃欲试的等待大家，下面让我们来看看他们是否真的能让我们的设计提升到下一个高度吧…
曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的
复制代码代码如下:
Div Soup Demonstration
Posted on July 11th, 2009
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
Tangential Information
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
Lorem ipsum text blah blah blah.
尽管这有些勉强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值得激动的是，HTML5解决“
下面是 HTML5的解决方案实例:
Posted on July 11th, 2009 Lorem ipsum text blah blah blah. Lorem ipsum text blah blah blah. Lorem ipsum text blah blah blah.
复制代码代码如下:
Div Soup Demonstration
正如我们所见，HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的
跟class属性说再见，欢迎整洁的标签
结合了富有新的语义化标记的HTML5，CSS3为web设计师们的网页提供了神一般的力量。有了HTML5的能量，我们将得到更多的对文档代码的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！
即使没有那些高级的CSS选择器，我们仍然可以通过强大的HTML5条调用不同的容器而不劳驾class和id这类属性。像以往的DIV布局，我们在css中可能要这样调用: div#news {}
复制代码代码如下:
div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {}
我们再来看看基于HTML5的实例: section {}
复制代码代码如下:
article {}
header {}
footer {}
aside {}
这是个进步，但仍有一些问题需要解决。在
不使用class和id定位HTML-5元素
下面让我们来看看如何在不使用class和id的情况下定位HTML5页面元素的一个实例，我们可以使用三种CSS选择器来定位和辨别实例中的元素。如下:
后代选择器:[CSS 2.1]: EF
兄弟选择器:[CSS 2.1]: E + F
子元素选择器:[CSS 2.1]: E > F
下面让我们来看看如何不使用class和id而完成对文档中的那些section元素的定位吧:
定位最外层的
考虑到我们的例子并不是一套完整的HTML5代码，所以我们假定在
元素下有个版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/html5/75721.html
相关文章
| 留言与评论（共有 0 条评论） |
