CSS span 區域背景顏色設計

CSS span 區域標籤可以用來輕易的將網頁內容特定的部分標示起來並設計出不同的區域效果,例如改變文字的大小、顏色、樣式、字型 ... 等,都是可以的,同時 span 區域也可以擁有自己的背景顏色,網頁設計師只需要採用 CSS background-color 屬性就能輕易的修改 span 區域的背景顏色,我們先來看看 span 區域與 background-color 屬性的基本語法,再套用到範例中看實際的效果。

CSS span 區域標籤語法
<span style="樣式設計">要修改的內容</span>
詳細用法:CSS span 標籤用法介紹

CSS background-color 屬性與法
background-color: 顏色值;
詳細用法:CSS background-color 背景顏色

有了以上兩個基本的語法之後,我們就能將它們結合在一起來修改 span 的背景顏色,請看範例。

CSS span 區域背景顏色設計範例
<span style="background-color:blue;margin-right:5px;">藍色的背景顏色</span>
<span style="background-color:red;margin-right:5px;">紅色的背景顏色</span>
<span style="background-color:orange;margin-right:5px;">橘色的背景顏色</span>
範例的實際效果
藍色的背景顏色 紅色的背景顏色 橘色的背景顏色
範例中組共有三個不同的 span 組,分別透過 CSSbackground-color 來將背景顏色調整為藍色、紅色以及橘色,從範例的實際效果可以看到相當明顯的差異,這就是修改 span 背景顏色的常用技巧。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012