 大部分使用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{ ←這就表示你在元素下的所有連結樣式，透過這種階層式的設定法，有助於管理，同時可以清楚的看出層級關係，右圖則是由設定→引用→結果的流程圖。
|
