1、样式表
1、内部样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> h1{ color: red; } </style> <h1>内部样式</h1> </body> </html>
2、外部样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入外部样式1--> <link rel="stylesheet" href="./index.css"> <!-- 或者这么写--> <style> @import "index.css"; </style> </head> <body> <h1>外部样式</h1> </body> </html>
扩展（面试）：link和import之间的区别？
差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom(document o bject model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.
3、行内样式（内联样式、嵌入式样式）
<h1 style="color: red">行内样式</h1>
4、样式的优先级
行内样式 > 内部样式 > 外部样式（就近原则）
如果三种写法都有相同的属性，属性后面加上!important则该样式优先。也就是!important针对的是相同的标签的相同属性。
2、选择器
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
1、类/class选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> .top{ color: red; } .foot{ background-color: blanchedalmond; } </style> <h1 class="top">class选择器</h1> <h2 class="top foot">一个标签可以起两个或者多个类名</h2> </body> </html>
如果标签中存在多个类的时候，是按照style中的选择器的顺序进行覆盖的，不是按照class内的顺序覆盖渲染的。
2、id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> #top{ color: red; width: 200px; height: 200px; background-color: aqua; } </style> <div id="top">id选择器</div> </body> </html>
id选择器具有唯一性。一个标签只能有一个id.
3、通配符选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> *{ margin: 0; padding: 0; } </style> <div>通配符选择器</div> </body> </html>
4、群组和后代/包含选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> div, p ,h2{ color: red; } </style> <div>群组选择器</div> <p>群组选择器</p> <h2>群组选择器</h2> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> div p{ color: red; } </style> <div> <p>div中的p标签</p> </div> <p>div外面的p标签</p> </body> </html>
后代选择器的选择实际上是从右到左的选择，也就是先选择p标签再选择div标签。
5、伪类选择器
伪类选择器一般使用在a标签上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> /*初始状态(未访问之前)*/ a:link{ color: black; } /*访问之后的*/ a:visited{ color: yellow; } /*鼠标悬停*/ a:hover{ background-color: red; } /*点击激活后*/ a:active{ color: aqua; } </style> <body> <a href="####">a标签</a> </body> </html>
必须按照link---visited---hover---active的顺序书写。否则存在覆盖的问题。
伪类选择器小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ width: 300px; background-color: darkblue; } a{ background-color: darkblue; color: white; } a:hover{ background-color: red; } </style> <body> <div> <a href="###">军事</a> <a href="###">财经</a> <a href="###">科技</a> <a href="###">医疗</a> </div> </body> </html>
6、选择器的权重
当多个代码段选择的是相同的元素的，并且都为他们定义了样式。如果属性发生了冲突的话，会选择权重高的来执行。对于相同权重的选择器则会按照就近原则。对于包含选择器，其权重为选择器之和。
id选择器 > class选择器 > 元素选择器
