让版面安排更灵活.ppt

第 14 章 讓版面安排更靈活的 Style Sheets 本章提要 甚麼是 Style Sheets？ 定義 Style Sheets 的方法 CSS 在網頁中的使用方式 定義專屬樣式 字型變化與文字排列 Style Sheets 的背景與圖片 網頁內容的方塊結構 表格樣式 CSS 範例介紹 甚麼是 Style Sheets？ 所謂的 Style Sheets (樣式表) 就是一組設定標籤顯示樣式 (Style) 的規則 CSS 目的 讓 HTML 只單純定義文件的結構, 至於視覺上的樣式設定, 則由 CSS 負責 串接的樣式 CSS 中的 Cascading 是指樣式表的設定來源可以有一個以上 網頁的作者、瀏覽器及網頁的瀏覽者皆可指定 HTML 文件使用的樣式表 預設的原則 網頁的作者 網頁的瀏覽者 瀏覽器(避免不同來源的樣式發生互相衝突的情形) 定義 Style Sheets 的方法 1.定義一個標籤中單獨的屬性 Ex：H1 { COLOR：RED} 定義 Style Sheets 的方法 2.定義標籤中的多個屬性 Ex：H1 { COLOR：red; TEXT-ALIGN：center} 定義 Style Sheets 的方法 3.將多個元素定義成相同的屬性 Ex：H1, H2, H3, H4, H5, H6 { COLOR：red} CSS 在網頁中的使用方式 1.在網頁中定義樣式的方法 i.在 HEAD 段落中使用 STYLE 標籤定義樣式表內容 CSS 在網頁中的使用方式 ii.除了 TYPE 屬性外, 在 STYLE 標籤中也可以使用 Media 屬性來設定樣式的應用場合 (此為 CSS2 新增的功能 Media=screen 表示樣式表用於營幕輸出 Media=print 表示樣式表用於印表機等輸出裝置 Media=all 表示所有裝置上都使用此樣式表 iii.在 STYLE 標籤中所做的樣式是對整個文件都有效的 CSS 在網頁中的使用方式 2.定義在外部檔案中 使用此方法的時機 網頁本身過於龐大時 所定義的樣式還要運用到不同的網頁文件時 CSS 定義部分的寫法與前面完全相同, 但副檔名必須是 .css 在 HTML 中使用外部檔案的方式如下： CSS 在網頁中的使用方式 在標籤中使用 STYLE 屬性 如果只想修改某單一標籤屬性時, 則可採用此方法 匯入 Style Sheets 檔案 當樣式衝突時的優先順序 不同的定義層級中, STYLE 屬性 STYLE 標籤 @IMPORT LINK 標籤 在同一個定義層級中, 以最後的設定為主 若有某個屬性值很重要, 且不希望被其它重複宣告的值蓋掉時, 可考慮在屬性值後面加上 ! important 定義專屬樣式 利用不同的選擇器可設定僅供同類標籤中, 特定的幾個或一個標籤所使用的樣式 使用類別選擇器 (Class Selector) 和識別字選擇器 (ID Selector) 可以定義專屬的樣式 定義單一屬性的 CSS 格式： 定義共用的 CLASS 格式： 利用 ID 來定義屬性 除了定義類別外, 還可使用 ID 屬性來定義個別標籤使用的樣式 定義組合式的標籤屬性 設定字型與字體 設定字型與字體 文字排列與大小寫轉換 控制文字的表現方式 清單樣式 在 CSS 中也有 LIST-STYLE-TYPE 屬性可以設定清單 配合 OL 標籤時, 有 Decimal、 Lower-roman 、Upper-roman、Lower-alpha、Upper-alpha 與 None 等 6 種, 預設值為 Decimal Style Sheets 的背景顏色與背景圖片 圖片的變化 設定高度與寬度 (僅對圖片和表格有效) 寬度、高度的屬性為 WIDTH、HEIGHT 設定文繞圖方式 (僅對圖片和表格有效) 文繞圖屬性為 Float 設定值有 Left、Right 與 None 3 種 網頁內容的方塊結構 邊界重疊效應 兩層之間的邊界重疊 在垂直方向上, 若有兩個方塊的邊界碰在一起, 此時兩方塊間的實際邊界大小為其中最大者的邊界 同一層的邊界重疊 設定邊界、邊線 設定邊界 設定邊線 BORDER-COLOR – 邊線顏色 BORDER-WIDTH – 邊線厚度 BORDER-STYLE – 邊線樣式 設定邊距 邊距的設定僅有距離一項, 其屬性為 PADDING, 預設值為 0 表格樣式 固定表格配置 table-layout 屬性是用來設定瀏覽器在繪製表格時的方式, 若將值設為 fixed, 則瀏覽器會以 fixed table layout 演算法來繪製表格, 此時不需等表格全部的資料被載入,