投影片 1

Size: px

Start display at page:

Download "投影片 1"

胎至班
6 years ago
Views:

1 何謂 CSS

2 本章摘要操作方式 CSS 規則定義交談窗的各頁次說明設定不會捲動的背景圖片 (bg-sample-fixed) 變換超連結文字狀態 (bg-sample-fixed) 修改頁面屬性的設定其他超連結狀態說明使用 CSS 樣式狀態說明 CSS 在網頁中的使用方式 1. 使用外部連結樣式表 2. 以內嵌方式, 在網頁的開頭定義 3. 局部套用 CSS 樣式當樣式衝突時的優先順序將 HTML 格式轉換成 CSS

3 操作方式視窗 >CSS CSS 面版文字 >css 樣式開新檔案附加樣式表 ( 匯入現有 css) 轉存 ( 匯出現有 css)

4 CSS 規則定義交談窗的各頁次說明類型頁次背景頁次可設定文字的大小字型顏色段落行距底線狀態等樣式其中文字大小可用像素公分字母高等單位, 而且採用絕對值尺寸, 不管瀏覽器如何更改, 網頁上的文字永遠都是相同大小! 背景頁次不只是網頁的背景底色或背景圖片而己它可以為各種網頁元件加上背景 ; 例如當它定義在 body 時, 就是設定整份網頁的背景色, 而定義在 P 標籤時, 則可為整段文字加上背景色彩甚至可以指定背景圖片的出現方式, 例如不重複貼圖只往水平方向重複貼圖背景圖片的起始位置等區塊頁次可設定文字與文字的間隔距離, 以及文字的對齊縮排等樣式方框頁次可精確地設定網頁元件 ( 文字圖片等 ) 上下左右的邊界留白邊框頁次可為文字影像或任何網頁元件加上邊框, 四個邊框的樣式可分別設定或是指定為全部一樣, 並可做出陷下凸起等外框效果清單頁次可設定項目符號的樣式, 還能用圖片來代替項目符號定位頁次擴充功能頁次可將文字圖片或其它元件做精確定位, 擺放在網頁中的任何位置, 並能使 2 個元件重疊設定圖層的大小擺放位置是否裁切等設定, 就是使用 CSS 的定位語法做出來的此頁次是屬於較新的 CSS 語法, 可做出許多炫麗的效果但是大多數的瀏覽器都還沒有支援可以用 IE 5.0 以上的瀏覽器來玩看看不過網頁中最好還是不要貿然使用, 以免相容性變差

5 CSS 在網頁中的使用方式依照定義 CSS 的方式來分, 共有 3 種不同的使用類型 : 1. 使用外部連結樣式表 ( 多個網頁共用一份樣式表 ) 2. 以內嵌方式, 在 <head> 定義 ( 單一網頁 ) 3. 局部套用 CSS 樣式 ( 在 html 改 )

6 CSS 在網頁中的使用方式 1. 使用外部連結樣式表先將要設定的 CSS 內容寫成一個檔案 ( 用記事本即可 ), 並將其存成 CSS 檔 ( 副檔名為.css) 使用連結的方式, 套用這個 CSS 檔的樣式設定不必將 CSS 語法寫在 HTML 文件中優點 : 可以一次讓多個網頁共用一份樣式表, 只要變更.css 檔的內容, 就可以更改所有連結網頁的樣式 2. 以內嵌方式, 在網頁的開頭定義將 CSS 語法寫在 <style> </style> 標籤之間並放在 HTML 文件的開頭 ( 就是 <head> 與 </head> 之間 ) 適用於指定單一網頁的樣式,CSS 的影響範圍為整份網頁 3. 局部套用 CSS 樣式將 CSS 語法定義在每個 HTML 標籤旁邊, 也就是前面所說隨著 HTML 標籤定義的方法此時所定義的樣式只會影響該 HTML 標籤, 其它相同的 HTML 標籤若未加定義, 則不會受到影響

7 1. 使用外部連結樣式表第一種方法是使用外部連結的樣式表先將要設定的 CSS 內容寫成一個檔案用記事本即可, 並將其存成 CSS 檔 ( 副檔名為.css) 使用連結的方式, 套用這個 CSS 檔的樣式設定不必將 CSS 語法寫在 HTML 文件中優點 : 可以一次讓多個網頁共用一份樣式表, 只要變更.css 檔的內容, 就可以更改所有連結網頁的樣式

8 2. 以內嵌方式, 在網頁的開頭定義將 CSS 語法寫在 <style> </style> 標籤之間並放在 HTML 文件的開頭就是 <head> 與 </head> 之間這種方式適用於指定單一網頁的樣式,CSS 的影響範圍為整份網頁

9 3. 局部套用 CSS 樣式將 CSS 語法定義在每個 HTML 標籤旁邊, 也就是前面所說隨著 HTML 標籤定義的方法此時所定義的樣式只會影響該 HTML 標籤, 其它相同的 HTML 標籤若未加定義, 則不會受到影響 <head> <style>.style21 { font-size: 24pt; font-family: Verdana, Arial, Helvetica, sans-serif; color: #3d3d3d; } </style> </head> <h1 align="center" class="style21">dreamweaver8 網頁設計應用入門 </h1>

10 當樣式衝突時的優先順序以上 3 種類型的使用方式, 萬一都對同一個 HTML 標籤定義了不同樣式, 這時候網頁會聽誰的話呢? 基本上,CSS 樣式若沒有衝突時, 其效果是一直累加上去的例如在網頁開頭將 <H1> 設紅色, 而後來又將某 <H1> 標籤局部定義置中對齊, 則該段標題文字將會變成紅字 + 居中對齊

11 當樣式衝突時的優先順序如果同時對 <H1> 的字體顏色下了不同的定義, 此時就有一個先後順序了, 其優先順序是 : 所以若網頁中套用了多層次的樣式表時, 別忘了檢查優先次序, 以免想要的樣式效果沒有辦法正常顯現

12 將 HTML 格式轉換成 CSS 在頁面屬性交談窗中提供 5 個頁次, 可以設定網頁的共同屬性 ( 例如整個網頁的字體超連結文字的顏色 ) 不過, 其中有 2 個頁次的屬性功能僅提供使用 CSS 語法撰寫樣式的網頁因此, 若是開啟自行利用 HTML 語法撰寫樣式的網頁, 則頁面屬性交談窗只有提供 3 個頁次

13 將 HTML 格式轉換成 CSS

14 將 HTML 格式轉換成 CSS 讓原有利用 HTML 語法撰寫樣式的網頁可以使用 Dreamweaver 頁面屬性交談窗中的 5 個頁次需要利用 Dreamweaver 重新設定樣式

15 將 HTML 格式轉換成 CSS

16 將 HTML 格式轉換成 CSS

17 CSS 規格與瀏覽器的支援度 17

18 單位選項其中大小與行高有可選擇的單位, 說明如下 : 像素 (px): 使用此單位的文字, 在大部分的瀏覽器中不管如何更改字型大小, 所看到的文字大小不會改變點 (pt): 印刷用單位, 當網頁需要被列印出來時, 可確保印出來的字體大小是正確無誤的 1pt 是 1/72 英吋英吋 (in): 印刷用單位,1 英吋是 2.54 公分公分 (cm): 印刷用單位公釐 (mm): 印刷用單位 18

19 單位選項 12 點字 (pc): 印刷用單位,1pc 為 12pt 大小, 也就是 1/6 英吋字體高 (em): 相對單位, 以 <body> 的 font-size 屬性值大寫字母 M 的高度為基準, 沒有 font-size 時以瀏覽器預設值 (16px/96dpi) 為基準字母高 (ex): 相對單位, 以 <body> 的 font-size 屬性值小寫字母 x 的高度為基準, 沒有 font-size 時以瀏覽器預設值為基準 19

20 單位選項百分比 (%): 相對單位, 以 <body> 的 font-size 屬性值為基準, 沒有時則以瀏覽器預設值為基準相信這樣子對單位的選擇應該有了基本概念 CSS 規則定義交談窗的其他各頁次若有出現單位選單, 設定觀念是類似的, 可依自己的需求選擇適合的單位 20

21 欄位間距與邊界的差異欄位間距 (padding) 與邊界 (margin) 對於 CSS 定位而言是很重要的觀念, 因此請務必釐清差異欄位間距 (padding): 元素內容與邊框的距離邊界 (margin): 元素與其他元素間的距離, 可設定負值 21

22 欄位間距與邊界的差異 22

23 定位頁次設定元素定位的方式可將文字圖片或其它元素做精確定位, 擺放在網頁中的任何位置, 並能將元素重疊 1. 網頁最下方的版權申明文字, 希望這行文字可以一直緊黏在瀏覽視窗的下邊框, 則可利用定位頁次來達成效果請按下 CSS 樣式面板的鈕, 開啟新增 CSS 規則交談窗, 要自訂一個 CSS 樣式 23

24 定位頁次設定元素定位的方式 24

25 定位頁次設定元素定位的方式 2. 開啟 CSS 規則定義交談窗後, 請切換到定位頁次中設定.copyright 樣式的定位屬性 25

26 定位頁次設定元素定位的方式 3. 最後回到網頁編輯畫面, 請選取最下行的文字, 從屬性面板中拉下樣式列示窗, 選擇 copyright 讓文字套用該樣式設定 26

27 定位頁次設定元素定位的方式 4. 目前的文字沒有背景色, 可能會跟其他文字混淆而看不出效果, 因此最後再點選.copyright 樣式, 在背景頁次中加入背景顏色為 "#FFCCCC" 設定好請開啟瀏覽器預覽效果 27

28 定位頁次設定元素定位的方式 28

29 定位類型說明定位類型 (position) 屬性是很重要也較複雜的部分, 特說明如下, 其中尤以絕對的與相對的定位方式最常被應用, 因此一定要分清楚這兩者之間的差異絕對的 (absolute): 絕對位置, 通常以網頁左上角進行定位, 不會跟著視窗做彈性調整, 適合用來處理想任意配置的元素, 而且可以任意浮動在其他元素上方 AP 區塊即是利用此種定位方式 29

30 定位類型說明 30

31 定位類型說明固定 (fixed): 跟絕對定位有點類似, 都具有絕對位置的特性, 但差別在於其固定位置所在絕對的是固定在網頁中的某個位置, 會跟著捲軸移動位置 (Ex12-05.html) 而固定則是固定在瀏覽器邊框的某個位置, 不會跟著捲軸移動位置 (Ex12-06.html) 請用瀏覽器開啟 Ex12-05.html 與 Ex12-06.html 並將視窗調整至會出現捲軸的大小以方便進行比較 31

32 定位類型說明 32

33 定位類型說明 33

34 定位類型說明 34

35 定位類型說明 35

36 定位類型說明相對的 (relative): 相對於該元素目前在網頁中的位置例如, 將 A 元素先依一般正常的方式擺放在網頁中後, 再將 A 元素的定位方式設定相對的, 接著即可利用置入區的上 (top) 右 (right) 下 (bottom) 左 (left) 屬性去改變 A 元素的位置請開啟練習檔 Ex12-07.html 36

37 定位類型說明 37

38 定位類型說明靜態 (static): 預設值沒有具備空間層級的特質, 也就是不能用 Z 軸去改變上下順序 38

39 設定不會捲動的背景圖片設定不會捲動的背景圖片 (css) 請開啟一個網頁如 ex05-08.html CSS 樣式面板 > 按下增加屬性 background-attachment > fixed

40 設定不會捲動的背景圖片

41 設定不會捲動的背景圖片

42 設定不會捲動的背景圖片接著請用 IE 瀏覽器來進行預覽, 試著向下捲動畫面, 會發現背景圖片不會跟著移動

43 變換超連結文字狀態

44 變換超連結文字狀態請用 ch06-08.html 讓超連結文字在滑鼠移到超連結文字上時, 底線會消失而且色彩會改變 : 修改頁面屬性的設定 > 連結或執行修改 / 頁面屬性 > 連結使用 CSS 樣式文字 /CSS 樣式 / 開新檔案

45 修改頁面屬性的設定請開啟練習檔 ex06-08.html 執行修改 / 頁面屬性命令, 切換到連結頁次中設定

46 修改頁面屬性的設定

47 修改頁面屬性的設定在 Dreamweaver 中是無法預覽所定義的超連結效果請用瀏覽器預覽網頁, 結果會和完成檔 ch06-08.html 相同

48 其他超連結狀態說明

49 狀態說明 a:hover: 滑鼠經過狀態 a:active: 滑鼠按下狀態定義滑鼠按下超連結文字時的文字格式 a:link: 滑鼠未經過狀態定義滑鼠尚未移到超連結文字上的文字格式, 也就是一般情況下的超連結文字 a:visited: 超連結已拜訪過狀態定義超連結文字的超連結已經拜訪過的文字格式

50 使用 CSS 樣式利用 CSS 樣式則可以有更多的連結文字變化效果以 ex06-08.html 為例說明 1. 執行文字 /CSS 樣式 / 開新檔案命令

51 使用 CSS 樣式

52 使用 CSS 樣式 2. 定義超連結文字當滑鼠經過的狀態下, 字體會放大為 20 pt, 色彩也會改變的效果 :

53 使用 CSS 樣式設定完成後, 請按下確定鈕即可使用瀏覽器預覽網頁, 便可以看到當指標移到超連結文字上時, 字體變大且色彩會改變

CU0594.pdf

CU0594.pdf 8 SOHO 1 3 003 SOHO SOHO Coder Programmer HTML CSS PHP JavaScrip 009 LECTURE 1-1 1 048 PART 2 LECTURE 1-1 1 049 SOHO Landing Page Landing 050 PART 2 LECTURE 1-1 1 SEO SEO P.093 SEO SEO SEO SEO SEO 051