CSS樣式：類別

本頁面所使用的外部CSS樣式檔：CSS_Sample.css（請另存目標下載）

  1. 以下有兩種CSS類別「FONT_A」 及「FONT_B」，定義於程式碼中個別如下：
.FONT_A {
     font-family: Arial, Helvetica, sans-serif, "新細明體"; 字體字型
     font-size: 14px;   字體大小
     color: #990000; 字體顏色
     background-color: #FFFFCC;  背景顏色
     padding: 10px;欄位間隔10px
     border: 1px dotted #000000; 邊框1px 點狀 黑色
}		   .FONT_B {
     font-family: "標楷體";字體字型
     font-size: 16px;字體大小
     color: #333333;字體顏色
     padding: 20px;  欄位間隔20px
     background-image: url("bg/image_bg_04.jpg");  背景影像
}

  1. 套用「FONT_A 」類別的段落及表格有何不同：

這是一段套用「FONT_A 」類別的段落， <p class="FONT_A">，【段落文字】=【內容】，而【欄位間隔10px】=【內容外部的距離】，有虛線邊框。

這是一段套用「FONT_B 」類別的段落，<p class="FONT_B"> ，【段落文字】=【內容】，而【欄位間隔20px】=【內容外部的距離20px】，有背景影像。

這是一個套用「FONT_A」 類別的表格（一列一欄） <table width="100%" class="FONT_A">，對表格來說，【內容】=【列】，故而【欄位間隔10px】=【列外部的距離10px】
  1. (a) 以下為一個套用「FONT_A 」類別的表格（一列三欄）<table width="100%" class="FONT_A">，對表格來說，【內容】=【列】，故而表格外框往內【欄位間隔10px】才放框往內【內容、列】所以【邊框1px 點狀 黑色】並不會套用於表格中的儲存格。
    (b) 第一欄再套用「FONT_B 」<td class="FONT_B">，此儲存格的樣式會凌駕表格FONT_A的樣式，因此字型顯示標楷體。
    (c) 第二欄沒有套用任何樣式，但有設定背景顏色灰色。
    (d) 第三欄套用「FONT_A 」<td class="FONT_A">， 此欄的樣式是針對儲存格td，因此點狀的外框顯現於儲存格的邊框，並有欄位間隔。

此欄td套用「FONT_B」 類別：

<td class="FONT_B">

此欄td沒有套用任何樣式，但有設定背景顏色灰色。

<td>

此欄td套用「FONT_A」 類別，有虛線邊框

<td class="FONT_A">
  1. 對於圖片也可以設定樣式類別，改變圖片的外觀：
一般的影像，頂多設定邊框顏色寬度：

<img src="bg/content_01.jpg" width="300" height="200" align="top">

可以對圖片設定白邊及黑色邊框，需套用「picture」樣式：
<img src="bg/content_01.jpg" width="300" height="200" class="picture">


樣式「picture」的程式碼：
.picture {
padding: 10px; 欄位間隔10px
border: 1px solid #000000;邊框
}

  1. 可針對縮排段落文字的段落樣式：

設定「段落樣式01」的範例段落文字，設定「段落樣式01」的範例段落文字，設定「段落樣式01」的範例段落文字，設定「段落樣式01」的範例段落文字，「段落樣式01」的範例段落文字，設定「段落樣式01」的範例段落文字，設定「段落樣式01」的範例段落文字，設定「段落樣式01」的範例段落文字，設定「段落樣式01」的範例段落文字。

.段落樣式01 {
text-align: left;段落對齊
padding-top: 10px;上欄位間隔10px
padding-right: 30px;右欄位間隔30px
padding-bottom: 10px;下欄位間隔10px
padding-left: 40px;左欄位間隔40px <----------------段落的縮排
letter-spacing: 5px;字母間隔5px
}

CSS樣式：關於超連結的

  1. 一般頁面的連結定義於「頁面屬性」，並且在CSS樣式表中會出現如「a:link」「a:visited」「 a:hover」「a:active」的樣式，如此作可以改變預設的超連結外觀，而其影響範圍為整個頁面，例如這個超連結。其代表意義如下：
    「a:link」：超連結一般的樣式
    「a:visited」：已經造訪過的超連結樣式
    「 a:hover」：滑鼠移上去時的樣式
    「a:active」：滑鼠按下的樣式
    超連結的CSS樣式設定需要依照順序「a:link 」「a:visited 」「a:hover 」「a:active」，而且最好四個樣式都設定。

  2. 在前面，我們可以對「段落」或「表格」套用某種類別樣式，這邊，我們可以「額外定義」讓該「段落」或「表格」中的超連結，有獨特的外觀。
    這樣作可以在套用該樣式所作用的範圍裏，擁有與頁面其它部份不同的超連結樣式，而其優先次序也高過頁面的超連結樣式。
    如何新增?一般是在已經定義某個樣式（以下例為「FONT_C」樣式）之後才新增，新增CSS時選擇「進階」，並且在「圈選工具」處打上「點+類別名稱」，之後下拉選取。

    不過也可以直接編輯CSS，貼入以下紅字，再將.樣式名稱取代為其他樣式名稱:

    .樣式名稱 a:link {
    }
    .樣式名稱 a:visited {
    }
    .樣式名稱 a:hover {
    }
    .樣式名稱 a:active {
    }
  3. 使用此方式所制定的超連結四種樣式需要以下面順序：
  4. 對套用類別的表格作設定的範例：
    這是一個套用FONT_C 類別的table，上方超連結的外觀定義如下方說明:

    .FONT_C {套用於表格的樣式
    font-size: 16px;
    color: #333333;
    background-image: url("bg/image_bg_04.jpg");
    border-collapse: collapse;
    }
    .FONT_C a:link {表格內的超連結顯示樣式
    color: #FFFFFF;
    background-color: #6B422E;
    display: block;超連結以區塊顯示，因為放在儲存格中，區塊為「儲存格」，背景色會以儲存格為範圍
    font-size: 15px;
    padding: 5px;
    }
    .FONT_C a:visited {
    background-color: #333333;
    display: block;
    color: #FFFFFF;
    font-size: 15px;
    padding: 5px;
    }
    .FONT_C a:hover {當滑鼠移入時超連結的顯示樣式
    background-color: #000000;滑鼠移入時只有改變背景色
    display: block;
    font-size: 15px;
    padding: 5px;
    }
    .FONT_C a:active {
    background-color: #990000;
    display: block;
    padding: 5px;
    }

  5. 上述的超連結設定，不僅可以設定於類別之中，也設在ID中，如此對有指定ID的物件(例如表格)，將會改變其中的超連結外觀。
    此為命名(ID)為A的表格，而這是一個連結，外觀定義於  #A a:link    #A a:hover。
    因為樣式檔中沒有設定#A a:visited    #A a:active，所以當超連結按過之後樣式會走調，
    因此建議還是 需要依照順序、並且四個樣式都設定「a:link 」「a:visited 」「a:hover 」「a:active」
    測試連結 測試連結 測試連結 測試連結


    #A a:link {
    background-image: url("bg/image_bg_04.jpg"); 背景影像
    display: block; 超連結以區塊顯示，因為放在儲存格中，區塊為「儲存格」，背景影像會以儲存格為範圍
    color: #333333;
    text-align: center;居中對齊
    padding: 5px; 邊界5px
    text-decoration: none; 無底線
    }

    #A a:hover {
    background-image: url("bg/image_bg_04B.jpg");   改變背景影像
    color: #990000;  改變文字顏色
    }

  6. 同5.，圖片（PNG）的超連結，可以修改如下面的樣子：
    這是一個ID為「A1」的表格，關於此ID內的超連結樣式定義如下：

    #A1 a:link { display: block; } block是以「整個儲存格」為變化範圍
    #A1 a:hover { background-color: #DFE8E2; display: block; } block當滑鼠移過，變化「整個儲存格」的底色

  7. Q:我們如何去除頁面連結的虛線框?
    A:編輯CSS，編輯【a】的規則，替加入紅字處的程式碼。

    a {
    outline: none; /* Firefox,Chrome */
    hlbr: expression(this.onFocus=this.blur()); /* IE */
    }

必須手動設定的CSS樣式

有些CSS樣式必須手動輸入，之中常用到的為設定表格邊框的樣式，例如下面是一個叫做【.THIN】的類別
.THIN { border-collapse: collapse; }

此為套用.THIN類別的table，邊框跟一般的表格不一樣 asd ad
ASDASDAs asd asd sadaghj gh

此為沒有套用任何樣式、也就是一般邊框為1的表格 asd ad
ASDASDAs asd asd sadaghj gh