1.css的几种定位方式
css主要由两个主要部分组成
选择器，属性，值
选择器通常是您需要改变样式的 HTML 元素 每条声明由一个属性和一个值组成 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
多种css的引入方式
1.内联样式（行内样式）
要使用内联样式，你需要在相关的标签内使用样式（style）属性。 Style 属性可以包含任何 CSS 属性
<p style="background: orange; font-size:
24px;">CSS<p>
也就是说必须包含内联属性
2.内部样式
你可以使用
<style> 标签在文档头部定义内部样式表
<head>
<style>
h1 {
background: red;
}
</style>
</head>
3.外部样式（推荐）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使 用外部样式表的情况下，你可以通过改变一个文件来改变整个站点 的外观。每个页面使用 标签链接到样式表。 标签在 （文档的）头部
<link rel="stylesheet" type="text/css"
href="xxx.css">
外部样式表的每个标签的具体解析：
<!--
<link> 标签：负责连接
- 这是一个HTML中的“链接”标签（link element），用于在当前文档与外部资源之间建立关系。
- 它通常位于文档的 <head> 区域中。
- <link> 标签是空元素（即没有闭合标签），用于引入外部资源，如CSS样式表、网站图标（favicon）、预加载资源等。
-->
<link
<!--
rel 属性（relationship）：负责定义连接关系
- 全称 "relationship"，定义当前文档与被链接资源之间的关系。
- 值为 "stylesheet" 表示被链接的资源是一个CSS样式表文件。
- 浏览器会根据此属性决定如何处理该外部资源（例如，应用样式规则）。
-->
rel="stylesheet"
<!--
type 属性（MIME type）：负责连接的文件类型
- 指定被链接资源的MIME类型（媒体类型）。
- "text/css" 表示该文件是CSS（层叠样式表）格式的文本文件。
- 虽然现代浏览器可以根据文件扩展名或内容自动推断类型，但该属性有助于明确声明资源类型，提高兼容性。
- 在HTML5中，type 属性对于CSS链接是可选的（默认即为 text/css），但仍建议保留以增强可读性和兼容性。
-->
type="text/css"
<!--
href 属性（hypertext reference）：负责连接的文件名称
- 指定被链接资源的URL（统一资源定位符）。
- 这里 "xxx.css" 是CSS文件的路径，可以是相对路径或绝对路径。
- 相对路径示例：xxx.css（与当前HTML文件同目录）、css/xxx.css（子目录中）
- 绝对路径示例：https://example.com/styles/xxx.css
- 浏览器会从此地址加载CSS文件，并将其样式规则应用到当前HTML文档。
-->
href="xxx.css"
<!--
注意：该标签以 > 结束，表示标签结束。
在HTML5中，无需写闭合斜杠（/>），但若使用XHTML标准，则需写为 <link ... />。
-->
>
导入式（了解）
此种方式使用率比较低,因为会影响加载速度
<style type="text/css">
@import url("css文件路径");
</style>
link和@import之间的差别
### ✅ 1. **加载顺序不同：谁先来，谁后到？**
- **`<link>`：提前加载，不耽误事**
当你用 `<link>` 标签引入 CSS 文件时，浏览器在**加载网页内容的同时**，就会立刻去下载这个 CSS 文件。就像你点外卖时，饭和菜一起送过来，到手就能吃。
- **`@import`：等一等，我晚点来**
而 `@import` 是写在 CSS 文件里的命令（比如在一个 CSS 文件里用 `@import "xxx.css";`），它必须等**主 CSS 文件下载完之后**，才知道还要加载另一个 CSS 文件。这就像是你先收到饭盒，打开一看，里面写着“菜在路上”，还得再等一会儿。
👉 **结果是什么？**
页面一开始没有样式，文字、图片乱成一团，过几秒才变好看——这就是“**页面闪烁**”。网速慢的时候特别明显。
> ✅ 通俗理解：
> `<link>` 是“提前安排好”，`@import` 是“临时加单”，自然更慢。
---
### ✅ 2. **兼容性不同：老浏览器认不认？**
- **`<link>`：谁都认识，从古至今都能用**
所有浏览器，哪怕是十几年前的老版本（比如 IE5 之前的），都支持 `<link>` 标签。它是 HTML 的“老员工”，非常稳定可靠。
- **`@import`：有点娇气，新版才支持**
`@import` 是 CSS 的功能，一些非常老的浏览器（比如 IE5 以下）根本看不懂它，会直接忽略。虽然现在这些浏览器几乎没人用了，但在过去这是个大问题。
> ✅ 通俗理解：
> `<link>` 像普通话，全国通用；
> `@import` 像方言，有些人听不懂。
---
### ✅ 3. **JavaScript 能不能控制？**
- **`<link>`：JS 可以随时“指挥”它**
如果你想用 JavaScript 动态地切换主题、换皮肤、隐藏某些样式，你可以通过 JS 操作 `<link>` 标签，比如换一个 CSS 文件，或者禁用某个样式表。
- **`@import`：JS 管不了，它藏得太深**
因为 `@import` 是写在 CSS 文件里面的，JS 很难直接控制它。而且它加载得晚，可能你 JS 都执行完了，样式还没加载出来，导致页面看起来“没反应”。
> ✅ 通俗理解：
> `<link>` 就像你能遥控的灯开关；
> `@import` 就像灯的定时器，你按不了，只能等它自己亮。
---
### ✅ 4. **多一次请求 = 多等一会儿**
- **`<link>`：一步到位，直接拿文件**
你写一个 `<link href="style.css">`，浏览器就直接去下载这个文件，一次请求搞定。
- **`@import`：套娃式加载，层层等待**
如果你在 `main.css` 里写 `@import "theme.css";`，浏览器得先下载 `main.css`，然后打开一看：“哦，还要加载 `theme.css`”，再去下载第二个文件。这就变成了**两次 HTTP 请求**，而且是串行的（一个接一个），不能同时下。
👉 这就像取快递：
- `<link>`：两个包裹同时发货，一起到。
- `@import`：你必须先签收第一个包裹，才能知道第二个包裹的存在，然后等它慢慢送。
> 🚫 后果：页面加载变慢，用户体验差，尤其在手机或弱网环境下更明显。
---
### ✅ 总结：一句话记住区别
> 🔹 **优先用 `<link>`**：快、稳、能控制、兼容好。
> 🔹 **少用 `@import`**：慢、有风险、增加请求，只在特殊场景下（如条件加载、维护旧代码）才考虑使用。
---
### ✅ 建议做法（最佳实践）
```html
<!-- ✅ 推荐：使用 link 加载 CSS -->
<head>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="theme.css">
</head>
```
```css
/* ❌ 不推荐：在 CSS 中使用 @import 引入其他 CSS */
@import "variables.css";
@import "mixins.css";
```