![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
css引入方式一共有4种，内部样式、外部样式和行内样式，还有一种是导入式
@import，这几种都是可以引入CSS样式；而为什么我们需要导入样式呢，是因为利于管理我们的CSS样式，做到前后分离的效果，还有就是方便于网页设计的分工协作。
| 类型 | 样式表 | 作用 |
|---|---|---|
| 引入方式 | 内部样式 | 仅对当前文档的元素有效，使用style标签 |
| 引入方式 | 外部样式 | 适用与所有引入了这个css样式表的html文档，使用link即可 |
| 引入方式 | 行内样式 | 仅适用与当前的页面中的指定的元素，使用style属性 |
| 模块化 | 导入样式 | 将这些独立的公共样式表引入到指定的css文档或标签中 |
通过<style> 来书写CSS代码,并且只能够在当前文档元素有效，不能跟其他页面共享。
!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--通过style在内嵌样式，一般放在<head> --><style>h1{color: violet;}</style></head><body></body></html>
注意：<style>标记可以放在网页的任何地方，但一般放在<head>
通过<link>标记来引入外部的CSS文件(.css)
<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
通过style的属性来书写CSS代码，仅适用与当前的页面中的指定的元素
<p style=“font-size:24px;”></p>
注意：每一个HTML元素，都有 style、class、id、name、title 属性
使用@import指令将这些独立的公共样式表引入到指定的css文档或标签中
<style> @import url(style.css);</style>
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素，选择器一共有5种
| 类型 | 作用 | 优先级 |
|---|---|---|
| 标签选择器 | 特征：选取一类具有共同特征的元素 | 低 |
| 类选择器 | 和标签选择器一样，返回一组元素 | 中 |
| id选择器 | id的唯一性，返回一个元素 | 高 |
| 上下文选择器 | 依据元素在其位置的上下文关系来定义样式 | 低 |
| 伪类选择器 | 匹配任意位置的元素 | 中 |
| 结构类型 | 使用方式 | 说明 |
|---|---|---|
| 匹配任意位置的元素 | nth-of-type(an+b) | 获取任意位置的元素 |
| 匹配单个元素 | nth-of-type(3) | 获取为第3位的元素 |
| 匹配奇数 | nth-of-type(odd) | 获取个数为奇数的元素 |
| 匹配偶数 | nth-of-type(even) | 获取个数为偶数的元素 |
| 反选匹配最后元素 | nth-last-of-type(-n+b) | 获取最后一位元素 |
| 匹配首元素 | first-of-type | 获取首个元素 |
| 匹配元素末尾 | last-of-type | 获取最后一个元素 |
总结
选择器在我们项目中是经常会用到的，主要用于精准定位元素获取样式，所以需要多花点心事去掌握。
