這篇文章主要介紹了關於HTML5 CSS3應用詳解，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
現在，HTML5和CSS3正躍躍欲試的等待大家，下面讓我們來看看他們是否真的能讓我們的設計提升到下一個高度吧
Web設計師可以使用HTML4和CSS2.1完成一些很酷的東西。我們可以在不使用陳舊的基於table佈局的基礎上完成文件邏輯結構並創建內容豐富的網站。我們可以在不使用內聯和
標籤的基礎上對網站添加漂亮而細膩的風格樣式。事實上，我們目前的設計能力已經讓我們遠離了那個可怕的瀏覽器戰爭時代、專有協議和那些充滿閃爍、滾動和閃爍的醜陋網頁。
雖然我們現在已經普遍使用了HTML4和 CSS2.1，但我們可以做得更好！我們可以重組我們程式碼的結構並能讓我們的頁面程式碼更富有語意化特性。我們可以縮減帶給頁面美麗外觀樣式代碼量並讓他們有更高的可擴展性。現在，HTML5和CSS3正躍躍欲試的等待大家，下面讓我們來看看他們是否真的能讓我們的設計提升到下一個高度吧…
曾經，設計師們經常會跟頻繁使用基於table的沒有任何語意的佈局。不過最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設計師們慢慢的接受了相對更語義化的
佈局替代了table佈局，並且開始調用外部樣式表。但不幸的是，複雜的網頁設計需要大量不同的標籤結構代碼，我們把它叫做“
-soup” 綜合症。也許你很熟悉下面的程式碼:
#複製程式碼
##程式碼如下：
<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>-soup” 綜合症並帶給我們一套新的結構化元素。這些新的HTML5元素富有更細緻的語義從而代替了那些毫無語義的
標籤，並同時為CSS的調用提供了」自然」的CSS鉤子。
下面是HTML5的解決方案實例:#複製程式碼##程式碼如下：
<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可以讓我們用許多更語意化的結構化程式碼標籤來取代那些大量的無意義的
標籤。這種語意化的特性不僅提升了我們網頁的品質和語意，並且大量減少了曾經程式碼中用於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 {}##程式碼如下： 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代码，所以我们假定在
元素下有个
