CSS层级式样式表.ppt

第14章 CSS層級式樣式表 14-1 CSS的基礎 14-2 FrontPage的樣式編輯 14-3 文字內容的絕對位置樣式 14-4 圖片的絕對位置編排 14-1 CSS的基礎 14-1-1 什麼是CSS 14-1-2 CSS的基本語法 14-1-1 什麼是CSS CSS Level 1規格是在1996年12月公佈，Internet Explorer 3.0或以上的版本都支援此規格，接著在1998年5月推出Level 2規格，不過目前Internet Explorer 5.x版本也都沒有完全支援，只有支援部分的樣式規格。 簡單的說，CSS的目的是在定義HTML標籤的樣式，舉個例子來說，HTML標籤p標示文字段落，預設使用瀏覽程式的字體與字型大小，如果使用CSS就能夠重新定義p標籤的樣式，如下所示： style type=text/css p { font-size: 10pt; color: red; } /style 14-1-2 CSS的基本語法 HTML標籤配合CSS樣式能夠針對指定的標籤定義全新的樣式，只需選擇好需要重新定義的HTML標籤，就可以定義所需的樣式，如下所示： Selector {property1: value1; property2: value2} 上述CSS語法的前方為選擇器Selector選擇套用樣式的標籤，Selector可以定義那些HTML標籤需要套用樣式，CSS Level 1擁有基本的選擇器Type、Descendant和Grouping，在CSS Level 2提供更多種的選擇器，例如：屬性條件的選擇。 14-2 FrontPage的樣式編輯 14-2-1 建立內嵌式樣式 14-2-2 套用內嵌式樣式 14-2-3 建立外部樣式檔案 14-2-4 連結外部樣式表檔案 14-2-1 建立內嵌式樣式 FrontPage的內嵌式樣式是直接插在網頁文件中，然後套用在網頁中的HTML標籤，因為是內嵌在網頁，所以使用範圍僅限於樣式所在的網頁。 14-2-2 套用內嵌式樣式 在新增好網頁的內嵌式樣式後，在此網頁就可以選擇文字內容套用新增的樣式。 14-2-3 建立外部樣式檔案 FrontPage可以將建立好的樣式表儲存成一個外部檔案，然後設定網頁連結外部樣式表，直接套用外部樣式檔案內的樣式指令。 14-2-4 連結外部樣式表檔案 在建立好外部樣式表檔案後，我們可以將樣式表檔案套用在網站的所有網頁或只有選取的網頁。 14-3 文字內容的絕對位置樣式 14-3-1 設定絕對位置的定位樣式 14-3-2 設定圖層順序 14-3-1 設定絕對位置的定位樣式 在FrontPage只需選取文字內容，然後執行「格式/位置」指令，就可以設定定位樣式，選取文字就成為浮在文字內容上的文字方塊。 14-3-2 設定圖層順序 如果將文字方塊重疊編排後，此時顯示的前後順序是「位置」對話方塊的【圖層順序】欄位。 14-4 圖片的絕對位置編排 14-4-1 圖片的絕對位置編排 14-4-2 圖片上推一層 14-4-3 圖片後推一層 14-4-1 圖片的絕對位置編排 在「圖片」工具列擁有【絕對位置】鈕，可以將圖片設定成絕對位置編排。 14-4-2 圖片上推一層 如果網頁擁有多張圖片疊在一起，我們可以使用「圖片」工具列的【上推一層】鈕調整圖片的順序，將圖片往上推一層。 14-4-3 圖片後推一層 如果網頁擁有多張圖片疊在一起，我們可以使用「圖片」工具列的【後推一層】鈕調整圖片順序，將圖片往後推一層。 * *