样式设计（CSS）~基础教学与应用.PDFVIP

樣式設計(CSS) ~ 基礎教學與應用 一、一、 HTML 簡介簡介 一、一、 簡介簡介 1.1 HTML (HyperText Markup Language) 1.2 HTML 剖析 二、二、 CSS 介紹介紹 二、二、 介紹介紹 2.1 CSS (Cascading Style Sheets)2.1 CSS (Cascading Style Sheets) 2.2 套用樣式 2.3 樣式宣告 三、三、 ePortfolio 應用範例應用範例 三、三、 應用範例應用範例 3.1 頁面語法說明 3.2 範例一 3.3 範例二 四、好用工具四、好用工具 - Firebug 四、好用工具四、好用工具 鍾玉芳 台灣數位學習科技股份有限公司 yufchung@.tw 應用展示 HyperText Markup Language a href=‘powercam.cc’免費免費PowerCam/a 免費免費 img src=‘powercam5.png’ HTML 剖析 一、架構 二、元素 元素是構成網頁內容的關鍵 三、屬性 屬性是用來描述元素的樣式 四、事件、程式 扮演與使用者互動的關鍵角色 五、內嵌 Cascading Style Sheets 一、直接寫在 html 的標籤內 較麻煩，需一個一個進行修改，且常會遺漏 二、在 style 裡定義樣式，再透過元素進行套用 直接修改 style 裡面的樣式，即可套用到所有的元素 三、三、存到另一個檔案存到另一個檔案 (.(.csscss)) ，再用，再用importimport 套用套用 樣式的設計可以獨立在這個檔案中 選擇器與套用 一、元素 二、class = 名稱 三、id = 名稱 四、條件套用四、條件套用 五、虛擬套用 六、多重套用 樣式宣告 • 文字大小 、顏色、字型… .title { font-size: 14px; font-family: courier new, arial; font-weight: bold; color: gray } • 版面位置、大小、樣式 … (box-model) .box { border: 3px solid #ff0000; width: 200px; height:100px; background-color: #ccc; text-align: right; 文字靠右文字靠右 文字靠右文字靠右 padding:10px 4px 10px 4px; float: left; } CSS 在 ePortfolio 的應用 實機操作 •• 頁面語法說明頁面語法說明 • 範例一 • 範例二 • 好用工具 - Firebug CSS 線上教學網~ http://sites.powercam.cc/site/css