# CSS Basic - HTML加入樣式、選擇器 ###### tags: `CSS` 學習資源： [MDN CSS](https://developer.mozilla.org/zh-TW/docs/Web/CSS) [CSS Basic](https://teamtreehouse.com/library/css-basics-5) [【css】2小時初學者教學](https://youtu.be/Ml78vnNTBLw) >CSS 階層樣式表，非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language），能夠讓HTML上的元素套上不同的樣式 ## :pushpin:HTML中加入樣式 ### inline ```html= <header style="background-color:orange;"> <h1>Document</h1> <address> <p>website: developerdiane.com</p> <p>email: diane@developerdiane.com</p> </address> <img src="developer-diane.jpg" alt="Developer Diane coding on her laptop."> </header> ``` `style="background-color:orange"`將style加入HTML標籤中 ### internal ```html= <head> ... <title>Document</title> <style> h1{ color:red; } </style> </head> ``` 將樣式內容放置於`<head>`中 :::info 將樣式寫在HTML中可以用於測試，當HTML檔案較多時就會難以管理，每次開啟頁面就會重新載入相同的樣式 ::: ## :pushpin:CSS嵌入至HTML ### external 使用嵌入的方式可以有效管理頁面，讓文本及樣式分開管理，並且可以用於多個HTML頁面 ```html= <link rel="stylesheet" href="css/style.css"> ``` * `rel` 連結到 stylesheet樣式表 * `href` CSS路徑 ## :pushpin:選擇器 ### 標籤選擇器 使用HTML標籤{ }中置入屬性 ```css= h1{ color: red; font-size: 18px; } ``` ### class CSS選擇class時須加上. HTML ```html= <p class="content-class" id="content-id"> Lorem ipsum dolor sit amet. </p> ``` CSS ```css= .content-class{ background-color:yellow; } ``` ### id CSS選擇class時須加上# HTML中id用於連結至頁面中的某個部分且不可重複CSS ```css= #content-id{ background-color:purple; } ``` ### 後代選擇器(Descendant Selectors) 使用空格選取子標籤內容 HTML ```html= <ul class="animals"> <li>小狗</li> <li>小貓</li> <li>小羊</li> </ul> ``` CSS ```css= .animals li{ color:green; } ``` ### 偽類(Pseudo-classes) 能夠在特定動作時改變 DOM 的 CSS 樣式 * :hover 游標滑動到元素時觸發 ```css= a:hover{ color:blue; } ``` * :active 長按時觸發 ```css= a:active{ color:blue; } ``` * :link 尚未訪問的元素 ex:連結尚未點擊前 * :focus 表示正在使用中的元素 ex:點擊輸入框、鍵盤輸入