HTML5+CSS3,HTML5 css

　　网页设计师可以使用HTML4和CSS2.1来完成一些很酷的事情。我们可以完成文档的逻辑结构，创建内容丰富的网站，而不用使用旧的基于表格的布局。我们可以在不使用内嵌字体和br标签的情况下，为网站添加漂亮精致的风格。事实上，我们现在的设计能力已经让我们远离了那个可怕的浏览器战争时代，专有协议和那些充斥着闪烁、滚动、闪烁的丑陋网页。

　　虽然我们现在已经广泛使用HTML4和CSS2.1，但是我们还可以做得更好！我们可以重新组织代码的结构，使页面代码更具语义性。我们可以减少给页面带来漂亮外观的代码量，使它们更具可扩展性。现在，HTML5和CSS3已经迫不及待的等着大家了。让我们看看他们是否真的能把我们的设计提升到一个新的水平…

　　过去，设计师经常频繁地使用没有任何语义的基于表格的布局。然而最终，多亏了像Jeffrey Zeldman和Eric Meyer这样的创新者，聪明的设计师慢慢接受了相对更有语义的div布局，而不是表格布局，并开始调用外部样式表。不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们称之为“div-soup”综合症。也许你对下面的代码很熟悉：div id=news

　　复制代码如下：

　　div class=section

　　div class=" article "

　　div class=header

　　h1Div汤演示/h1

　　反对于2009年7月11日/p

　　/div

　　div class=内容

　　pLorem ipsum文本等等等等。/p

　　/div

　　div class=页脚

　　pTags: HMTL，代码，演示/p

　　/div

　　div class=闪开

　　div class=header

　　h1切线信息/h1

　　/div

　　div class=内容

　　pLorem ipsum文本等等等等。/p

　　/div

　　div class=页脚

　　pTags: HMTL，代码，演示/p

　　/div

　　虽然这有些勉强，但上面的例子还是能说明用HTML4编码一个复杂的设计还是太臃肿了(其实xHTML1.1也不过如此)。然而，令人兴奋的是，HTML5解决了“div-soup”综合症，并为我们带来了一组新的结构元素。这些新的HTML5元素富含更详细的语义，从而取代了那些没有语义的div标签，同时为CSS调用提供了“自然的”CSS钩子。

　　以下是HTML5解决方案的示例：部分

　　复制代码如下：

　　部分

　　文章

　　页眉

　　h1Div汤演示/h1

　　反对于2009年7月11日/p

　　/页眉

　　部分

　　pLorem ipsum文本等等等等。/p

　　/部分

　　页脚

　　pTags: HMTL，代码，演示/p

　　/页脚

　　/文章

　　在旁边

　　页眉

　　h1切线信息/h1

　　/页眉

　　部分

　　pLorem ipsum文本等等等等。/p

　　/部分

　　页脚

　　pTags: HMTL，代码，演示/p

　　/页脚

　　/抛开

　　/部分

　　正如我们所看到的，HTML5允许我们用许多更具语义结构的代码标签来替换大量无意义的div标签。这个语义特性不仅提高了我们网页的质量和语义，还大大减少了代码中用于调用CSS的class和id属性。实际上，CSS3可以通过我们忽略所有类和id。

　　跟class属性说再见，欢迎整洁的标签

　　与带有新语义标记的HTML5相结合，CSS3为网页设计者的网页提供了神力。有了HTML5的能量，我们将获得对文档代码更多的控制权，有了CSS3的能量，我们的控制权将趋于无穷大！

　　即使没有那些高级的CSS选择器，我们仍然可以通过强大的HTML5调用不同的容器，而不用费心处理诸如class和id之类的属性。像前面的DIV布局一样，我们可以在css中这样调用它：div#news {}

　　复制代码如下：

　　分区{}

　　div.article {}

　　div.header {}

　　div.content {}

　　div.footer {}

　　div.aside { }

　　让我们再来看看基于HTML5的例子：section {}

　　复制代码如下：

　　文章{}

　　标题{}

　　页脚{}

　　旁白{}

　　这是进步，但仍有一些问题需要解决。在div实例中，我们需要通过class或id属性调用页面中的元素。这种逻辑允许我们将样式应用于文档中的任何元素，无论是整体还是个体。例如，在div实例中。部分和。内容元素很容易定位。但是，在HTML5实例中，实际的文档中会有许多section元素。实际上，我们可以添加一些特定的属性选择器来调用那些不同的section元素，但谢天谢地，我现在不能使用一些高级的CSS选择器来定位不同的section元素。

　　查找没有类和id的HTML-5元素

　　让我们看看如何在不使用类和id的情况下定位HTML5页面元素的实例。我们可以使用三个CSS选择器来定位和识别实例中的元素。如下所示：

　　选择器：[CSS 2.1]: EF

　　兄弟选择器：[CSS 2.1]: E F

　　子选择器：[CSS 2.1]: E F

　　让我们看看如何在不使用类和id的情况下在文档中定位那些节元素：

　　找到最外面的截面元素。

　　考虑到我们的例子不是一套完整的HTML5代码，我们假设body元素下有一个nav元素，section元素是兄弟元素。这样，我们可以像下面的代码一样定位最外层。

　　部分：

　　复制代码如下：

　　正文导航部分{}

　　定位下一个节元素

　　作为最外面的section元素下的唯一直接子集元素，该section元素可以如下定位：

　　复制代码如下：

　　sectionsection {}

　　定位article元素

　　有许多方法可以定位文章元素，但最简单的方法当然是后代选择器：

　　复制代码如下：

　　第节第节文章{}

　　定位页眉、节和页脚元素

　　这三个元素出现在了两个地方，一个在文章元素，一个在旁注元素。这种差异使我们能够轻松定位每个元素。

　　复制代码如下：

　　文章标题{}

　　文章部分{}

　　文章页脚{}

　　或者一起定义：

　　复制代码如下：

　　章节章节标题{}

　　第节第节{}

　　章节章节页脚{}

　　到目前为止，我们已经使用CSS2.1选择器排除了所有的类和id。那么为什么我们还需要使用CSS3呢？我很高兴你问了…

　　使用CSS3的HTML5元素的高级定位

　　虽然我们已经使用了CSS2.1选择器来排除所有的类和id，但显然还会有很多更复杂的情况需要CSS3的高级选择器来解决。让我们通过完成下面的例子来学习如何使用CSS3定位页面元素，而不使用无用的class和id属性。

　　使用一个唯一的日志 (post)ID定位所有日志

　　Wordpress为我们提供了一种包含ID的每个日志的源代码输出。这种信息通常用于导航和/或理解材料，但是CSS3可以使用这些唯一的id来定义这些日志的样式。当然，你也可以像往常一样给每个日志添加属性class="post "，但这与我们练习的意图相冲突(再加上一点乐趣都没有)。使用“子串匹配选择器”，我们可以定位所有日志及其不同的元素，如下所示。

　　复制代码如下：

　　Article[id*=post-] {} /*查找所有日志*/

　　Article[id*=post-] header h1 {} /*在所有日志中定位h1标签*/

　　Article[id*=post-] section p {} /*在所有日志中定位p标签*/

　　我们仍然可以用同样的方法定位注释的元素及其子元素。

　　复制代码如下：

　　Article[id*=comment-] {} /*查找所有评论*/

　　article[id *=comment-]header h1 { }/*在所有评论中查找h1标签*/

　　article[id *=comment-]section p { }/*在所有评论中找到p标记*/

　　定位一些指定的区域(section)或文章(article)

　　很多博客都有大量的日志和评论，HTML 5会把它们由section或者article元素组成。为了定位指定的部分或文章元素，我们必须使用强大的“:n-child”选择器：

　　复制代码如下：

　　section:n-child(1){ }/*选择第一节*/

　　article:n-child(1){ }/*选择第一篇文章*/

　　section:n-child(2){ }/*选择第二节*/

　　article:n-child(2){ }/*选择第二篇文章*/

　　类似地，我们可以使用“:n-last-child”选择器以相反的顺序定位一些元素。

　　复制代码如下：

　　section:n-last-child(1){ }/*选择最后一节*/

　　article:n-last-child(1){ }/*选择最后一篇文章*/PP section:n-last-child(2){ }/*选择倒数第二节*/

　　article:n-last-child(2){ }/*选择倒数第二篇文章*/

　　以更多方式选择指定元素。

　　在HTML5中选择指定元素的另一种方法是利用“:only-of-type”选择器。因为这些HTML5元素通常在许多地方出现不止一次，所以当我们想要定位在父元素下只出现一次的标签时，这种方法很方便。比如我们要选择的是某个元素中的唯一元素，比如下面的代码：

　　复制代码如下：

　　部分

　　部分/部分

　　部分

　　区段定位此区段元素/区段。

　　/部分

　　部分

　　区段定位此区段元素/区段。

　　/部分

　　部分

　　区段找不到此区段元素/区段。

　　并且该部分元素/部分

　　/部分

　　部分/部分

　　/部分

　　我们可以只使用下面的一行选择器：

　　复制代码如下：

　　sectionsection:仅类型{}的

　　同样，您可以固执地将ID属性添加到每个元素中，但您将失去代码的可扩展性、可维护性和绝对简单性，这将结构与性能分离开来。CSS3真的可以让我们快速方便的定位几乎所有没有ID和class属性的页面元素。

　　摘要

　　相信随着时间的推进和更多浏览器的支持，HTML5和CSS3会越来越普及。他们会给网页设计师带来更多无穷的能量，让我们的网页前端更上一层楼。(文/幽灵战士)

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读