阶层式样式表.PPT

Cascading Style Sheet – 階層樣式表 CSS的基礎 樣式表的階層 樣式的格式 選擇器的格式 屬性值的格式 字型屬性 文字的對齊 清單屬性 背景與顏色 箱型模組 美化網頁與超連結的設定 區塊元件: span及div CSS的簡介-什麼是CSS CSS的英文全名為Cascading Style Sheet，譯為階層樣式表。在網頁來說，像文字的大小、顏色以及圖片位置等，都是網頁呈現資料的樣式。 階層 – 意指當我們HTML文件中，引用數個定義樣式的樣式檔（css檔）時，若數個樣式檔間所定義的樣式發生衝突，將依據階層順序（cascading order）處理， 內部的樣式有較高的優先。 CSS控制資料顯示格式的方式，是透過許多已經完成功能定義的樣式屬性，如：字型大小、段落控制等。並將幾個樣式屬性，定義為一組可套用於任一段資料的選擇器（selector）。 CSS的簡介 CSS的優點 一組樣式可以套用在多個物件上 語法易學易懂 豐富的樣式效果 支援CSS的瀏覽器 瀏覽器，對CSS所支援的樣式並不完全相同。所以對於設計好的樣式表，瀏覽器通常僅會讀取其看得懂的部份，對於那些看不懂的語法，將直接略過不顯示效果。 CSS文件的應用 CSS文件的副檔名則為(.css) CSS的簡介 CSS1的規格在1996年被發展出來 CSS2在1998年出版 CSS3正在發展中 CSS提供控制及更改HTML文件呈現的方法 CSS並不是HTML但可放在HTML文件內 樣式表允許將整個文件或一堆文件, 套用標準的樣式 樣式表是以標籤的屬性值來規範 樣式表的階層 在CSS的規格裡，可以使用三種不同的階層，將樣式表的功能加入網頁內，讓網頁顯得更多采多姿。方法如下： 內嵌式(inline) – 直接定義標籤的STYLE屬性 文件層(document-level)樣式表 – 套用整個文件 外掛(external)樣式表 – 可套用在好幾個文件 當有多個樣式表套用在同一個標籤上, 最內部的標籤優先 瀏覽器會從內而外找尋套用的樣式表 樣式表的階層 內嵌式樣式表出現在標籤內 文件層樣式表出現在文件的標頭部份 外部樣式表在分開的檔案內, 也可能在網際網路上的任何伺服器 寫成以MIME格式為text/css的文字檔 link標籤是用來指定瀏覽器取用外部樣式表 link rel = stylesheet type = text/css href = /termpaper.css /link 外部樣式表可以在 /css-validator/validator-upload.html 驗證 樣式表的格式 樣式表的格式依樣式表的階層而有所不同 內嵌式樣式表 在HTML標籤內，插入style屬性，定義要顯示的樣式 格式如下： 標籤名稱 style = 樣式屬性: 屬性值; 樣式屬性:屬性值; … 文件層樣式表 樣式表為於style標籤內的一組規則 style標籤內的type屬性必須設為text/css 規則必須放在HTML的註解內(!-- …. --, 因為CSS不是HTML 樣式表內註解的格式為/*…*/ 樣式表的格式 文件層樣式表格式: style type= text/css !-- 選擇器1{樣式屬性：屬性值； 樣式屬性：屬性值；……. } /*註解內容*/ 選擇器2{樣式屬性：屬性值； 樣式屬性：屬性值；……. } …… 選擇器N{樣式屬性：屬性值； 樣式屬性：屬性值；……. } -- /style 外掛樣式表: 樣式表為獨立的檔案 文件層樣式表 – 範例 下面的敘述，將利用style元素，把CSS內h1與h2選擇器之樣式，分別定義為『標楷體、紅色』與『華康粗明體、藍色』。而/*…*/符號內包夾的文字將不會被引用或顯示於網頁中。 選擇器(Selector)的格式 單一(simple)選擇器的格式 選擇器是標籤名稱或一組由逗號分隔的標籤名稱 例: h1, h3, p 內文選擇器: ol, li 類別(class)選擇器 通常允許同樣標記在不同的情況下使用不同的樣式規格 樣式類別的名稱附屬於標記名稱 例: p.narrow {樣式屬性/屬性值 名單} p.wide {樣式屬性/屬性值 名單} 標記以class屬性指定類別的名稱 例: p class = narrow ... /p ... p class = wide ... /p 類別(class)選擇器 – 範例 下面的範例，將在HTML內引用p標籤之a1與a2的類別樣式，分別定義為『標楷體、紅色』與『華康粗明