網站設計課程CSS觀念釐清

元智1022網站設計課程重點整理

Transcript

1. CSS X HTML 課程 劉俊彥 oabb1388@gmail.com
2. 打註解的方法 <!-- 這是HTML 的註解--> ex: </div> <!--這是id=haha的尾--> /**這是css的註解**/ ex: background-img : url(./bk.png);
3. CSS reset <link rel="stylesheet" href="./CSS/text.css" /> <link rel="stylesheet" href="./CSS/reset.css" /> 看附件，OpenSource 拿去用，儘量用
4. 每一句描述的意思 後描述的優先執行 俱有繼承 !important >>> 跳過一切規則
5. Box 重點 border padding margin
6. display 顯示方式 width 寬 height 高 overflow 溢出怎處理 box 基本相關property
7. body { } /**這在控制html碼的body部分**/ #haha { } /**控制 ID = “haha” 的部分**/ .oh { } /**控制 class =“oh” 的部分**/ 選擇器的用法
8. 選擇器的用法 #haha[空格]h1 { } /**id = haha 底下的 html**/ #haha, .oh { } /**這在控制 ID 的部分**/ 選擇器的用法 #haha[空格]h1 { } /**id = haha 底下的 html**/ #haha, .oh { } /**這在控制 ID 的部分**/
9. #haha:hover { } /**控制id= haha 你經過的時候**/ a:active { } /**控制已經開啟連結樣式**/ a:visited { } /**控制曾經拜訪過的連結樣式**/ 虛擬選擇器的用法
10. 字體相關 font-family 字體家族 color 顏色 font-size 字體大小 font-weight: text-decoration 裝飾線 text-indent 內空格
11. 背景相關 background-color 顏色 -position 位置 -repeat 重複 -image 圖片
12. 直接打Code的CSS練習 [HTML] 1. 標題 h1、h2、h3、h4、h5 2. 連結 a 3. 圖片 img 4. 段落文字 p 5. 區塊 div [作業規範] 1. index.html 為上課練習的頁面、另外一個html檔案名稱不拘 2. index 上必須有文字連結可以明確的連結到另外一個頁面 3. 另外一個頁面必須和原有的index 有完全不一樣的「背景」、「區塊顏色」、「字體顏 色」、「邊框顏色」、「邊框設計」、「內容」，雖然不一樣但其設計必須看起來是同一 個風格！ 4. index 上的大頭貼圖片可以連結到你的fb頁面。 5. index 內容可以是你的基本的自我介紹項目、另外一個頁面可以說明一件你有興趣的事 情。 6. 兩個頁面都必須使用外連css方式進行，不得直接使用html樣式。
13. 直接打Code的CSS練習 [HTML] 1. 標題 h1、h2、h3、h4、h5 2. 連結 a 3. 圖片 img 4. 段落文字 p 5. 區塊 div [作業規範] 7. 第二個頁面也提供了link可以連結回第一頁 8. 不要讓網頁出現「無標題文件」。（提示：http://www.w3schools.com/tags/tag_ti- tle.asp） 9. 在你的頁面上想辦法加上「fb讚」的按鈕 （提示：https://developers.face- book.com/docs/plugins/like-box-for-pages） 10.讓你得小名片網站，具有fb留言板的功能 （提示：http://briian.com/?p=6767）
14. 參考用網站 Ｗ3School (查詢語法) http://www.w3schools.com/ ＯＥＣＳＰＡＣＥ (美化、遇到bug怎麼辦、js套件、認識css的基礎） web.archive.org/web/20110515013825/http://www.hsiu28.net/ 臉書Plugin API https://developers.facebook.com/docs/plugins/
15. http://www.sublimetext.com/ 使用 Sublime text 打Code
16. http://www.yannest.net/posts/154014-ai-css 使用 Ai 進行design的拆板