可以通過 CSS（層疊樣式表）告訴瀏覽器應該如何顯示一份文檔的內容。
使用樣式的兩種方式：① 嵌在文檔的 <head> 部分（<style> 標簽之間）
② 放在另一個樣式表文件里
CSS 可繼承。比如說為 body 元素定義了一些樣式，包含在 body 元素里的所有元素都將自動獲得那些樣式。
比如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ToDo list</title> 6 <style> 7 div{ 8 background: aqua; 9 font-size: 40; 10 } 11 </style> 12 </head> 13 <body> 14 <div> 15 <h1>待辦清單</h1> 16 <p title="reminder">記得要做：</p> 17 <ul id="todo"> 18 <li>買菜</li> 19 <li>做飯</li> 20 <li>拖地</li> 21 </ul> 22 </div> 23 </body> 24 </html>
頁面效果：
為了把一個或或某幾個元素與其他元素區別開來，需要使用 class 屬性或 id 屬性。
class 屬性
1. 可以為一種特定類型的元素定義一種特定的樣式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ToDo list</title> 6 <style> 7 div{ 8 background-color: aqua; 9 font-size: 40; 10 } 11 li.sty1{ 12 background-color: bisque; 13 } 14 </style> 15 </head> 16 <body> 17 <div> 18 <h1>待辦清單</h1> 19 <p title="reminder">記得要做：</p> 20 <ul id="todo"> 21 <li class="sty1">買菜</li> 22 <li>做飯</li> 23 <li>拖地</li> 24 </ul> 25 </div> 26 </body> 27 </html>
頁面效果：
2. 可以為 class 屬性值相同的所有元素定義同一種樣式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ToDo list</title> 6 <style> 7 div{ 8 background-color: aqua; 9 font-size: 40; 10 } 11 li.sty1{ 12 background-color: bisque; 13 } 14 .sty2{ 15 font-style: italic; 16 } 17 </style> 18 </head> 19 <body> 20 <div> 21 <h1 class="sty2">待辦清單</h1> 22 <p title="reminder">記得要做：</p> 23 <ul id="todo"> 24 <li class="sty1">買菜</li> 25 <li>做飯</li> 26 <li>拖地</li> 27 </ul> 28 </div> 29 </body> 30 </html>
頁面效果：
id 屬性
用途：給網頁里的某個元素加上一個獨一無二的標識符
1. 為有特定 id 屬性值的元素定義一種獨享的樣式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ToDo list</title> 6 <style> 7 div{ 8 background-color: aqua; 9 font-size: 40; 10 } 11 li.sty1{ 12 background-color: bisque; 13 } 14 .sty2{ 15 font-style: italic; 16 } 17 #todo{ 18 border: 2px solid deeppink; 19 background-color: white; 20 color: green; 21 padding: 1em; 22 } 23 </style> 24 </head> 25 <body> 26 <div> 27 <h1 class="sty2">待辦清單</h1> 28 <p title="reminder">記得要做：</p> 29 <ul id="todo"> 30 <li class="sty1">買菜</li> 31 <li>做飯</li> 32 <li>拖地</li> 33 </ul> 34 </div> 35 </body> 36 </html>
頁面效果：
2. 利用 id 屬性為包含在特定元素里的其他元素定義樣式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ToDo list</title> 6 <style> 7 div{ 8 background-color: aqua; 9 font-size: 40; 10 } 11 li.sty1{ 12 background-color: bisque; 13 } 14 .sty2{ 15 font-style: italic; 16 } 17 #todo{ 18 border: 2px solid deeppink; 19 background-color: white; 20 color: green; 21 padding: 1em; 22 } 23 #todo li{ 24 font-weight: bold; 25 } 26 </style> 27 </head> 28 <body> 29 <div> 30 <h1 class="sty2">待辦清單</h1> 31 <p title="reminder">記得要做：</p> 32 <ul id="todo"> 33 <li class="sty1">買菜</li> 34 <li>做飯</li> 35 <li>拖地</li> 36 </ul> 37 </div> 38 </body> 39 </html>
頁面效果：
