HTML5 CSS3应用详解

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

Web设计师可以使用网页hTML4和CSS2.1完成一些很酷的东西。咱们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创见内容丰富的网站。咱们可以在不使用内联<font>和<br>网页文章标签的基础上对网站添加漂亮而细腻的风格样式。事实上，咱们目前的设计能力已经让咱们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。

虽然咱们现在已经普遍使用了网页hTML4和 CSS2.1，但是咱们还可以做得更好！咱们可以重组咱们具体代码的结构并能让咱们的页面具体代码更富有语义化特性。咱们可以缩减带给页面美丽外观样式具体代码量并让他们有更高的可扩展性。现在，网页hTML5教程和CSS3正跃跃欲试的等待大家，下面让咱们来看看他们是否真的能让咱们的设计提升到下一个高度吧…

曾经，设计师们经常会跟频繁使用基于table的没有任何语义的布局。不过最终还是要感谢像Jeffrey Zeldman和Eric Meyer这样的思想革新者，聪明的设计师们慢慢的接受了相对更语义化的<div>布局替代了table布局，并且开始相关调用外部样式表。但不幸的是，复杂的网页设计需要大量不同的网页文章标签结构具体代码，咱们把它叫做“<div>-soup” 综合症。也许您很熟悉下面的具体代码: <div 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对一个复杂的设计进行具体代码化后依然过于臃肿(其实x网页hTML1.1也不过如此)。不过值得激动的是，网页hTML5教程解决“<div>-soup” 综合症并带给咱们一套新的结构化网页元素。这些新的网页hTML5教程网页元素富有更细致的语义从而代替了那些毫无语义的<div>网页文章标签，并同时为CSS的相关调用提供了”自然”的CSS钩子。

下面是网页hTML5教程的解决方案具体相关: <section>

复制具体代码具体代码如下:
<section>
<article>
<header>
<h1>Div 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教程可以让咱们用很多更语义化的结构化具体代码网页文章标签代替那些大量的无意义的<div>网页文章标签。这种语义化的特性不仅提升了咱们网页的质量和语义，并且大量减少了曾经具体代码中用于CSS必须相关调用的class和id属性。事实上，CSS3也是可以然通过咱们忽略掉所有class和id 的。

跟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 {}

这是个进步，但仍有一些问题需要解决。在<div>具体相关中，咱们需要通过class或id属性来相关调用页面中的网页元素。这种逻辑将允许咱们将样式应用到文档中的任何一个网页元素上，无论是整体还是个体。例如在<div>具体相关中，.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前端更上一个台阶。（文/鬼武者）