CG 數位學習網線上教學Dreamweaver 教學14 CSS 串接樣式表

推到 FaceBook 推到 Plurk 推到 Twitter
 

CSS ( Cascading Style Sheets ) 稱為 串接樣式表 或是 階層式樣式表。主要的用途是控制網頁內容的外觀,提供傳統 HTML 無法達成的方式來設定文字格式及定位,對網頁內容外觀能提供完整的控制能力,例如可以用像素為單位設定字體大小,以及設定字元間距、行距、段落間距、縮排定位等,可讓網頁的版面編排更精確。

CSS 帶給網頁設計者的另一項優點是容易管理,由於傳統 HTML 設計網頁是在網頁中設定樣式,若是網站包含數量很多的網頁時,編輯樣式可能需要不多時間。而 CSS 規則允許將樣式儲存在一個外部的樣式表檔案,只要以讓所有的網頁連結到外部樣式表,當您更新樣式時,連結到此樣式表的網頁內容就會同時更新,可以大幅縮短網頁維護的時間。CSS 規則依存放的位置不同,可分為 內部樣式表外部樣式表,請參考以下說明:

內部樣式表

又稱為內嵌樣式表,內部樣式表是將 CSS 規則直接寫在 HTML 網頁 <head> 檔頭區段的 <style> </style> 標籤,語法範例:

  <style type="text/css">

  <!--

  body {

    background-color: #000;

  }

  -->

  </style>

在 Dreamweaver 新增內部 CSS 樣式時,請選擇定義在「只有此文件」。內部樣式表只適用於同一個網頁的內容,但可將內部樣式表轉存為外部樣式表,點選功能表 [ 檔案 > 轉存 > CSS 樣式 ] 即可轉存樣式以供其他網頁使用。

外部樣式表

外部樣式表是將樣式儲存在獨立的外部檔案,並非直接儲存在 HTML 網頁。外部樣式表是獨立的文字檔,網頁使用 head 區段的 <link> 標籤或是 @import 規則連結到外部樣式表。

  連結語法 <link rel="stylesheet" href="style.css" type="text/css" / >

外部樣式表可包含多個樣式,並可以讓一到多個網頁連結,使用 Dreamweaver 初次定義外部樣式表時,請選擇「定義在:新增樣式表檔」,稍後定義其他樣式時,即可在下拉選單選擇已儲存的外部樣式表。

網頁的初始狀態沒有任何樣式 修改文字屬性時自動新增樣式

您可以套用多個樣式到同一個元素或網頁。例如,您可以建立一個 CSS 規則以套用顏色,然後建立另一個規則以套用邊界,最後將這兩個規則套用到網頁上相同的文字。而定義的樣式會「重疊」於網頁的元素下,最後建立您要的設計。

您可以在 Dreamweaver 中定義下列規則類型:

自訂 CSS 規則也稱為「類別樣式」,可以讓您將樣式屬性套用到任何文字範圍或區塊。所有類別樣式的開頭都是句點 (.)。例如,您可以建立一個類別樣式叫做 .red,將規則的 color 屬性設定為 red,再將樣式套用至已設定樣式之段落文字的一部分。
HTML 標籤規則會重新定義特定標籤 (例如 p 或 h1) 的格式。當您建立或變更 h1 標籤的 CSS 規則時,所有以 h1 標籤格式化的文字都會立即更新。
CSS 選取器規則 (進階樣式) 會為特定元素組合或其他 CSS 允許的選取器形式重新定義格式 (例如每當 h2 標題出現在表格儲存格內時,便會套用選取器 td h2)。進階樣式也會重新定義包含特定 id 屬性之標籤的格式 (例如,由 #myStyle 定義的樣式會套用至內含 id="myStyle" 屬性-值配對的所有標籤)。

建立新的樣式表
首先,您會建立一個外部樣式表,內含會定義段落文字樣式的 CSS 規則。當您在外部樣式表中建立樣式時,便可以從中央位置控制多個網頁的外觀,而不必在每個個別網頁上設定樣式。

行內樣式是使用整份 HTML 文件內的特定標籤實體加以定義。例如,<p style="font-size:9px"> 只會為以內含行內樣式之標籤設定格式的段落定義字體大小。

Dreamweaver 會呈現大部分您套用的樣式屬性並在「文件」視窗中顯示它們。您也可以在瀏覽器視窗中預覽文件,查看樣式套用的情況。有些 CSS 樣式屬性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中所呈現出來的不一樣。

附加樣式表

當您將樣式表附加至網頁時,樣式表中所定義的規則會套用至頁面上對應的元素。例如,將 cafe_townsend.css 樣式表附加至 index.html 頁面時,所有的段落文字 (HTML 程式碼中以 <p> 標籤設定格式的文字) 都是根據您定義的 CSS 規則設定格式的。

背景

背景顏色 ( Background-color) :設定元素的背景顏色。
背景影像 ( Background-image ) :設定元素的背景影像。
重複 ( Background-repeat ) :設定背景影像的重複顯示方式。
附件 ( Background-attachment ) :設定背景影像隨內容捲動或是固定位置。

區塊

單字間距 ( Word-spacing ) :設定文字元素的單字間距。
字母間距 ( Letter-spacing ) : 設定文字元素的字元間距。
垂直對齊 ( Vertical-align ) : 設定文字元素的垂直對齊。
文字對齊 ( Text-align ) : 設定文字元素的對齊方式。
文字縮排 ( Text-indent ) : 設定文字元素的第一行縮排。
空白 ( white-space ) : 設定元素內的空白處理方式。
顯示 ( Display ) : 設定是否顯示元素,若選擇 none 則隱藏該元素。

方框

寬 ( Width ) 、 高 ( Height ) :設定元素的寬度與高度。

浮動 ( Float ) : 。

清除 ( Clear ) : 。

欄位間隔 ( Padding ) : 。

邊界 ( Mergin ) : 。

邊框

設定表格或文字欄位的邊框樣式、寬度、顏色。取消「全部一樣」選項後,即可針對元素的上、下、左、右進行個別設定。

樣式 ( Style ) : 設定元素的邊框樣式,可選擇實線、虛線、點狀線等樣式。

寬度 ( Width ) : 設定元素的邊框寬度。

顏色 ( Color ) : 設定元素的邊框顏色。

清單

用於設定項目類型、項目符號影像與位置。

類型 ( List-style-type ) : 設定項目符號的外觀。

項目符號影像 ( List-style-image ) : 設定項目符號的自訂影像。

位置 ( List-style-Position ) : 設定項目符號的換行與縮排。

定位

類型 ( Position ) :設定元素在瀏覽器頁面上的位置,可選擇以下類型:

 絕對位置 ( absolute ) 。

 相對位置 ( relative ) 。

 固定 ( fixed ) 。

 靜態 ( static ) 。

寬 ( Width ) 、高 ( Height ) : 。

顯示 ( Visibility ) : 。

Z 軸 ( Z-Index ) : 設定元素顯示的前後順序。

溢位 ( Overflow ) : 設定容器裝載的內容超出範圍時的顯示方式。

置入 ( Placement ) : 設定元素與瀏覽器邊緣的上下左右距離。

裁切 ( Clip ) : 設定元素的顯示與裁切區域。

擴充功能

CSS 可以改變滑鼠游標外觀或是在影像套用特殊效果,但在 Dreamweaver 的設計檢視模式下無法顯示特殊效果,必須將網頁儲存後透過瀏覽器檢視。

Dreamweaver 並未提供互動式的編輯工具讓使用者設定視覺效果中的篩選器,使用時請務必自行輸入參數,請參考下方範例。

提示: CSS 樣式中的「篩選器」是由 Filter 這個名詞翻譯而來,Kelvin 老師認為或許改用「效果」或「濾鏡」比較適合。

Blue 模糊效果

filter: Blue:(Add=數值, Director=數值, Strength=數值);

Add: 0, 1, 2

Director: 設定模糊的方向( 0 度為向上,90 度為向右,180 度為向下,270 度為向左)

Strength: 設定模糊的程度

DropShadow 下落式陰影效果

filter: DropShadow(Color=顏色值, OffX=數值, OffY=數值, Positive=數值);

Color: 設定陰影的顏色,可使用顏色名稱或代碼(例如 Black 或 #000000)

OffX: 設定陰影的水平偏移距離

OffY: 設定垂直偏移距離

Positive: 。

Glow 發光效果

filter: Glow(Color=顏色值, Strength=數值);

Color: 設定光暈的顏色可使用顏色名稱或代碼(例如 Red 或 #FF0000)

Strength: 設定光暈的範圍

Wave 波浪效果

filter: Wave(Add=數值, Freq=數值, LightStrength=數值, Phase=數值, Strength=數值);

。。。。。。

 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
 
3ds Max 教學Photoshop教學Dreamweaver教學Flash教學Illustrator教學CorelDRAW教學Painter教學
 
CG 數 位 學 習 網 版 權 所 有 . 未 經 許 可 嚴 禁 轉 載
最 佳 瀏 覽 解 析 度 1024 x 768 . 建 議 使 用 IE 瀏 覽
本 站 為 經 濟 部 認 證 資 訊 透 明 化 信 賴 電 子 商 店