WEBTECH 網頁設計教學站
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 區域內有背景顏色

連絡我們