CSS小技巧：文字邊框製作法
過去~不熟悉CSS的人，想要特別的在一段文字上加邊框，非得使用格式較複雜的表格標籤來做，這篇特地的使用最簡單的方式，與各位分享如何簡單的在一段文字上加上醒目的邊框。
這個方法只要在可以支援HTML輸出的發布表格都可以使用。
文字上加邊框原始碼範例如下： <p style="border:1px solid #ff0000">文字加邊框</p> 呈現的樣式如下：文字加邊框
解說：
我們先用了段落標籤<p>來包覆我們要強調的一段文字，後在其後面加上 style的屬性，這是CSS用的屬性，然後在冒號與冒號間加上border:1px solid #ff0000。
border是CSS的邊框複合屬性，可以用最簡單的方式形成簡單的邊框樣式。border:後面的正確寫法如下
border:邊框寬度 邊框樣式 邊框顏色邊框寬度我習慣用像素(px)來定義，比較好掌控；邊框的樣式請參考這裡的介紹，選出你喜愛的填到相對的位置上；而顏色請參照這裡，依樣選出你喜愛的填到相對位置上即可。
進階應用
如果想要文字邊框留點空白，讓視覺上比較好看，可以參考以下的寫法：
<p style="border:1px solid #ff0000;padding:10px;">文字加邊框</p> 呈現的樣式如下：文字加邊框
由於留白這個動作不屬於border管轄，所以在邊框顏色的後面先加上分號( ; )，告知邊框的宣告已經結束，然後加上padding屬性，padding則是內距的快速屬性，用來控制區塊內留白，請參照此圖了解padding在區塊中扮演的角色。同樣的，我個人習慣用像素來控制留白的大小。
如果想要加上背景色來達到更強調的效果，請參考以下的寫法：
<p style="border:1px solid #ff0000;padding:10px;background :#eeffee">文字加邊框</p> 呈現的結果如下：文字加邊框
與上面留白一樣，背景亦不屬於內距，也不屬於邊框所控制，所以在內距屬性的後面先加上分號( ; )，告知內距屬性宣告結束，然後加上background屬性，background是區塊背景的複合屬性。同樣利用上述說的色碼表來貼上自己喜歡顏色的色碼，即可完成。
想要一勞永逸的話...
經過上面由淺入深的說明，應該已經對這樣簡單的方法感到很有趣了，但是，如果一段文章內需要下很多這樣的樣式時，不免還是顯得麻煩，且維護寫過的文章也會變的比較不方便。
如這篇文章，我大量的使用的"引用"標籤(<blockquote>)來顯示範例，而且都有其專屬樣式，如果藉由上面的作法，那麼原始碼看起來將會相當的雜亂。
所幸，多半的部落格都提供了範本的設定，給你妳套用的範本原始碼讓你可以加上想加的東西，因此，我們也可以在範本中加上標籤專屬樣式，以後只需要簡單的打上標籤就可以美美的了。
一般來說，替網頁裡面的每個標籤加上樣式，都會在html中的<head></head>之間加上CSS原始碼，如我的部落格，替<blockquote>加上的專屬標籤如下：
<style> ........... blockquote { margin:1em 20px; display:block; padding:10px; color:#993333; border: 1px solid rgb(153, 153, 153); background: #ffffee; } .............. </style>
你會發現寫法與上面的範例完全不同，以下用中文解釋上面的寫法結構，以及套用最上面的範例會怎麼呈現。
中文解釋結構如下： <style> ........... HTML標籤 { CSS樣式屬性 CSS樣式屬性 ...... } .............. </style>
最上面的範例宣告於HEAD之間的方法如下... <style> ........... p { border:1px solid #ff0000; padding:10px; background :#eeffee; } .............. </style>
|