學習筆記

標籤選擇器標籤選擇器 { 屬性: 設定值; 屬性: 設定值; } 例如以下 h1 { color: blue; font-size: 50px; } CSS 除錯分析檔案路徑是否正確單字有沒有拼錯格式是否正確在 Chrome 瀏覽器頁面按右鍵»檢查如果 CSS code 當中有寫錯導致無法辨識，在 Element 元素就會出現畫線的錯誤顯示如下: 擬態選擇器 hover 除了標籤選擇器以外還可以使用擬態選擇器，使用情境： a 標籤文字設定成黑色，但希望當滑鼠滑過去時文字可以變成紅色這樣可以寫成這樣 a { color: black; } a:hover { color: red; } /*讓滑鼠按下時變成blue的話可以用active*/ a:active { color: red; } 類別選擇器如果有好幾個 P 段落，但其中某一個段落想要使用客製化 CSS file INDEX.HTML 設定如下 段落一 段落二 段落三 段落四 STYLE.CSS 增加如下 code .style1 { color: red; } class 屬性也同樣可以應用在 a 或是 li 上面...

Emmet 載入在 VSC 或是 Codepen 要載入 Emmet 套件，可以直接打"!"+“Tab"鍵，就會立馬出現以下 Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> #如果沒有加這行在IE瀏覽器會出現亂碼 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> #針對手機、Ipad做螢幕解析度調整 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> #讓IE更新到最新版本 <title>Document</title> </head> <body></body> </html> 按"P*2"就會自動載入下方 code，如果*3 就會一次出現三個 列表標籤呈現效果會是: ● 項目一 ● 項目二 ● 項目三 1.項目一 2.項目二 3.項目三 <ul> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul> <ol> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ol> li 可以用來包 a 連結也可以用來包 img 圖片

學習筆記-CSS基礎

學習筆記-HTML基礎