Transcript CSS 樣式
認識HTML 與 CSS 認識 HTML 程式碼檢視 HTML (Hyper Text Markup Language), 一種 用來描述網頁結構的語法 由 "<" 與 ">" 包在一起的就稱為『標籤』 認識 HTML 認識 HTML 開啟一個新的html 切換到分割模式 設計檢視編輯區的左上角有個插入點不 斷閃爍, 可發現程式碼檢視編輯區中的 <body> 與 </body> 之間也會有一個插入 點 認識 HTML 認識 HTML 程式碼最開頭的 <!DOCTYPE…> 標籤是用來告訴瀏覽器此網頁所使用的 xhtml 的版本, <html xmlns_=“http_://www.w3.org/1999/xhtml”> 表示此網 頁是使用 xhtml, <head> 與 </head> 之間則是用來放置網頁編碼方式與標 題相關的程式碼。這幾行在開啟新網頁時即會自動產生, 但不會顯示在網 頁畫面中。 請在設計檢視編輯區輸入 "Dreamweaver", 可發現程 式碼檢視編輯區中的 <body>與 </body> 之間也會出 現剛剛輸入的文字；再按下 鍵 (Windows) / 鍵 (Mac), 可看到 HTML 中的文字會被 <p> 與 </p> 標籤包圍起來, 代表為一個段落。 認識 HTML 認識 HTML 只要將元素選取起來 (或將插入點置於元素中), 然後透過編輯 區下方的狀態列即可檢視該元素隸屬的標籤。 認識 CSS 已知網頁是由 HTML 所構成 HTML 標籤的變化有限 例如:開啟一個新網頁, 背景一定是白色、輸 入的文字都是黑色、設定超連結的文字則會 變成藍色並帶有底線、…等。 若要做出精美的網頁, 就必須依網站風格做 視覺上的調整。 W3C 協會頒布了一套 CSS 規則, 用來擴展 HTML 的功能, 使設計者可以更彈性地編排網 頁。 認識 CSS CSS 的全名為 Cascading Style Sheets(串接樣式表), 是一 種用來描述網頁外觀樣式的語法 可重新定義 HTML 標籤原有的樣式 可自行定義規則並套用在 HTML 標籤上, 讓相同的 HTML 標籤擁有不同的樣式效果 透過 CSS 豐富靈活的設定, 我們就能跳脫傳統 HTML 的束縛, 設計出更有變化的網頁。 認識 CSS 認識 CSS 使用 Dreamweaver 設計網頁的過程中, 經 常需要運用 CSS 來改變版面的視覺呈現 控制文字的字體、字級、顏色、粗體、底 線、…等； 其他各類網頁元素亦可用 CSS 來控制 設定邊框或背景色、決定元素的位置、…等, 全 部交給 CSS 也沒問題！ 建立與套用 CSS 樣式 在 Dreamweaver 中要建立新的 CSS 樣式, 只要 先在新增 CSS 規則交談窗中選擇CSS 的類型 及儲存位置後, 按下確定鈕即可開啟 CSS 規則 定義交談窗來進行樣式設定。 建立與套用 CSS 樣式 開啟新增 CSS 規則交談窗的方法有以下 3種 方法 1–透過「屬性」面板：選取文字或是將 插入點置於文件中的任意位置 (未選取任何 元素), 將屬性面板切換成 CSS, 接著下拉目 標規則列示窗選擇新增 CSS 規則項目, 再按 下編輯規則鈕即可 (若變更字體、大小欄位 的設定, 也會開啟 CSS 規則定義交談窗)。 建立與套用 CSS 樣式 建立與套用 CSS 樣式 方法 2–透過「CSS 樣式」面板：將插入點置於文 件中的任意位置, 然後按下 CSS 樣式面板中的新增 CSS規則鈕 。 若在工作區中沒有看見 CSS 樣式面板, 可執行 『視窗/CSS 樣式』命令。 建立與套用 CSS 樣式 方法 3–透過『格式』功能表：將插入點置於 文件中的任意位置, 然後執行『格式/CSS 樣 式/開新檔案』命令。 建立與套用 CSS 樣式 建立與套用 CSS 樣式 「類別」樣式–可重複套用到元素上 1. 當某個樣式經常需要重複使用時, 便可 選擇類別類型, 方便將樣式外觀重複套 用到多個網頁元素上。 請按下 CSS 樣式面板中的新增 CSS 規則鈕 開啟新增 CSS 規則交談窗, 下拉選取器類型列 示窗選擇類別, 然後在選取器名稱欄中輸入自 訂的類別名稱 (可包含任何英文字母和數字, 但不可使用中文及空格)： 「類別」樣式–可重複套用到元 素上 「類別」樣式–可重複套用到元 素上 2. 按下確定鈕後會出現 CSS 規則定義交談 窗, 在這裡我們設定文字的字體、粗體、 斜體、大小和顏色 (詳細設定說明請參 考第 3-3 節)： 「類別」樣式–可重複套用到元 素上 「類別」樣式–可重複套用到元 素上 3. 設定完畢後按下確定鈕回到編輯區, 此時 CSS樣式面 板及屬性面板的類別列示窗內, 就會多出剛剛建立的 類別樣式了： 「類別」樣式–可重複套用到元 素上 「類別」樣式–可重複套用到元 素上 4. 自訂類別樣式後, 必須將樣式套用到網 頁元素上, 這樣 CSS 樣式才知道要對 「誰」產生作用。要套用類別樣式很簡 單, 只要先選取元素, 再下拉屬性面板中 的類別列示窗從中選擇即可。 「類別」樣式–可重複套用到元素上 「類別」樣式–可重複套用到元素上 「類別」樣式–可重複套用到元 素上 若想讓其他價格數目都套用 .price1 樣式, 只要比照步驟 4 的方法, 一一選取並套用 就可以了。 「ID」樣式–用來控制單一元素 1. 類別樣式可重複套用到不同的網頁元素上, 但 如果想要賦予某個元素獨一無二的樣式,則建 議自訂 ID 樣式, 它的作用就好比身分證號碼, 可以清楚做為識別區分的依據喔！ 請接續上例, 按下 CSS 樣式面板中的新增 CSS 規則鈕 開啟新增 CSS 規則交談窗, 下拉 選取器類型列示窗選擇 ID, 然後在選取器名 稱欄中輸入自訂的 ID 名稱 (可包含任何英文 字母和數字, 但不可使用中文及空格)： 「ID」樣式–用來控制單一元素 「ID」樣式–用來控制單一元素 2. 按下確定鈕後會出現 CSS 規則定義交談窗, 在這裡我 們設定文字的字體、粗體、斜體、大小和顏色： 「ID」樣式–用來控制單一元素 3. 回到編輯區後, CSS 樣式面板及屬性面板的 ID 列 示窗內, 就會多出剛剛建立的 ID 樣式了： 「ID」樣式–用來控制單一元素 4. ID 樣式與類別樣式相同, 必須經過套用 才可產生作用。要套用 ID 樣式, 可在選 取元素後下拉屬性面板的 ID 列示窗從 中選擇, 或是直接在 ID 欄中輸入欲套用 的 ID 樣式名稱： 「ID」樣式–用來控制單一元素 移除已套用的類別樣式與 ID 樣 式 如果要移除套用到元素上的類別樣式與 ID 樣式, 只要下拉屬性面板的類別或 ID 列示窗選擇無項目, 或是將 ID 欄內的名 稱刪除即可。 「標籤」樣式–重新定義 HTML 元素 網頁是由 HTML 標籤所構成, 若想一次變更所有相同標籤的樣式, 例如：所有圖片 (<img>) 都加上邊框、所有段落文字 (<p>) 都變 成白色襯黑底的樣式、所有表格的儲存格 (<td>) 都有橘色虛 線、…等, 便可選擇標籤類型去重新定義 HTML 標籤的樣式。 繼續上例, 目前設有超連結的文字呈現藍色有底線的樣式, 假設希 望一次改變所有超連結的樣式, 則可重新定義 HTML 標籤。不過 在這之前, 你必須知道怎麼判斷標籤, 例如要修改超連結, 則是要修 改 <a> 標籤。若無法直接判斷也沒關係, 還記得第 3-4 頁提過的嗎？ 別忘了善用狀態列的標籤提示喔！請如下操作： 「標籤」樣式–重新定義 HTML 元素 1. 請先將插入點置於任一個超連結中, 此時狀態列會出現標 籤提示, 位於最後面的便是指標所在的元素標籤。 「標籤」樣式–重新定義 HTML 元素 2. 接著按下 CSS 樣式面板中的新增 CSS 規則鈕 開啟新增 CSS 規則交談窗, 下拉 選取器類型列示窗選擇標籤, 由於剛剛 已經事先將插入點置於超連結中, 因此 Dreamweaver 會自動幫你選好插入點所 在的標籤。 「標籤」樣式–重新定義 HTML 元素 「標籤」樣式–重新定義 HTML 元素 3. 接著於 CSS 規則定義交談窗的字型頁次 如下圖做設定, 讓超連結文字變成灰色、 沒有底線, 按下確定鈕後, 網頁中所有的 超連結 (<a>) 就會全部變成設定的樣式 了。 「標籤」樣式–重新定義 HTML 元素 「標籤」樣式–重新定義 HTML 元素 「複合」樣式–可套用到特定的 元素上 1. 如果希望 CSS 樣式可以套用在特定的元素上, 例如剛 剛我們重新定義了超連結 (<a>標籤) 的樣式, 而網頁 中左、右兩個表格中都有超連結, 假設希望左邊表格 的超連結與右邊的不同, 除了新增類別樣式加以套用 外, 你也可利用複合樣式來達成目的喔！ 請先將插入點置於左邊表格的任一超連結中, 接著按 下 CSS 樣式面板中的新增 CSS 規則鈕 開啟新增 CSS 規則交談窗, 下拉選取器類型列示窗選擇複合, 選取器 名稱欄會自動產生插入點所在位置的詳細標籤架構, 你可以直接套用設定, 也可自行根據需求調整套用的 目標元素。 「複合」樣式–可套用到特定的 元素上 「複合」樣式–可套用到特定的 元素上 2. 按下較不特定鈕, 可逐一減少樣式名稱, 以放 寬鎖定範圍, 例如目前為 "#table1 trtda" (_ID 名稱為 "table1"的表格中各列儲存格內的連結), 若按一下較不特定鈕, 則會變成 "trtda" (所有 表格中各列儲存格內的連結), 以此類推；反之, 若要逐一恢復, 則按下較為特定鈕。 接著於 CSS 規則定義交談窗的字型頁次變更 文字顏色為 "#FEA710" 的橘色, 按下確定鈕後, ID 名稱為 "table1" 的表格中的超連結 (<a>) 就 會全部變成橘色了,而右邊表格則完全不受影 響。 「複合」樣式–可套用到特定的 元素上 「複合」樣式–可套用到特定的 元素上 「複合」樣式–可套用到特定的 元素上 最後再將上述 4 種 CSS 樣式類型的使用 時機整理如下, 請務必多多練習並熟悉這 些用法, 往後在使用 CSS 時才能更加得心 應手且有效率喔！ 檢視已套用的 CSS 樣式 當網頁架構越來越複雜時, 你可能已經搞 不清楚哪些地方套用了什麼樣式；或是 有些套用過的樣式, 可能又加上了其他樣 式。 這時候你可以將插入點移到要查看的地 方 (或選取起來), 然後在 CSS 樣式面板中 切換到目前頁次來查看。 檢視已套用的 CSS 樣式 檢視已套用的 CSS 樣式 檢視已套用的 CSS 樣式 有刪除線的標籤不代表有錯誤, 只是提醒 設計者有屬性衝突而己,表示改屬性對該 元素不會產生作用, 所以就會以刪除線標 示。 編輯與刪除 CSS 樣式 已經定義好的 CSS 樣式還是可以修改的, 除了直接在 CSS 樣式面板下方的屬性明 細中做修改, 你也可以在 CSS 樣式面板 的全部頁次中雙按要修改的樣式, 即可開 啟 CSS 規則定義交談窗進行修改 (或選 取樣式後, 按下面板中的編輯樣式鈕 )： 編輯與刪除 CSS 樣式 編輯與刪除 CSS 樣式 樣式修改後, 所有套用該樣式的網頁元素 便會同步變更為修改後的樣式, 你不必逐 一去修改還怕漏掉, 這也是使用 CSS 樣式 最大的好處之一 而若要刪除某個已用不到的 CSS 樣式, 可 在選取該樣式後, 按下 CSS 樣式面板的 刪除 CSS 規則鈕 即可, 若是網頁中有套 用到該樣式, 那麼已套用的部份即會自動 清除套用的效果。 「字型」頁次–設定文字樣式 可設定文字的大小、字型、顏色、行距、 底線狀態、…等樣式。 「字型」頁次–設定文字樣式 1. 在 Ex03-03.html 網頁中, 大部分的內文 都是套用段落格式 (<p>), 而目前的字體 外觀略顯粗糙, 因此首先來變更段落的 樣式。請按下 CSS 樣式面板中的新增 CSS 規則鈕 開啟新增 CSS 規則交談窗： 「字型」頁次–設定文字樣式 「字型」頁次–設定文字樣式 2. 開啟 CSS 規則定義交談窗後, 切換到字型頁次, 如圖進行 <p> 標籤的屬性設定： CS3版本的CSS規則定義表 「字型」頁次–設定文字樣式 3. CS4 版本之前的 CSS 屬性名稱是顯示中文, 不過因為 CSS 語法實際上是以英文來撰寫屬性設定, 因此 CS4 版本可能是為了避免使用者混淆, 而直接將屬性名稱 以英文來表示。若想要了解各個屬性的詳細作用, 可 按下交談窗中的說明鈕, 開啟線上的說明文件來查詢。 設定好後按下確定鈕回到編輯區, 網頁 中的段落文字都會變成剛剛設定的樣式： 「字型」頁次–設定文字樣式 單位選項說明 字型樣式的 font-size (文字大小) 與 lineheight (文字行高) 共有 8 種數值單位可選 擇, 分別說明如下： 單位選項說明 px (像素)：使用此單位的文字, 在大部分的瀏覽器中不管如何 更改字型大小, 所看到的文字大小不會改變。 pt (點)：印刷用單位, 當網頁需要被列印出來時, 可確保印出來 的字體大小是正確無誤的。1pt是 1/72 英吋。 in (英吋)：印刷用單位, 1 英吋是 2.54 公分。 cm (公分)：印刷用單位。 mm (公釐)：印刷用單位。 pc (12 點字)：印刷用單位, 1pc 為 12pt 大小, 也就是 1/6 英吋。 em (字體高)：相對單位, 以 <body> 的 font-size 屬性值大寫字 母 “M” 的高度為基準, 沒有 font-size 時則以瀏覽器預設值為 基準。 單位選項說明 ex (字母高)：相對單位, 以 <body> 的 font-size 屬性 值小寫字母 "x" 的高度為基準, 沒有 fontsize時則 以瀏覽器預設值為基準。 % (百分比)：相對單位, 以 <body> 的 font-size 屬性 值為基準, 沒有 font-size 時則以瀏覽器預設值為基 準。 在網頁設計實務上, 常見的使用單位為 px (像 素)、pt (點)、em (字體高) 及 % (百分比), 印 刷用單位則比較少見。 「背景」頁次–為各種元素加上 背景 背景頁次不只是網頁的背景底色或背景圖片而己, 它 可以為各種元素加上背景 1. 當它定義在 <body> 時, 就是設定整個網頁的背景色 定義在 <p> 時, 則可為段落文字加上背景色彩。甚至可以指 定背景圖片的出現方式, 例如不重複貼圖、只往水平方向重 複貼圖、背景圖片的起始位置、…等。 接續上例, 我們要替網頁設定位於右上角且不重複的 背景圖片。請開啟新增 CSS 規則交談窗, 由於是要設 定整個網頁, 因此請選擇 body 標籤。 「背景」頁次–為各種元素加上 背景 「背景」頁次–為各種元素加上 背景 2. 開啟 CSS 規則定義交談窗,請切換到背景頁次, 從中可設定背 景圖片的來源、是否重複背景圖片、背景圖片的位置等 CS3版本 「背景」頁次–為各種元素加上 背景 3. 設定好後按下確定鈕回到編輯區, 你可以試著展開或收合面板讓 編輯區的大小改變,可發現背景圖片會一直固定在畫面右上方的 位置喔！ 「區塊」頁次–設定元素間的間距 及對齊方式 可設定文字間隔距離、文字的對齊、縮 排等樣式, 以及元素的顯示方式。 假設要放大網頁中標題文字的間距。根 據狀態列我們可判斷出該文字套用的是 <h3> 標籤, 因此重新定義 <h3> 標籤。 請開啟新增 CSS 規則交談窗, 選擇 h3 標 籤。 「區塊」頁次–設定元素間的間距 及對齊方式 「區塊」頁次–設定元素間的間距 及對齊方式 2. 按下確定鈕開啟 CSS 規則定義交談窗後, 請切換到區塊頁次設定文字間距： CS3版本 「區塊」頁次–設定元素間的間距 及對齊方式 3. 設定好後按下確定鈕回到編輯區, 即可 看到標題文字的間距變大了： 「方框」頁次–定義元素的大小 與位置 可精確地設定元素上、下、左、右的欄位間 隔、邊界留白， 以及元素的浮動方式 假設我們要設定整個 Ex03-03.html 網頁的上 邊界與左邊界, 由於要作用到整個網頁, 因此 請在 body 標籤中設定。先前已經在 body 標 籤中設定過背景, 所以在 CSS 樣式面板中可看 到 body 樣式, 只要雙按body 樣式即可開啟 CSS 規則定義交談窗來設定。 「方框」頁次–定義元素的大小 與位置 「方框」頁次–定義元素的大小 與位置 2. 請切換到方框頁次, 然後在 Margin 區中取消勾選全 部一樣項目, 我們只要設定上及左邊界： CS3版本 「方框」頁次–定義元素的大小 與位置 3. 設定好後按下確定鈕回到編輯區, 即可看到設定後 的結果： 『Padding』與『Margin』的差 異 Padding (欄位間隔) 與 Margin (邊界) 對 於 CSS 定位而言是很重要的觀念, 因此請 務必釐清差異。 Padding (欄位間距)：元素內容與元素本身 邊界的距離。 Margin (邊界)：元素本身邊界與其他元素間 的距離, 可設定負值。 『Padding』與『Margin』的差異 「邊框」頁次–設定元素邊框 可為文字、影像或任何網頁元件加上邊 框, 四邊的樣式可分別設定或是指定為全 部一樣, 並可做出陷下、凸起等外框效果。 請接續上例, 假設希望標題文字跟段落文 字有所區隔, 例如替標題文字加個邊框, 請在 CSS 樣式面板中雙按 h3, 開啟 CSS 規則定義交談窗, 並切換到邊框頁次進行 如下設定。 「邊框」頁次–設定元素邊框 「清單」頁次–美化條列項目 1. 可設定項目符號的樣式, 還能用圖片來 代替項目符號。 請接續上例, 在網頁最下方的「其他旅 遊日誌」, 是以項目的方式列出其他旅 遊日誌標題, 預設的項目符號比較沒變 化, 我們以圖片來替項目符號吧！ 「清單」頁次–美化條列項目 「清單」頁次–美化條列項目 2. 請切換到清單頁次, 按下瀏覽鈕選取要做為項目符號的圖片： 「定位」頁次–設定元素定位的 方式 1. 可將文字、圖片或其它元素做精確定位, 擺放在網頁中的任何位置, 並能將元素 重疊。 接續上例, 例如網頁最下方有一行版權 聲明文字, 假設希望這行文字可以一直 緊黏在瀏覽視窗的下邊框, 可利用定位 頁次來達成效果。請按下 CSS 樣式面板 的 鈕,開啟新增 CSS 規則交談窗, 我們要 自訂一個 CSS 樣式。 「定位」頁次–設定元素定位的 方式 「定位」頁次–設定元素定位的 方式 2. 開啟 CSS 規則定義交談窗後, 請切換到定位頁次, 即可設定 ".copyright" 樣式的定位屬性： 「定位」頁次–設定元素定位的 方式 3. 為了方便看出效果, 請再切換到背景頁次, 設定背景顏 色為 "#FCC", 替元素增添背景色, 藉此與其他文字做 區隔；設定好後按下確定鈕回到編輯區, 選取最下行 的文字,從屬性面板中拉下類別列示窗, 選擇 copyright 讓文字套用該樣式設定： 「定位」頁次–設定元素定位的 方式 4. 此效果必須在瀏覽器中才看得出效果, 因此請按下 F12 鍵開啟瀏覽器來檢視。 『Position』屬性 4 大類型的差 異 Position 屬性是很重要也較複雜的部分, absolute (絕對定位) 與 relative (相對定位) 最常被應用, 因此一定要分清楚這兩者之間 的差異喔！ absolute：絕對定位, 通常以網頁左上角進行 定位, 不會跟著視窗做彈性調整, 適合用來處 理想任意配置的元素, 而且可以任意浮動在 其他元素上方。第 14 章談到的 AP Div 便是 利用此種定位方式。 『Position』屬性 4 大類型的差 異 fixed：跟絕對定位有點類似, 差別在於固 定的位置。absolute 是固定在網頁中的某 個位置, 會跟著捲軸移動位置；而 fixed 則是固定在瀏覽器邊框的某個位置, 不會 跟著捲軸移動位置。請用瀏覽器開啟 Ex03-04.html 與 Ex03-05.html, 並將視窗 調整至會出現捲軸的大小以方便進行比 較： 『Position』屬性 4 大類型的差 異 『Position』屬性 4 大類型的差 異 『Position』屬性 4 大類型的差 異 relative：相對於該元素目前在網頁中的 位置。例如, 我們將 A 元素先依一般正常 的方式擺放在網頁中後, 再將 A 元素的定 位方式設定 relative, 接著即可利用 Placement 區的 top、right、bottom、 left 屬性去改變 A 元素的位置。請開啟練 習檔 Ex03-06.htm 。 『Position』屬性 4 大類型的差 異 『Position』屬性 4 大類型的差 異 『Position』屬性 4 大類型的差 異 static：預設值。沒有具備空間層級的特 質, 也就是不能用 Z 軸去改變上下順序 ( Z 軸的觀念請參考第 14 章)。 「擴充功能」頁次–替元素加上 特殊效果 擴充功能頁次可做出一些特殊的視覺效 果 製作陰影、透明、X 光片、…等, 但是大多數的瀏覽器都不支援, 因此我們不 多做說明, 你可自行用 IE 5.0 以上的瀏覽器 來玩看看, 不過建議斟酌使用, 以免在大部份 瀏覽器中看不出效果而白忙一場。 「擴充功能」頁次–替元素加上 特殊效果 「擴充功能」頁次–替元素加上 特殊效果 CSS 的奧妙真是怎麼說也說不完, 網頁中 的圖片、文字、表格, 甚至是版面、…等, 都可以用 CSS 來加以控制美化, 而且 CSS 樣式會集中列表在 CSS 樣式面板中, 管 理上非常便利喔！以上只是先以簡單的 練習帶你體驗 CSS 的功能, 之後的章節若 有相關的應用, 會再做進一步說明。