串接排版樣式(二)


Embedding Style Sheet介紹
Embedding Style Sheet
這類的樣本設定主要是將排版樣本定義在檔案起始的<HEAD>與</HEAD>之間，使用<STYLE>與</STYLE>標籤來宣稱，且其影響到的排版文字為該檔案之中的內容。其格式及說明如下：
                       <STYLE Type="text/css">
                         Selector1{Property:Value}
                         Selector2{Property:Value}
                          ......
                         SelectorN{Property:Value}
                       </STYLE>
<STYLE>...</STYLE>用來宣告排版樣本的開始與結束。
Type="text/css"Type是用來設定排版樣本的格式，這裡設定為text/css是指定以本文格式的CSS方式來設定。
SelectorN 代表控制標籤的名稱。
Property： 代表排版樣式的名稱，如果有超過一個的排版樣式設定，則在不同的排版樣式之間要以；將其隔開。
Value： 代表排版樣式的設定值。

CLASS定義
其實所謂的CLASS說的白話一點，就像是為你所定義的CSS格式取個名字一樣。在<STYLE>中是以 . 為開頭再加上字串來代表排版樣式的名稱。例如： 
                       <STYLE Type="text/css">
                       <!--
                         .class1{font-size:10pt;color:red}
                         .class2{font-size:20pt;color:green}
                       -->
                       </STYLE>
<!--...-->是用來防止無支援CSS串接式樣本的瀏覽器在解讀時發生錯誤。
.class1宣稱名為class1的CLASS，其字型大小為10pt，顏色為紅色。
.class2宣稱名為class2的CLASS，其字型大小為20pt，顏色為綠色。

宣稱完之後，在一般的控制標籤中再藉由CLASS屬性來設定其排版樣本。例如： 
                       <P  CLASS="class1">這是class1的CSS
                       <H2 CLASS="class2">這是class2的CSS

練習一：CLASS的使用

ID定義
在<STYLE>中是以 # 為開頭再加上字串來代表排版樣式的名稱。例如： 
                       <STYLE Type="text/css">
                       <!--
                         #id1{font-family:"細明體"}
                         #id2{font-family:"Comic Sans MS"}
                       -->
                       </STYLE>
#id1宣稱名為id1的ID，其字型為細明體。
#id2宣稱名為id2的ID，其字型為Comic Sans MS。

宣稱完之後，在一般的控制標籤中再藉由ID屬性來設定其排版樣本。例如： 
                       <H3 ID="id1">這是id1的CSS
                       <H4 ID="id2">這是id2的CSS

練習二：ID的使用

CLASS與ID搭配使用
在前面介紹過CLASS與ID兩種方式來設定排版樣式，這裡舉一個例子說明兩者合用的情況。例如： 
                       <STYLE Type="text/css">
                       <!--
                         .class1{font-size:10pt;color:red}
                         .class2{font-size:20pt;color:green}
                         #id1{font-family:"細明體"}
                         #id2{font-family:"Comic Sans MS"}
                       -->
                       </STYLE>
宣稱完之後，在一般的控制標籤中再藉由CLASS與ID屬性來設定其排版樣本。例如： 
                       <H2 CLASS="class1" ID="id1">
                       <H3 CLASS="class2" ID="id2">

練習三：CLASS與ID的合用


到下一頁