主頁(yè) > 知識(shí)庫(kù) > HTML5+CSS3應(yīng)用詳解

HTML5+CSS3應(yīng)用詳解

Web設(shè)計(jì)師可以使用HTML4和CSS2.1完成一些很酷的東西。我們可以在不使用陳舊的基于table布局的基礎(chǔ)上完成文檔邏輯結(jié)構(gòu)并創(chuàng)建內(nèi)容豐富的網(wǎng)站。我們可以在不使用內(nèi)聯(lián)<font>和<br>標(biāo)簽的基礎(chǔ)上對(duì)網(wǎng)站添加漂亮而細(xì)膩的風(fēng)格樣式。事實(shí)上，我們目前的設(shè)計(jì)能力已經(jīng)讓我們遠(yuǎn)離了那個(gè)可怕的瀏覽器戰(zhàn)爭(zhēng)時(shí)代、專(zhuān)有協(xié)議和那些充滿(mǎn)閃動(dòng)、滾動(dòng)和閃爍的丑陋網(wǎng)頁(yè)。

雖然我們現(xiàn)在已經(jīng)普遍使用了HTML4和 CSS2.1，但是我們還可以做得更好！我們可以重組我們代碼的結(jié)構(gòu)并能讓我們的頁(yè)面代碼更富有語(yǔ)義化特性。我們可以縮減帶給頁(yè)面美麗外觀樣式代碼量并讓他們有更高的可擴(kuò)展性?，F(xiàn)在，HTML5和CSS3正躍躍欲試的等待大家，下面讓我們來(lái)看看他們是否真的能讓我們的設(shè)計(jì)提升到下一個(gè)高度吧…

曾經(jīng)，設(shè)計(jì)師們經(jīng)常會(huì)跟頻繁使用基于table的沒(méi)有任何語(yǔ)義的布局。不過(guò)最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設(shè)計(jì)師們慢慢的接受了相對(duì)更語(yǔ)義化的<div>布局替代了table布局，并且開(kāi)始調(diào)用外部樣式表。但不幸的是，復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)需要大量不同的標(biāo)簽結(jié)構(gòu)代碼，我們把它叫做“<div>-soup” 綜合癥。也許你很熟悉下面的代碼: <div id="news">

復(fù)制代碼

代碼如下:

<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>

盡管這有些勉強(qiáng)，但上面這個(gè)實(shí)例還是可以說(shuō)明使用HTML4對(duì)一個(gè)復(fù)雜的設(shè)計(jì)進(jìn)行代碼化后依然過(guò)于臃腫(其實(shí)xHTML1.1也不過(guò)如此)。不過(guò)值得激動(dòng)的是，HTML5解決“<div>-soup” 綜合癥并帶給我們一套新的結(jié)構(gòu)化元素。這些新的HTML5元素富有更細(xì)致的語(yǔ)義從而代替了那些毫無(wú)語(yǔ)義的<div>標(biāo)簽，并同時(shí)為CSS的調(diào)用提供了”自然”的CSS鉤子。

下面是 HTML5的解決方案實(shí)例: <section>

復(fù)制代碼

代碼如下:

<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>

正如我們所見(jiàn)，HTML5可以讓我們用很多更語(yǔ)義化的結(jié)構(gòu)化代碼標(biāo)簽代替那些大量的無(wú)意義的<div>標(biāo)簽。這種語(yǔ)義化的特性不僅提升了我們網(wǎng)頁(yè)的質(zhì)量和語(yǔ)義，并且大量減少了曾經(jīng)代碼中用于CSS必須調(diào)用的class和id屬性。事實(shí)上，CSS3也是可以然通過(guò)我們忽略掉所有class和id 的。

跟class屬性說(shuō)再見(jiàn)，歡迎整潔的標(biāo)簽　　

結(jié)合了富有新的語(yǔ)義化標(biāo)記的HTML5，CSS3為web設(shè)計(jì)師們的網(wǎng)頁(yè)提供了神一般的力量。有了HTML5的能量，我們將得到更多的對(duì)文檔代碼的控制權(quán)，有了CSS3的能量，我們的控制權(quán)將趨于無(wú)窮大！

　　即使沒(méi)有那些高級(jí)的CSS選擇器，我們?nèi)匀豢梢酝ㄟ^(guò)強(qiáng)大的HTML5條調(diào)用不同的容器而不勞駕class和id這類(lèi)屬性。像以往的DIV布局，我們?cè)赾ss中可能要這樣調(diào)用: div#news {}

復(fù)制代碼

代碼如下:

div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

我們?cè)賮?lái)看看基于HTML5的實(shí)例: section {}

復(fù)制代碼

代碼如下:

article {}
header {}
footer {}
aside {}

這是個(gè)進(jìn)步，但仍有一些問(wèn)題需要解決。在<div>實(shí)例中，我們需要通過(guò)class或id屬性來(lái)調(diào)用頁(yè)面中的元素。這種邏輯將允許我們將樣式應(yīng)用到文檔中的任何一個(gè)元素上，無(wú)論是整體還是個(gè)體。例如在<div>實(shí)例中，.section 和 .content元素很容易定位。但是在HTML5實(shí)例中，實(shí)際文檔中會(huì)有很多個(gè)section元素。其實(shí)我們可以添加一些特定的屬性選擇器來(lái)調(diào)用那些不同的section元素，不過(guò)謝天謝地，我沒(méi)現(xiàn)在可以用少量的高級(jí)CSS選擇器來(lái)定位不同的section元素。

不使用class和id定位HTML-5元素

　　下面讓我們來(lái)看看如何在不使用class和id的情況下定位HTML5頁(yè)面元素的一個(gè)實(shí)例，我們可以使用三種CSS選擇器來(lái)定位和辨別實(shí)例中的元素。如下:

      后代選擇器:[CSS 2.1]: EF
      兄弟選擇器:[CSS 2.1]: E + F
      子元素選擇器:[CSS 2.1]: E > F

下面讓我們來(lái)看看如何不使用class和id而完成對(duì)文檔中的那些section元素的定位吧:

定位最外層的<section>元素

　　考慮到我們的例子并不是一套完整的HTML5代碼，所以我們假定在<body>元素下有個(gè)<nav>元素與<section>元素是兄弟元素。這樣的話(huà)，我們就可以向下面代碼那樣定位最外層的
<section>了:

復(fù)制代碼

代碼如下:

body nav+section {}

定位下一個(gè)<section>元素

作為最外層<section>元素下的唯一直屬子集元素，這個(gè)<section>元素也許可以這樣定位:

復(fù)制代碼

代碼如下:

section>section {}

定位<article>元素

可以定位<article>元素的方法有很多，不過(guò)最簡(jiǎn)單的方法當(dāng)然就是后代選擇器了:

復(fù)制代碼

代碼如下:

section section article {}

定位<header>、<section> 和<footer>元素

這三個(gè)元素分別在兩個(gè)地方都出現(xiàn)過(guò)，一是在<article>元素中出現(xiàn)，另一是在<aside>元素中出現(xiàn)。這種差別能讓我們輕松定位每個(gè)元素。

復(fù)制代碼

代碼如下:

article header {}
article section {}
article footer {}

或者一起定義:

復(fù)制代碼

代碼如下:

section section header {}
section section section {}
section section footer {}

到目前為止，我們已經(jīng)使用CSS2.1選擇器排除掉了所有的class和id。那么我們?yōu)槭裁催€需要使用CSS3 呢？我很高興你能這么問(wèn)…

使用CSS3對(duì)HTML5元素進(jìn)行高級(jí)定位

　　雖然我們已經(jīng)使用CSS2.1選擇器排除掉了所有的class和id，顯然還會(huì)有很多更復(fù)雜的情況需要CSS3的高級(jí)選擇器來(lái)解決。讓我們通過(guò)完成一下的實(shí)例來(lái)了解一下如何在不使用無(wú)用的class和id屬性的情況下利用CSS3定位頁(yè)面元素。

使用一個(gè)唯一的日志 (post)ID定位所有日志

　　wordpress提供給我們一種包含了ID的每篇日志的源代碼輸出。這種信息通常用于導(dǎo)航和/或了解資料的意圖，不過(guò)CSS3可以利用這些唯一的ID來(lái)定義這些日志的樣式。當(dāng)然，你還可以像往常那樣為每篇日志添加class=”post”這樣的屬性，但這就與我們練習(xí)的意圖相沖突了(再加上它沒(méi)有一點(diǎn)樂(lè)趣所在)。使用”子字符串匹配選擇器”，我們就可以像下面這樣定位所有日志和它們的不同元素了。

復(fù)制代碼

代碼如下:

article[id*=post-] {} /* 定位所有日志 */
article[id*=post-] header h1 {} /* 定位所有日志中的h1標(biāo)簽 */
article[id*=post-] section p {} /* 定位所有日志中的p標(biāo)簽 */

我們?nèi)匀豢梢允褂猛瑯拥姆绞蕉ㄎ辉u(píng)論的元素和它們的子元素。

復(fù)制代碼

代碼如下:

article[id*=comment-] {} /* 定位所有評(píng)論 */
article[id*=comment-] header h1 {} /* 定位所有評(píng)論中的h1標(biāo)簽 */
article[id*=comment-] section p {} /* 定位所有評(píng)論中的p標(biāo)簽 */

定位一些指定的區(qū)域(section)或文章(article)

　　有很多博客的日志量和評(píng)論量都相當(dāng)大，HTML 5 會(huì)將它們由<section>或<article>元素組成。為了定位哪些指定的<section> 或<article>元素，我們就要轉(zhuǎn)而使用強(qiáng)大的“:nth-child”選擇器了:

復(fù)制代碼

代碼如下:

section:nth-child(1) {} /* 選擇第一個(gè) <section> */
article:nth-child(1) {} /* 選擇第一個(gè) <article> */
section:nth-child(2) {} /* 選擇第二個(gè) <section> */
article:nth-child(2) {} /* 選擇第二個(gè) <article> */

同樣，我們可以使用“:nth-last-child”選擇器定位反序的一些元素。

復(fù)制代碼

代碼如下:

section:nth-last-child(1) {} /* 選擇最后一個(gè) <section> */
article:nth-last-child(1) {} /* 選擇最后一個(gè) <article> */ </p> <p>section:nth-last-child(2) {} /* 選擇倒數(shù)第二個(gè) <section> */
article:nth-last-child(2) {} /* 選擇倒數(shù)第二個(gè) <article> */

使用更多的方式選擇指定元素

　　另一種選擇HTML5中指定元素(如 header、section和footer)的方法就是利用”:only-of-type”選擇器的優(yōu)勢(shì)。由于這些HTML5元素通常會(huì)在很多地方出現(xiàn)不止一次，所以當(dāng)我們想定位那種在父元素下僅出現(xiàn)過(guò)一次的標(biāo)簽時(shí)這種方法很方便。例如，我們要選擇的是在某元素中有切僅有的唯一一個(gè)元素，如以下代碼:

復(fù)制代碼

代碼如下:

<section>
<section></section>
<section>
<section>定位這個(gè)section元素</section>
</section>
<section>
<section>定位這個(gè)section元素</section>
</section>
<section>
<section>但不定位這個(gè)section元素</section>
<section>和這個(gè)section元素</section>
</section>
<section></section>
</section>

我們可以?xún)H使用以下一行選擇器:

復(fù)制代碼

代碼如下:

section>section:only-of-type {}

再次嘮叨，你可以固執(zhí)的為每個(gè)元素添加ID屬性，但你會(huì)失去代碼的可擴(kuò)展性、維護(hù)性和絕對(duì)簡(jiǎn)潔的結(jié)構(gòu)與表現(xiàn)相分離。 CSS3的確能讓我們可快速更方便的定位幾乎所有沒(méi)有ID和class屬性的頁(yè)面元素。

總結(jié)

　　我相信隨著時(shí)間的推進(jìn)和更多瀏覽器的支持，HTML5和CSS3將越來(lái)越受歡迎，它們將為web設(shè)計(jì)師們帶來(lái)更無(wú)窮的能量，讓我們的web前端更上一個(gè)臺(tái)階。（文/鬼武者）

標(biāo)簽：黃山湖北懷化湘潭山南煙臺(tái) 賀州通遼

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5+CSS3應(yīng)用詳解》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。