CSS样式效果.PPT

第13章 CSS樣式效果 CSS的概念 樣式使用技巧 內部CSS效果 外部樣式表連結 設計階段樣式表 樣式的其他操作 CSS的概念 CSS的全名是Cascading Style Sheets，一般稱之為串聯式樣式表，其作用主要是為了加強網頁上的排版效果（圖層也是CSS的應用之一）。 CSS是用來補充HTML的格式效果而非用來取代HTML。 因為CSS的所有功能，都是擺放在網頁畫面的效果設計，讓HTML語法只單純負責頁面的內容結構。 也可以將CSS的樣式效果儲存成一個獨立檔案，再讓這個檔案中的樣式同時套用到多個頁面，如此一來會讓網頁風格的設計更加簡單與方便，而這也正是當初發展CSS的主要目的之一。 建立全新的CSS樣式(1) 樣式的建立方式 建立全新的CSS樣式(2) 套用樣式效果 1.利用樣式面板 2.利用屬性面板 建立全新的CSS樣式(3) 修改樣式內容 將HTML轉換為CSS 樣式的刪除及取消(1) 單純刪除樣式時的結果 樣式的刪除及取消(2) 取消樣式的套用 外部樣式的觀念 是將各位所設計的樣式效果儲存成一個獨立檔案﹙副檔名為CSS﹚，樣式檔完成以後，再對於需要此樣式效果的頁面，將此樣式檔以「連結」的方式把樣式效果置入到頁面之中。 往後只要樣式檔的內容有修改，那當初連結此樣式檔的頁面效果也會跟著更新，所以我們在管理及設計樣式效果時就可以很單純的只針對樣式檔而不用去管整個套用樣式效果的頁面範圍。 建立外部樣式表 連結外部樣式表 修改外部樣式表 請利用開啟舊檔的方式來開啟剛才建立的「csslink.css」外部樣式檔。 設計階段樣式表 請先執行「文字/CSS樣式/設計階段」以開啟操作視窗。 僅於設計階段時顯示的樣式 設計階段時隱藏的樣式(1) 連結外部樣式檔及套用 設計階段時隱藏的樣式(2) 新增隱藏設計階段時的樣式 設計階段時隱藏的樣式(3) 二者同時使用時 「僅於設計階段時顯示的樣式」與「設計階段時隱藏的樣式」二種效果可以同時使用，這樣可以讓我們同時知道頁面上所要修改的區域以及其顯示的結果。 樣式面板功能補充(1) 調整樣式面板的顯示模式 樣式面板功能補充(2) 使用樣式的功能指令 各項指令功能如下 視覺輔助與樣式呈現(1) 視覺輔助 使用「插入/版面物件/Div標籤」所建立的頁面元素，就是屬於一種「CSS版面區塊」。 此種視覺輔助功能有三種檢視模式，可以從「檢視/視覺輔助」的功能清單中看到下列三個指令。 視覺輔助與樣式呈現(2) 樣式呈現 設計導覽列的分隔線(1) 修改水平線樣式 HTML語法中的水平線效果是「HR」標籤，所以在此只要重新定義「HR」標籤的樣式效果即可。 設計導覽列的分隔線(2) 設計分隔線樣式 1. left_line的樣式內容 2. center_line的樣式內容 3. right_line的樣式內容 先對中央的分隔線套用「.center_line」樣式效果。 再對左右兩旁的分隔線套用「.left_line」與「.right_line」樣式效果。 設計導覽列的按鈕效果(1) 超連結效果的樣式類型 設計導覽列的按鈕效果(2) 開始設計樣式 1. a：link及a：visited樣式效果 2. a：hover樣式效果 此種樣式的「類型」與「背景」效果設定和a：link一樣，只有「邊框」是不同的設定。 自訂滑鼠游標效果 CSS樣式不只可以更變超連結文字的格式外觀，同時也能變換滑鼠的游標圖示。 置中對齊的背景圖片 影像特效 表單美化(1) 1.新增第一個樣式及其樣式效果 表單美化(2) 2.新增第二個樣式及其樣式效果 項目符號的樣式 應用範例(1) 設計「最新消息」的頁面效果 1.設計「更新日期」所使用的樣式 2.設計「標題文字」所使用的樣式 3.設計「重點文字」所使用的樣式 4.設計「水平線」所使用的樣式 應用範例(2) 設計「好站相連」的頁面效果 5.設計「連結後」所使用的樣式 6.設計「滑鼠移過時」所使用的樣式 13-6 樣式使用技巧 13-6 樣式使用技巧 樣式類型如畫面上所示 13-6 樣式使用技巧 13-6 樣式使用技巧 樣式類型如畫面上所示 13-6 樣式使用技巧 13-6 樣式使用技巧 樣式類型如畫面上所示 13-5 樣式的其他操作 如果滑鼠點取的位置沒有套用樣式時會出現此訊息文字 點取「目前」時會列出目前滑鼠所在位置的樣式 13-5 樣式的其他操作 以「清單」方式列出所有可用的樣式 以「分類」方式列出所有可用的樣式 13-5 樣式的其他操作 只列出上方樣式名稱中的樣式內容 13-5