HTML5+CSS3利用详解
此刻，HTML5和CSS3正捋臂将拳的等候大家，下面让我们来看看他们可否真的能让我们的设计晋升到下一个高度吧
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table规划的根基上完成文档逻辑构造并创立内容丰硕的网站。我们可以在不使用内联<font>和<br>标签的根基上对网站增加美丽而细腻的风格样式。事实上，我们当前的设计能力已经让我们远离了阿谁可怕的阅读器战争时代、专有和谈和那些充满闪动、滚动和闪耀的丑陋网页。
虽然我们此刻已经遍及使用了HTML4和 CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的构造并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面艳丽外不雅样式代码量并让他们有更高的可扩展性。此刻，HTML5和CSS3正捋臂将拳的等候大家，下面让我们来看看他们可否真的能让我们的设计晋升到下一个高度吧…
曾经，设计师们经常会跟频繁使用基于table的没有任何语义的规划。不外终究还是要感激像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪慧的设计师们渐渐的接受了相对更语义化的<p>规划替换了table规划，并且开端调取外部样式表。但不幸的是，复杂的网页设计需要大量不一样的标签构造代码，我们把它叫做“<p>-soup” 综合症。或许你很熟知下面的代码: <p id="news">
复制代码
代码如下:
<div class="section">
<div class="article">
<div class="header">
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
<div class="aside">
<div class="header">
<h1>Tangential Information</h1>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
</div>
</div>尽管这有些牵强，但上面这个实例还是可以说明使用HTML4对一个复杂的设计停止代码化后仍然过于臃肿(其实xHTML1.1也不外如此)。不外值得冲动的是，HTML5解决“<p>-soup” 综合症并带给我们一套新的构造化元素。这些新的HTML5元素富有更详细的语义从而代替了那些毫无语义的<p>标签，并同时为CSS的调取供给了”天然”的CSS钩子。
下面是 HTML5的解决方案实例: <section>
复制代码
代码如下:
<section>
<article>
<header>
<h1>p Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</header>
<section>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>
<footer>
<p>Tags: HMTL, code, demo</p>
</footer>
</article>
<aside>
<header>
<h1>Tangential Information</h1>
</header>
<section>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>
<footer>
<p>Tags: HMTL, code, demo</p>
</footer>
</aside>
</section>
</section>正如我们所见，HTML5可以让我们用许多更语义化的构造化代码标签代替那些大量的无意义的<p>标签。这种语义化的特性不仅晋升了我们网页的质量和语义，并且大量减少了曾经代码中用于CSS必需调取的class和id属性。事实上，CSS3也是可以然通过我们忽略掉所有class和id 的。
跟class属性说再见，欢迎整洁的标签
结合了富有新的语义化标志的HTML5，CSS3为web设计师们的网页供给了神一样的力量。有了HTML5的能量，我们将得到更多的对文档代码的操纵权，有了CSS3的能量，我们的操纵权将趋于无限大！
即便没有那些高级的CSS选中器，我们依然可以通过强大的HTML5条调取不一样的容器而不劳驾class和id这类属性。像以往的p规划，我们在css中大概要这样调取: p#news {}
复制代码
代码如下:
div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {}我们再来看看基于HTML5的实例: section {}
复制代码
代码如下:
article {}
header {}
footer {}
aside {}这是个进步，但仍有一些问题需要解决。在<p>实例中，我们需要通过class或id属性来调取页面中的元素。这种逻辑将同意我们将样式利用到文档中的任何一个元素上，不管是团体还是个体。例如在<p>实例中，.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元素的定位吧:
定位最外层的<section>元素
思考到我们的例子并不是一套完全的HTML5代码，所以我们假定在<body>元素下有个<nav>元素与<section>元素是兄弟元素。这样的话，我们就可以向下面代码那样定位最外层的
<section>了:
复制代码
代码如下:
body nav+section {}定位下一个<section>元素
作为最外层<section>元素下的独一直属子集元素，这个<section>元素或许可以这样定位:
复制代码
代码如下:
section>section {}定位<article>元素
可以定位<article>元素的办法有许多，不外最简便的办法当然就是后代选中器了:
复制代码
代码如下:
section section article {}定位<header>、<section> 和<footer>元素
这三个元素离别在两个地方都显现过，一是在<article>元素中显现，另一是在<aside>元素中显现。这种差异能让我们轻松定位每个元素。
复制代码
代码如下:
article header {}
article section {}
article footer {}或者一起定义:
复制代码
代码如下:
section section header {}
section section section {}
section section footer {}到当前为止，我们已经使用CSS2.1选中器排除掉了所有的class和id。那么我们为什么还需要使用CSS3 呢？我很快乐你能这么问…
使用CSS3对HTML5元素停止高级定位
虽然我们已经使用CSS2.1选中器排除掉了所有的class和id，明显还会有许多更复杂的状况需要CSS3的高级选中器来解决。让我们通过完成一下的实例来理解一下怎样在不使用无用的class和id属性的状况下利用CSS3定位页面元素。
使用一个独一的日志 (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>元素组成。为了定位哪些指定的<section> 或<article>元素，我们就要转而使用强大的“:nth-child”选中器了:
复制代码
代码如下:
section:nth-child(1) {} /* 选中第一个 <section> */
article:nth-child(1) {} /* 选中第一个 <article> */
section:nth-child(2) {} /* 选中第二个 <section> */
article:nth-child(2) {} /* 选中第二个 <article> */一样，我们可以使用“:nth-last-child”选中器定位反序的一些元素。
复制代码
代码如下:
section:nth-last-child(1) {} /* 选中最后一个 <section> */
article:nth-last-child(1) {} /* 选中最后一个 <article> */ </p><p>section:nth-last-child(2) {} /* 选中倒数第二个 <section> */
article:nth-last-child(2) {} /* 选中倒数第二个 <article> */使用更多的方式选中指定元素
另一种选中HTML5中指定元素(如 header、section和footer)的办法就是利用”:only-of-type”选中器的优势。由于这些HTML5元素平常会在许多地方显现不止一次，所以当我们想定位那种在父元素下仅显现过一次的标签时这种办法很利便。例如，我们要选中的是在某元素中有切仅有的独一一个元素，如以下代码:
复制代码
代码如下:
<section>
<section></section>
<section>
<section>定位这个section元素</section>
</section>
<section>
<section>定位这个section元素</section>
</section>
<section>
<section>但不定位这个section元素</section>
<section>和这个section元素</section>
</section>
<section></section>
</section>我们可以仅使用以下一行选中器:
复制代码
代码如下:
section>section:only-of-type {}再次唠叨，你可以顽固的为每个元素增加ID属性，但你会失去代码的可扩展性、保护性和绝对简约的构造与展现相别离。 CSS3确实能让我们可快速更利便的定位几乎所有没有ID和class属性的页面元素。
总结
我信赖随着时间的推动和更多阅读器的支撑，HTML5和CSS3将越来越受欢迎，它们将为web设计师们带来更无限的能量，让我们的web前端更上一个台阶。
相关引荐：
关于HTML5+CSS3新增内容的总结
以上就是HTML5+CSS3利用详解的具体内容，更多请关注百分百源码网其它相关文章！
