05 Div and Span

Div

此標籤是一個區塊級容器(block-level container),這代表在</div>標籤後會自動換行。因此,它可以群組化兩個以上的元素,或自由設定區塊元素的範圍。其中可以包含文字、另一內聯元素或區塊元素。

一般而言,僅是指定此標籤畫面上並不會產生什麼變化,但如果與Class、ID、Lang屬性合併的話,就可以設定共通的樣式表或語言資訊。


範例:

.show { 
font-size:30px;
color:#00FFFF; 
}

<div class="show">此為Div區塊範例</div>


Span

在內聯元素(inline elements)內設定一個特定範圍。其中可以包含文字或另一內聯元素。不同的是,Span可以涵蓋更細層的元素。因此,甚至可以運用<span>來調整單一文字的樣式。另外,在</span>之後並不會自動換行

一般而言,僅是指定此標籤在畫面上並不會產生什麼變化,但如果與Class、ID、Lang屬性合併的話,就可以設定共通的樣式表或語言資訊。


範例:

.show { 
font-size:30px;
color:#00FFFF; 
}

#pop {
      color:red;
     }

<div class="show">此為Div及<span id="pop">Span</span>區塊範例</div>


Comments