可以通过 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>
页面效果：
