有了這篇前端工程師再也不會分不清Div及Span標籤應用了!! (下)

有了這篇前端工程師再也不會分不清Div及Span標籤應用了!! (下)
有了這篇前端工程師再也不會分不清Div及Span標籤應用了!! (下)

前端工程師們還記得上一篇<Div>所說的內容嗎? 今天要把另外一部分<Span>也教給大家喔~

 

目錄
1. <Span> 與 <Div> 的異同
2. Div 與 Span 標籤概述
2-1. Div 標籤概述
2-2. Span 標籤概述



CSS 的 <span> 跟 <div> 標籤能將 HTML 的內容分為不同的區域。不過 <span> 有別於 <div> 標籤的區塊特性,<span> 的區域僅會佔用其容器所需的空間 (容器有多大,就佔多少空間),而區塊型的 <div> 標籤是不管容器內的容量有多少,都一定會佔去一行空間。多個 <span> 區域是可以在同一行同時出現的, 所以 <span> 可以針對很細微的地方做調整,前端工程師甚至可以用 <span> 來調整行內單一文字的樣式。而多個 <div> 區塊則無法在同一行同時出現,會佔用掉多行的空間 (有幾個 <div> …</div> ,就會佔去幾行空間) 。但是如果 DIV 標籤有套用到像是 「浮動 float」 的指令,則不再此限。

如何將 CSS 樣式套用至 <span> 區塊?

通常前端工程師要讓 <span> 區塊都會加個 「class 選擇器」 或是 「id 選擇器」 來套用 CSS 樣式,他的語法格式會是 「 <span class=”CSS 的 class 名稱”>…</div> 」 或是 「 <span id=”CSS 的 id 名稱”>…</div> 」。「class 選擇器」 以及 「id 選擇器」 的說明,請見此兩篇:
<

CSS 的 ID 選擇器宣告法>、<CSS 的 Class 選擇器宣告法>

舉例來說,我們已經定義了以下的 CSS 樣式:

.span-1 { 
  color: blue; 
  font-family:微軟正黑體; 
  font-size: 20pt; 
}
.span-2 { 
  color: red; 
  font-family:新細明體; 
  font-size: 16pt; 
}
.block-3 { 
  color: green; 
  font-family: 標楷體; 
  font-size: 18pt; 
}

要怎麼使用 <span> 來套用其 CSS 樣式,其 HTML 碼如下所示:

<body>
<span class="span-1">這裡是網頁第一個<span class="span-2">span</span>的內容</span>
<span class="span-2">這裡是網頁第二個<span class="span-1">span</span>的內容
<div class="block-3">這是在第二個span內插入的div</div>
<span class="span-2">內容</span></span>
<span class="block-3">這裡是網頁div的內容
<span class="block-1">這是在網頁div內插入的span</span>區塊</div>
</doby>

則結果如下所示(左邊為 HTML、右邊為顯示結果):

在以上的例子中,我們可以知道:

1. <span> 是屬於行內元素 (Inline Element) 的容器,所以不會像 <div> 一樣獨自占用一行,而是容器內有多少東西就佔多少空間。如以上的例子中,第一個 span 容器和第二個 span 容器中間是沒有空格或是換行的。而第二個 span 容器中間有插入一個 div 容器,雖然 div 容器是置於第二個 span 容器中,但因為 div 容器的區塊特性,還是會自動換新的一行。且這一行也不允許有其它的容器出現。

 

2. 被 <span> 容器包起來的區塊裡面都可以插入 <div> 、<h1> 、<p> 等容器內,且不會自動換行。

 

3. <span> 適合做行內樣式的微調,如只需要修改行內的一兩個字的場合,就可以使用 <span> 容器包起來並用 CSS 定義其樣式

其他閱讀

有了這篇前端工程師再也不會分不清及標籤應用了!! (上)

HTML5教學之CSS基礎語法:如何設定好邊框區塊

HTML5教學告訴你怎麼做出生動的書本翻頁動畫!!

Python課程結合醫療,是病人的大福音!

進入微軟面試前,履歷上你應該要先上Java課程!

為什麼小屈能穩坐台灣藥妝界龍頭?UI 課程是關鍵!

程式課程選達內,美上市IT課程教育集團

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *