資料來源：http://www.uuu.com.tw/Public/content/article/140602tips.htm
作 者：李啓宏 精誠資訊 恆逸教育訓練中心 資深講師
技術分類：多媒體網頁設計 |
| 在 Dreamweaver CC版本中，CSS 樣式面板已由 CSS 設計工具所取代。CSS 設計工具 (執行「視窗 > CSS 設計工具」) 是整合的面板，可讓您透過「視覺方式」建立 CSS 檔案、規則和設定屬性。CSS 設計工具面板是由下列窗格所組成：
【來源】 列出所有與文件相關的樣式表。您可使用此窗格建立 CSS 並將其附加到文件，或在文件內定義樣式。
【@媒體】 列出在「來源」窗格中所選來源的所有媒體查詢。
【選取器】 列出在「來源」窗格中所選取來源的所有選取器。如果未選取任何 CSS 或媒體查詢，則此窗格會顯示文件中的所有選取器。
【屬性】 顯示您可針對指定選取器所設定的屬性。 自行新增嵌入CSS時，需先判斷要使用的【選取器類型】，選取器主要有四種類型：類別、ID、標籤及複合。
標籤：若要重新定義特定HTML標籤的預設格式，請在「選取器名稱」文字方塊中輸入HTML標籤名。
類別：若要建立可以做為class屬性套用至任何HTML元素的自訂樣式，請在「選取器名稱」文字方塊中輸入樣式的名稱。
ID：若要為包含特定ID屬性的標籤定義格式，請在「選取器名稱」文字方塊中輸入唯一的 ID。
複合：若要定義可同時影響兩個以上標籤、類別或ID的複合規則，請輸入複合規則的選取器。 |
| 選取器 |
語法 |
套用方式 |
| 標籤 |
標籤名稱{ 屬性：設定值；} |
頁面上所有此標籤自動作用 |
| 類別 |
.自訂類別名稱{ 屬性：設定值；} |
<HTML標籤> |
| ID |
#自訂ID名稱{ 屬性：設定值；} |
<HTML標籤 id=” 自訂ID名稱”> |
| 複合 |
階層順序{ 屬性：設定值；} ※
階層順序可以是由標籤、類別、ID組合而成的階層順序 |
頁面上所有符合此階層順序的自動作用 |
範例練習(一)：建立標籤選取器-P標籤控制段落文字
- STEP1.
首先就以最簡單的<p>標籤為例，按下CSS設計工具面板上右上角命令按鈕，選擇執行【在頁面中定義】，隨即在來源視窗中顯示<style>
- STEP2.
繼續在【選取器】視窗上按下【+】選擇或輸入p，最後至【屬性】設定視窗上按下【文字】分類，並設定文字相關屬性。
範例練習(二)：建立與套用【類別】選取器
建立可以套用至任何HTML元素的自訂樣式【類別class】。
Class的宣告法，是先放一個句點（.），之後再列出自訂選擇器名稱。設定一個Class選擇器的語法如下：
.【Class 名稱】{
屬性：設定值；
…
} |
- STEP1.
點取一下來源【<style>】，繼續在【選取器】視窗上按下【+】輸入【.font14】(類別名稱自訂)，至【屬性】設定視窗上按下【文字】分類，即可設定文字相關屬性。
- STEP2.
以類別型態新增的CSS樣式，必須選擇套用對象。使用「反選局部文字」或「選取標籤」來進行套用。
 |
| A.反選局部文字套用 反選局部文字套用類別CSS即是新增<span>標籤，並在<span>標籤內加入「class=”名稱” 」，即完成套用，套用後程式碼如下: <span>反選文字內容</span> |
| B.選取標籤套用 選取標籤套用類別CSS，最簡便的文字區塊即是段落「<p>」，選取標籤後由屬性控制版上的目標規則中即可選取要套用的類別型態樣式，套用後該標籤內加入「class=”名稱”」，左下角的標籤也將顯示<p.自訂類別名稱>。 |
 |
套用後程式碼如下:
| <p class=”font14″>段落文字內容</p> |
|
There are no comments.