1、1,Introduction to CSS,授課教師: 李彥賢,2,CSS 的功能 使用CSS (Cascading Style Sheet, 階層樣式表)的主要目的在於將文件的結構(利用HTML或其他相關語言撰寫)與文件的顯示(CSS)分隔開來。 文件作者或瀏覽者都可以透過建立樣式表來設定文件的顏色、字體、排版等顯示特性。 使用CSS 的優點 文件結構簡化: 撰寫HTML時可以不用考慮顯示樣式, 決定文件內容與顯示位置後, 可套用樣式表來進行排版顯示 文件結構靈活: 可將樣式表套用到所有文件, 不需因為網站或文件結構修正, 而對所有文件進行修改 作者或讀者可決定文件的顯示樣式 文件可讀性提高
2、,CSS 簡介,3,CSS 簡介(續),CSS 來源 作者樣式 可在HTML標籤的style屬性中使用CCS, 用於特定宣告 可將CCS撰寫在HTML文件中 可在HTML文件中宣告套用外部的CCS文件 讀者樣式 讀者可在瀏覽器內設定閱讀網頁時所要套用的CSS文件。這個CSS文件可用在所有的HTML文件上。 瀏覽器樣式 瀏覽器本身會有一個內定的樣式表, 當上述兩者都未套用樣式表時, 瀏覽器起用該內定樣式表 上述三種來源發生衝突時, 瀏覽器採用的先後順序為作者樣式,讀者樣式, 最後為瀏覽器樣式,4,CSS 語法,CSS的語法大體上與HTML語法相似, 一個利用CCS基本語法定義的樣式中通常包含 標
3、籤名稱, 又稱為選擇器(selector), “通常“標籤名稱為所要設定樣式的HTML標籤名稱。選擇器可以有一個或多個(同時定義多個標籤的樣式)。當有多個選擇器時必須以逗號“,”來作區隔 在選擇器之後會接著大括號, 大括號中則指出所要設定選擇器的哪些屬性以及屬性值, 以冒號“:”來區隔屬性與屬性值, 以分號“;”則用來區隔多個屬性 設定文字顏色 h1 color: #ffffff; h2, h3, h4 color: #f0f0f0; background-color: blue,5,CSS 語法(續),CSS除了可以對HTML標籤重新定義其樣式外, 還可定義類別樣式(class)或ID樣式供
4、所有的HTML標籤呼叫套用, 讓多個需要相同樣式的標籤, 不需被一一重新定義 類別樣式與ID樣式作用相同, 兩者只在宣告方式, 以及標籤呼叫套用方法上稍有差異 類別樣式宣告方式 .cons color: #f0f0f0 ID樣式宣告方式 #cons color: #f0f0f0,6,CSS 語法(續),若要將類別樣式或ID樣式設限為只能讓某個標籤使用, 或是想為同一標籤定義不同樣式時, 可利用以下方式宣告 類別樣式宣告方式 h1.con1 color: #f0f0f0 h1.con2 color: #0f0f0f ID樣式宣告方式 h1#con1 color: #f0f0f0 h1#con2
5、color: #0f0f0f 以上的宣告表示con1與con2只能被h1標籤呼叫套用, 至於最後h1使用那個樣式, 則需在h1標籤中進行設定,7,CSS 語法(續),CSS進階語法 p i color: #ffffff: 表示只在標籤位於標籤內時, 標籤才套用該樣式 .con i color: #ffffff:表示只在標籤位於con類別樣式的範圍內時, 標籤才套用該樣式p:first-line color: #ffffff or p:first-letter color: #ffffff: first-line及first-letter稱為虛擬元素, 只能用於Block層級的標籤, 像是標題,
6、 段落等標籤 a:link color: red, a:visited color: blue, a:hover color: green, and a:active color: purple: “:link”等稱為虛擬類別, CSS無法詳細定義到連結標籤的狀態, 因此需利用此方式來分別設定,8,如何在網頁中使用CSS,HTML文件中三種呼叫使用樣式的方法 第一種方法是直接在HTML標籤的style屬性中撰寫CSS, 此方式只能影響該標籤, 在同一份HTML文件中不管標籤名稱是否相同, 都不會受到影響。例如HTML文件中有兩個標籤, 第一個標籤宣告為test1, 第二個標籤只宣告為test2
7、, 在此宣告方式下, 第一個標籤的樣式將不會被套用到第二個標籤中,9,如何在網頁中使用CSS (續),HTML文件中三種呼叫使用樣式的方法 (續) 第二種方法可分為兩部分, 第一部份是將所有定義的樣式放置於 標籤中, 如下例中定義h1樣式, con1類別樣式, 以及 con2 ID樣式標籤必須放置於標籤之中 利用標籤將樣式內容包起來, 以免瀏覽器不支援CSS時發生錯誤,10,如何在網頁中使用CSS (續),HTML文件中三種呼叫使用樣式的方法 (續) 第二部分為呼叫使用, 可分三種情況 若樣式為HTML標籤的重新定義, 直接使用該標籤時, 重新定義的樣式就會被直接套用 若樣式為類別樣式時, 需
8、在呼叫使用的標籤中的class屬性指定所要使用的類別樣式, 例如 若樣式為ID樣式時, 需在呼叫使用的標籤中的id屬性指定所要使用的ID樣式, 例如 重新定義標籤樣式的樣式宣告方法將會重新定義整個HTML文件中相同名稱的標籤,11,如何在網頁中使用CSS (續),HTML文件中三種呼叫使用樣式的方法 (續) 第三種方式則是將樣式定義全部寫入外部CSS檔案, 再匯入(連結)至HTML文件中, 兩種方法說明如下利用標籤連結CSS檔案, 例如 標籤中利用import將檔案匯入HTML文件中, 例如 import url(01.css) 在文件主體中呼叫使用樣式的方式則和前述的第二種方法相同, 需視定
9、義的樣式為何來決定套用方式 匯入外部檔的方式適用於希望統一網站的網頁風格時, 因為透過簡單的方式就可讓所有網頁套用相同的格式, 而且經由修改外部CSS檔案, 就可以同時改變所有網頁的格式,12,CSS補充說明,若讀者希望自行定義的樣式的優先權能高於作者的樣式時, 則需在該樣式內加入!important, 例如 h1 color: #ffffff !important, 則瀏覽器會優先套用該樣式 部分HTML標籤無法使用ID樣式, 包括, , , , 等, 因此建議多使用類別樣式來定義樣式 CSS中可將註解文字放置於“/* */”之中 http:/jigsaw.w3.org/css-validator/ 此網站為W3C提供, 可校驗網頁中的CSS語法是否正確,13,實作練習,請練習課本562頁的習題1, 2, 3, 4, 5,
