CSS, CSS2, 網頁設計

[CSS]CSS也有階層的結構

梅干2008/11/22
  大部分使用CSS樣式時,都採用單一層居多,原因在於大部分在設定CSS樣式,都是利用Dreamweaver來設定樣式,舉例來說,在Dreamweaver最常使用到的就是文字設定比較多,每當把文字選起來之後,改變文字的大小、顏色......時,Dreamaeaver就會自動產生CSS的樣式,但假設今天在Div有表格又有連結或圖片時,不就得一一的加以設定,想到這邊心就已經涼一半了, 那該如何解呢?辧法總是人想出來的,只要花點心思想,答案就已乎之欲出了。 
  在要開始介紹時,首先我們先來了解一下,什麼是單層、什麼是多層,在這邊所指的單層就是各位最常的如: .style1{ XXX ;}這是最常被使用到,多層 .style1 a { XXX;}這樣的表現方式稱之為多層,姑且現在你可能還不太明白這是什麼意思,沒關西請看下圖,各位對檔案總管應該很熟悉了吧!用這張來解說,應該比較容易懂,從這一張圖當中,各位可以發現到,當選了c槽下的資料夾,在網址那地方則會出現目前所選的路徑,C:AppSrevMySQL←從這邊就可清楚知道現在正在MySQL的資料夾。

  有了這一個觀念後回到CSS,在檔案總管下,找尋下層則是利用 符號來標示,而CSS則是利用『空一格』作為下層的標示,從下圖的左半部,各位可看到,.outbox p{ ←這表示目前在針對outbox下的P這一個元素進行設定,因此只要在outbox下出現的元素,都將會以這樣式為主,假設在的底下又有一個連結時,標示則為.outbox p a{ ←這就表示你在元素下的所有連結樣式,透過這種階層式的設定法,有助於管理,同時可以清楚的看出層級關係,右圖則是由設定→引用→結果的流程圖。


UAG軍規iPhone防摔殼