DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 不再使用class和id進行網頁布局
不再使用class和id進行網頁布局
編輯:CSS詳解     

結合了富有新的語義化標記的Html5,CSS3為web設計師們的網頁提供了神一般的力量。有了Html5的能量,我們將得到更多的對文檔代碼的控制權,有了CSS3的能量,我們的控制權將趨於無窮大!

  即使沒有那些高級的CSS選擇器,我們仍然可以通過強大的Html5條調用不同的容器而不勞駕class和id這類屬性。像以往的DIV布局,我們在CSS中可能要這樣調用:

1
2
3
4
5
6
7
div#news    {}
div.section {}
div.article {}
div.header  {}
div.content {}
div.footer  {}
div.aside   {}

我們再來看看基於Html5的實例:

1
2
3
4
5
section {}
article {}
header  {}
footer  {}
aside   {}

  這是個進步,但仍有一些問題需要解決。在<div>實例中,我們需要通過class或id屬性來調用頁面中的元素。這種邏輯將允許我們將樣式應用到文檔中的任何一個元素上,無論是整體還是個體。例如在<div>實例中,.section 和 .content元素很容易定位。但是在Html5實例中,實際文檔中會有很多個section元素。其實我們可以添加一些特定的屬性選擇器來調用那些不同的section元素,不過謝天謝地,我沒現在可以用少量的高級CSS選擇器來定位不同的section元素。

 下面讓我們來看看如何在不使用class和id的情況下定位Html5頁面元素的一個實例,我們可以使用三種CSS選擇器來定位和辨別實例中的元素。如下:

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

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

定位最外層的<section>元素

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

1
body nav+section {}

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

1
section>section {}

定位<article>元素
可以定位<article>元素的方法有很多,不過最簡單的方法當然就是後代選擇器了:

1
section section article {}

定位<header>、<section>和<footer>元素
這三個元素分別在兩個地方都出現過,一是在<article>元素中出現,另一是在<aside>元素中出現。這種差別能讓我們輕松定位每個元素。

1
2
3
article header {}
article section {}
article footer {}

或者一起定義:

1
2
3
section section header {}
section section section {}
section section footer {}

  到目前為止,我們已經使用CSS2.1選擇器排除掉了所有的class和id。那麼我們為什麼還需要使用CSS3呢?我很高興你能這麼問…

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved