HTML5 CSS3简要教程

阅读更多
HTML5 CSS3简要教程

虽然我们现在已经普遍使用了HTML4和CSS2.1,但是我们还可以做得更好!我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们 可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在,HTML5和CSS3正跃跃欲试的等待大家,下面就跟兄弟连HTML5培训来看看他们是否真的能让我们 的设计提升到下一个高度吧…


说再见,欢迎语义化标签

曾经,设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者,聪明的设计师们慢慢的接受了相对更语义化的
布局替代了table布局,并且开始调用外部样式表。但不 幸的是,复杂的网页设计需要大量不同的标签结构代码,我们把它叫做“
-soup” 综合症。也许你很熟悉下面的代码:





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.




Tags: HMTL, code, demo






Tangential Information




Lorem ipsum text blah blah blah.


Lorem ipsum text blah blah blah.


Lorem ipsum text blah blah blah.




Tags: HMTL, code, demo





< /div>


尽管这有些勉强,但上面这个实例还是可以说明使用HTML4对一个复杂的设计进行代码化后依然过于臃肿(其实xHTML1.1也不过如此)。不过值 得激动的是,HTML5解决“
-soup” 综合症并带给我们一套新的结构化元素。这些新的HTML5元素富有更细致的语义从而代替了那些毫无语义的
标签,并同时为CSS的调 用提供了”自然”的CSS钩子。下面是兄弟连(www.lampbrother.net)HTML5课程的解决方案实例:






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.




Tags: HMTL, code, demo






< /section>


正如我们所见,HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的
标签。这种语义化的特性不仅提升 了我们网页的质量和语义,并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上,CSS3也是可以然通过我们忽略掉所有 class和id的。


正如我们所见,HTML5可以让我们用很多更语义化的结构化代码标签代替那些大量的无意义的
标签。这种语义化的特性不仅提升了我们网页的质量和语义,并且大量减少了曾经代码中用于CSS必须调用的class和id属性。事实上,CSS3也是可以然通过我们忽略掉所有 class和id的。


结合了富有新的语义化标记的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属性来调用页面中的元素。这种逻辑将允许我们 将样式应用到文档中的任何一个元素上,无论是整体还是个体。例如在
实例中,.section 和 .content元素很容易定位。但是在HTML5实例中,实际文档中会有很多个section元素。其实我们可以添加一些特定的属性选择器来调用那些不 同的section元素,不过谢天谢地,我没现在可以用少量的高级CSS选择器来定位不同的section元素。

不使用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代码,所以我们假定在元素下有个

你可能感兴趣的:(HTML5)