CSS span 區域

CSS span 區域與 DIV 區塊是不一樣的元素，每個 span 區域僅會佔用該元素所需的空間，許多的 span 區域是可以並排在一起顯示的，而每個 DIV 區塊則會佔用掉一行的空間，除非使用像是浮動 float 的技巧，否則預設的 DIV 區塊是無法像 span 的並排方式呈現，標準的 span 區域是透過 <span> 標籤開始，至 </span> 標籤結束，開頭的 <span> 標籤內可以加入 id 或 style 樣式。

CSS span 標籤基本語法
<span id=" ID 名稱" style=" 樣式名稱 "> ... 內容 ... </span>

承續第一段的介紹題到開頭 <span> 標籤內可以安插 id 或 style 樣式，這兩個參數都是可以選用的，也就是單純使用 <span> 當開頭標籤也就可以了，若要額外對不同的 span 寫樣式再選用 id 或 style 即可。

CSS span 標籤範例一、修改 span 內的文字樣式
<span style="color:blue;">藍色</span>
<span style="color:black;">黑色</span>
<span style="color:red;">紅色</span>
以上範例輸出
藍色 黑色 紅色
我們在範例的開頭 span 標籤內安插了 style 來修改標籤內的文字樣式，color 代表的是文字顏色，進一步研究請參閱：CSS color 文字顏色。由範例的輸出結果可以看到三組 span 標籤自動並排在一起，此即為 span 標籤的預設排版特性。

CSS span 標籤範例一、多個 span 垂直排列
<span style="background-color:#FF8282;">第一行</span><br>
<span style="background-color:#FFD382;">第二行</span><br>
<span style="background-color:#82FF82;">第三行</span>
以上範例輸出
第一行
第二行
第三行
為了要讓每個獨立的 span 區域能夠自動換行排列，我們在結尾 </span> 後使用了 HTML 的 <br> 標籤，讓每一組 span 標籤增加一個換行指令，如此即能創造出垂直排列的 span 效果，範例中的 background-color 的用途是修改背景顏色。

延伸閱讀
© Copyright webtech.tw Since 2010