進階 HTML 語法

第三篇
CSS 基本語法

適合程度： 初學者 一般程度 進階者 以上均宜
學習注意事項：
CSS [Cascading Style Sheet] 串接樣式表，在 HTML 4.0 內經 W3C 認可，適用 IE 3.0 及 NS 4.0 以上版本。
備註：請注意 IE 、 NS 、FF 不同瀏覽器間仍有部份差異。
動態語言 (DHTML) 包含三大要素：HTML、Script (JavaScript、VBscript)、CSS 語言。
適用於：文字、圖片、表格、表單等等標籤，可設定字體大小、行距、間距、連結底線、圖文定位、框線顏色等。
度量單位(尺寸)表示：px=Pixel (像素)、pt=Point (大於 px)，1pt=1/72 英吋、in=Inch、cm=Centimeter。
基本上您必須對 HTML 語法有相當基礎，CSS 將是最佳配角，它可以配合 HTML 來達到多種的效果。
萬一瀏覽器不支持 CSS 語法時，可加入<!-- 　 -->將其內容隱藏起來，直接略過去。
若有多種型式 CSS 併用時，其優先順序為：行內式內崁式 連結式。
您也可以於屬性設定值後加 ! important，表示該項排版樣式，是最高優先權。

樣式使用分類：
一、行內式 (Inlin Style) 排版樣式：(直接定義在原有的 HTML 標籤內)
與 HTML 標籤控制方式類似，影響範圍僅限被涵蓋的區段；同行中用(;)，可加入不同參數 (樣式名稱:設定值)。
不同頁中，也可依須要設定不同排版樣式。
標籤架構：
<tag style="property:value">Document</tage>
<標籤 樣式宣告="樣式名稱:設定值">文件</標籤>
範例：
<font style="font-size: 25pt;color:green">網頁研習室</font>
結果： 網頁研習室
二、內崁式 (Embedding Style) 排版樣式：(定義在 HEAD 標籤內)
排版樣式須放於 <head> 與 </head> 當中，並被 <style type="text/css">..</style> 宣告所包覆起來。
如果要套用到很多個標籤的話，只要用逗號 , 分開就可以了。
然後在 <body>..</body> 內，將預被定義文件以 < 各控制標籤名稱 >..</標籤> 來包覆起來。
標籤架構：
依附標籤：
<style type="text/css">
h2 {CSS語法}
td,p {CSS語法}
</style>
只要在 <body>...</body> 間使用到 <h2>、<td>、<p> 這些標籤，將自動被套用。
【請看範例與結果】

先給名字再呼叫：
<style type="text/css">
.type1 {CSS語法}
.type2 {CSS語法}
</style>
因已經設定命名為 type1 OR type2 (自訂任取)，所以想套用的時候，就用 class 呼叫它。
所以在 <body>...</body> 間，使用 <font class="設定命名">...</font> 標籤內的文件，將會套用到 type1 OR type2 的設定。
【請看範例與結果 01】【請看範例與結果 02】

先給名字再呼叫 (id)：
<style type="text/css">
#case1 {CSS語法}
#case2 {CSS語法}
</style>
因已經設定命名為 .#case1 OR .#case2，要套用的時候，可用 id 呼叫它。
所以在 <body>...</body> 間，使用 <font id="設定命名">...</font> 標籤內的文件。
將會套用到 .#case1 OR .#case2 的設定 (大多用來絕對定位網頁中的物件，以井字號開始，每個只能定義一次)。
及可相互結合使用：
【請看範例與結果】

三、連結式 (Linking Style) 排版樣式：(定義直接寫在外部檔案內)
照內崁式 (Embedding Style) 排版樣式方法，不需要加 <style type="text/css"></style> 標籤，將 CSS 語法存為副檔名 .css。
當我們要呼叫它時，只要在 <head> 與 </head> 當中加入 <link rel="stylesheet" type="text/css" href="links.css> 便可。
<鏈結 相關語="樣式宣告" 型態="文字/串接式排版樣本" 超鏈結="檔案位置與名稱 .css">
【請看範例與結果】

CSS 串接式排版樣本常(實)用屬性及值：
【文字設定】     【背景設定】     【區塊設定】     【框線設定】     【 連結設定】

如何完整取得所有資料：
如果您想完整取得電子報內所有檔案資料，我們提供燒錄光碟片給您 Go 。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。

結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。