~✿翔霏の寶貝屋✿~

自定欄位文章超連結CSS簡易框-2 (二度空間)語法應用編輯

此語法為CSS簡易框-1的進階版，CSS簡易框-1 在雙框有效的運用下，包含"淡出提示文字"頂多只可以做出 14 框，CSS簡易框-2 此版本已提升為雙框 24框，而且語法採用父子元件宣告規則語法，更節省字元，設定上更方便

盡量避免寫入過多的中文字元，因為會影響總限制字元數量

通常奇摩部落格文章網址都會多出一些字串，做文章連結時，這些字串是可以刪除的，例如：

http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=19300&prev=7489&next=19261&l=a&fid=10

紅色部分不管任何字串，多出的部分去除，縮寫例如↓

http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=19300

此語法另一個優點是：使用火狐瀏覽器時，影響程度比較不明顯

PS：引用時請勿刻意改變文章格式，以免產生應用上的錯誤

實際範例，每個連結框雙框時最多可增至24框

樣式特性：用來描述一個或數個元件的特性，每個元件擁有一組或數組的性質

基本樣式：規則=元件+宣告，宣告=性質+值，例如：#bb1 a{color:#660066;}

重點提示：同時對數個元件宣告其樣式規則，其中各宣告規則以 ; (分號)來區隔，數個元件共同宣告其性質，其各元件規則以 , (逗號)來區隔，例如：#bd1 a, #be1 a{color:#ffffff; font-size:18px;}

挑選作用者 id：套用樣式規則的元件，就是個挑選者，例如：<div id="ba1">

類別挑選者：應用 HTML中的 CLASS 屬性，通常是針對多種單一的標籤指定特定的樣式性質，例如：<div class="pycntmod">，這是例外說明，在本章中無應用到

/*裝飾美化連結外框線底圖分兩組，當然所有連結框可共用一組同樣的框線底圖*/

/*以下語法解說為上面的實際範例多色混合連結框*/

<style>/*樣式表共用語法在編寫時，無論使用幾個連結框，只要寫一次即可*/
<!--
#ba1{BACKGROUND:url(第一組外框框線底圖網址)/*也就是範例 1/2/3 框*/;}
#bc1{BACKGROUND:url(第二組外框框線底圖網址)/*也就是範例 第 4 框*/;}
#ba1, #bc1{border:4px outset #00FFFF;PADDING:7px;margin-top:5px/*一二組外框線樣式-框線底圖墊充程度-上下連結框的間距*/;}
#bb1{border:4px double #660066;BACKGROUND:#FFFF00/*範例框一內框線樣式-連結文字背景色*/;}
#bd1{border:4px outset #F5F5F5;BACKGROUND:#FF0000/*範例框二內框線樣式-連結文字背景色*/;}
#be1{border:4px outset #F5F5F5;BACKGROUND:#660066/*範例框三、四內框線樣式-連結文字背景色*/;}
#bb1, #bd1, #be1{PADDING-top:3px/*各框文字與內框線上邊線的距離*/;}
#bb1 a{color:#660066/*範例框一連結文字顏色*/;}
#bd1 a, #be1 a{color:#ffffff/*範例框二、三、四連結文字顏色*/;}
-->
</style>

/*附記：外框線樣式如要區分，樣式語法要分開寫， 例如：*/
#ba1, #bc1{PADDING:7px;margin-top:5px;}/*框線底圖墊充程度-上下連結框的間距*/
#ba1{border:4px outset #00FFFF;}/*外框線樣式*/
#bc1{border:4px ridge #FF00FF;}/*外框線樣式*/

/*挑選者 id*//*連結框串接語法*/

<center>
<div id="ba1">/*外框線作用*/<div id="bb1">/*內框線作用*/<a href="超連結網址" title="淡出提示文字">範例框一</a></div></div>/*雙框線 要寫兩個結束語*//*以下解說類推*/
<div id="ba1"><div id="bd1"><a href="超連結網址" title="淡出提示文字">範例框二</a></div></div>
<div id="ba1"><div id="be1"><a href="超連結網址" title="淡出提示文字">範例框三</a></div></div>
<div id="bc1"><div id="be1"><a href="超連結網址" title="淡出提示文字">範例框四</a></div></div>
</center>

<div id="ba1"><div id="bb1"><a href="超連結網址" title="淡出提示文字">連結標題</a></div></div>

為了節省字元，文字大小及字型由"自訂樣式"CSS中設置窄欄位字體

語法應用重要規則：自訂欄位總共可自訂 5 個欄位，無論你將此語法用了幾個欄位，欄位之間語法的元件名稱、id 名稱，不能相同，否則各分欄位連結框會互相干擾！

舉例：5 個欄位名稱分別為欄位一、欄位二、欄位三、欄位四、欄位五，其中用兩個欄位來做舉例區分說明，例如：欄位一元件為#ba1，挑選者 id即為<div id="ba1">，欄位二元件為#ba2，挑選者 id即為<div id="ba2">，欄位三、四、五以此類推