博客index.html文件中对样式的引用

<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="教学用开源个人博客（SPA版）" /> <title>My Blog · 教学增强版</title> <link href="styles/core.css" rel="stylesheet" /> </head>

那博客页面是如何选择这些样式的？

浏览器加载了所有样式，但最终生效的要看选择器是否匹配、优先级和加载顺序：

1. 选择器匹配

   • 只有当 HTML 里写了对应的类名，才会触发样式。

   • 例子：

     <button class="btn btn-primary">提交</button>
     
     

     会匹配 bootstrap 里的 .btn 和 .btn-primary，生效蓝色按钮样式。 如果你不用这些类名，对应样式就不会被应用。

2. 优先级（Specificity）

   • 如果多个规则同时作用在同一个元素上，优先级决定谁生效。
   • 规则优先级排序：行内样式 > ID 选择器 > 类选择器 > 标签选择器。

3. 加载顺序（Cascade 层叠性）

   • core.css 中，main.css → content.css → responsive.css 在前，第三方库在后。
   • CSS 有“后来者覆盖前者”的特性，所以 后导入的样式会覆盖前面的相同选择器。
   • 如果你希望自己写的样式覆盖 Bootstrap，一般会把 Bootstrap 写在前面 → 自己的样式写在后面。

👉 在你的博客里，最终显示效果是：

• HTML 标签默认样式先被 normalize.css 统一；
• 基础布局、组件样式由 bootstrap.min.css 提供；
• 图标库由 bootstrap-icons.css 提供；
• 然后再叠加你自己的 main.css / content.css / responsive.css，对细节进行修改和覆盖。

三、类比理解（课堂可以用）

可以把样式加载过程比喻成 穿衣服：

• normalize.css：先把“奇怪的衣服”脱掉（统一底层）。
• bootstrap.css：给大家发了一整套现成制服（组件样式）。
• bootstrap-icons.css：再发一套图标徽章。
• main/content/responsive.css：最后根据个人喜好裁剪、调整（项目定制）。