HTML span 標籤用法

HTML span 標籤是一個非常古老卻非常好用的標籤，透過 span 標籤可以讓我們輕易的修改網頁中的各種小區塊，例如替文章中的特定文字做出特效，包含修改文字顏色、修改文字大小、替文字增加底線、修改文字的字型、把文字變粗 ... 等，都可以透過 HTML span 標籤把特定文字標示出來再賦予樣式的變化，來輕鬆達到網頁設計師所想要的風格，除此之外，span 標籤也經常被來來做一些網頁元件的樣式控制，使用非常便利。

HTML span 標籤是一個＂區域＂形態，也就是一個 span 標籤組只會佔用自己本身的空間，不會像 DIV 標籤那樣一次佔掉一整行的空間，許多的網頁設計都是採用 DIV 標籤與 span 標籤的搭配設計，用 DIV 標籤做大範圍的排版，再用 span 標籤進行細部美化。

HTML span 標籤語法
<span id="" class="" style="">把區塊內容放在這裡</span>
標準的 HTML span 標籤是由一個 <span> 標籤開始並由一個 </span> 標籤結束，開頭的 <span> 標籤內可以放很多設定用的東西，例如 id 用來標示特定 ID 名稱、class 用來標示特定 class 名稱，style 用來宣告 span 標籤的樣式。

HTML span 標籤的應用範例一、設計出有邊框效果的 span 區塊
<span style="border:2px red solid;">
HTML span 標籤範例
</span>
範例看起來會像這樣
HTML span 標籤範例
我們在範例一中的開頭 span 標籤內採用 style 宣告一段 CSS 語法，目的是要替這個 span 標籤增加紅色的邊框，border 就是設定邊框用的 CSS 語法，有興趣的朋友可以參考此篇：CSS border 邊框設計。

HTML span 標籤的應用範例二、嘗試修改 span 區塊內的文字大小
<span style="border:2px red solid;font-size:12px;">
修改 HTML span 標籤內文字大小範例
</span>
範例看起來會像這樣
修改 HTML span 標籤內文字大小範例
範例二我們透過 CSS 的 font-size 屬性將 span 區域內的文字大小修改為 13px，這樣看起來是不是有比較小一點了呢？font-size 是 CSS 的文字大小修改標準屬性，數字越大文字就會越大，反之數字越小，文字就會越小。

詳細用法請參閱：CSS 透過 font-size 屬性設定文字大小。

HTML span 標籤的應用範例三、嘗試增加 span 區塊內背景顏色
<span style="border:2px red solid;font-size:12px;background-color:yellow;">
增加 HTML span 標籤的內景顏色
</span>
範例看起來會像這樣
增加 HTML span 標籤的內景顏色
範例三延續了範例二的效果，然後再用 background-color 來增加了黃色（yellow）的背景顏色，效果是不是相當顯著呢？關於修改背景顏色的 background-color 屬性詳細用法請參閱：CSS background-color 背景顏色。

HTML span 標籤的應用範例四、替 span 標籤增加內距
<span style="border:2px red solid;font-size:12px;background-color:yellow;padding:10px;">
增加 HTML span 的內距
</span>
範例看起來會像這樣
增加 HTML span 的內距
我們在範例四中多用了一個叫做 padding 的屬性，padding 是 CSS 用來設計元素內距的標準屬性，所謂的內距也就是內部距離，經過這樣的修改後，範例的 span 標籤內容文字看起來是不是比較清楚了呢？至少不會文字與邊框黏在一起，這就是 padding 的優點，關於詳細的內距設定方式請參閱：CSS padding 內距。

看完以上幾個 HTML span 標籤的延續範例，相信各位對於 span 標籤的應用有些熟悉了，其實 span 標籤的應用方式還很多，遠遠超過這些範例的用法，就看各位如何去發揮囉！

更多 span 區域設計
  • 如何修改 HTML span 區域內的文字字型
  • 如何修改 HTML span 區域內的文字大小
  • 如何讓 HTML span 區域內有背景顏色
© Copyright webtech.tw Since 2010