1、CSS基本概念
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
编写CSS样式：
- 在标签中用style编写(内联样式)；
- 在head中用style编写(内部样式表)；
当同一个 HTML 元素被不止一个样式定义时，内联样式（在 HTML 元素内部）拥有最高的优先权，接着是<head>标签中的样式声明，再是外部样式表中的样式声明，最后浏览器中的样式声明(缺省值)。
2、CSS选择器
2.1 派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式，以达到使标记更加简洁的目的。
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 li strong { 6 font-style: italic; 7 font-weight: normal; 8 } 9 </style> 10 </head> 11 <body> 12 <p> 13 <strong> 14 我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用 15 </strong> 16 </p> 17 <ol> 18 <li> 19 <strong> 20 我是斜体字。这是因为 strong 元素位于 li 元素内。 21 </strong> 22 </li> 23 <li>我是正常的字体。</li> 24 </ol> 25 </body>
2.2 ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 #i1{ 6 background-color: indianred; 7 height: 40px; 8 } 9 #d2{ 10 background-color: aquamarine; 11 height: 40px; 12 } 13 #i3{ 14 background-color: bisque; 15 height: 40px; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="i1">1</div> 21 <span id="d2">2</span> 22 <div id="i3">3</div> 23 </body>
2.3 类选择器
在 CSS 中，类选择器以一个点号显示：
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 .c1{ 6 background-color: indianred; 7 height: 40px; 8 } 9 .c2{ 10 background-color: aquamarine; 11 height: 40px; 12 } 13 .c3{ 14 background-color: bisque; 15 height: 40px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="c1">1</div> 21 <span class="c2">2</span> 22 <div class="c3">3</div> 23 </body>
类名的第一个字符不能使用数字！