HTML、CSS的階層特性

  • 文章分類: 學CSS
  • 9/28/2010

sample
sub-sample
sub-sub-sample1
sub-sub-sample2
sub-sub-sample3

 

(圖一)

HTML

         <div id="sample">
                <div id="sub-sample">
                           <div id="sub-sub-sample 1">    
                           </div>
                           <div id="sub-sub-sample 2">
                           </div>
                           <div id="sub-sub-sample 3">
                           </div>
                 </div>
          </div>

 

CSS

   #sample{background:#000}

   #sub-sample{background:# 2b2b2b}

   #sub-sub-sample 1{background:# 787878}

   #sub-sub-sample 2{background:# 787878}

   #sub-sub-sample 3{background:# 787878}

說明

        CSS 的基本架構是階層式的，從上方的html可以知道sample為母階層，sub-sample為sample的子階層，sub-sub-sample為 sub-sample的子階層，我們在css裡將每個階層都加上背景如（圖一）就可以知道HTML及CSS是ㄧ層疊一層的，越外圍的階層會被疊在越下 面。