此篇内容不会有 CSS 语法教学，而是着重在使用 Bootstrap 5 时需要具备的 CSS know-how。

CSS Reset

问题：不同浏览器拥有各自的预设 CSS 样式（ex：h1~h6 margin、ol, ul 项目符号样式），导致在不同的浏览器上会有样式不同或是跑版的问题。（因为浏览器担心有人不会写网页，会默认添加样式上去。）
解决：透过重置 CSS 的 CSS 样式表，使其统一全部浏览器的样式。

Meyerweb CSS（Reset CSS）

• 优点：
  • 全部清空（将所有样式清的乾乾净净）
• 缺点：
  • 弹性不佳（每次都需要重新设定样式）
  • 不易阅读（开启开发者工具查看样式名称有一大坨）
    

加码好用 reset css：

/* rwd img css，使图片缩放 */
img{
  max-width: 100%;
  height: auto;
}

/* 全域 border box：所有元素不用算 padding */
*,*::before,*::after{
  box-sizing: border-box;
}

Normalize.css

• 官方 github open source 连结

• 优点：

  • 保留一些预设的 HTML 标签的样式（ex：body padding、h1~h6 font-size）
  • 详细的文件以及清楚明了的注解

• 缺点：

  • 样式清的不够乾净

Bootstrap 是使用 Normalize CSS。

• 引入 Bootstrap 时它内建就含有 normalize.css，放在 reboot.css 档案中。
• 从原始码可以得知，Bootstrap 是fork Normalize CSS 来改写的。

meyerweb、Normalize 该用哪一个？

依照设计稿，若设计师大部分遵循 Bootstrap 样式规范则使用 normailze，若设计师都是自己的设计规范则建议使用 meyerweb（reset.css）。

⚠️ reset.css 与 normalize.css 不论用哪一套，都记得要放在撰写样式的最前面，因为它的目的就是在网页载入时，对各个浏览器之间的差异进行调整，使其达到统一全部浏览器的样式。

CSS selector

CSS selectors（样式选择器），在撰写 CSS 样式时用来选取 HTML元素的一种语法规则。

简单介绍五种最常用的选择器（类别选择器、ID 选择器、标签选择器、通用选择器、後代选择器），主要会介绍
後代选择器，因为 Bootstrap 也是使用後代选择器的写法。

• Class selector (类别选择器)：透过 class 名称选取 HTML元素，css 样式名称前面加上句号小圆点 .

  <h1 class="class-select">类叠选择器</h1>
  

  .class-select {
    font-size: 1rem;
    line-height: 1.5rem;
    color: red;
  }
  

  
• ID selector（ID 选择器）：透过 ID 名称选取 HTML元素，css 样式名称前面加上井字号 #

  <h1 id="id-select">ID 选择器</h1>
  

  #id-select {
    font-size: 1rem;
    line-height: 1.5rem;
    color: red;
  }
  

• Type selector（标签选择器）：透过 HTML 标签名称选取 HTML 元素

  <ul>
    <li>
      <h1>标签选择器</h1>
    </li>
    <li>
      <p>标签选择器</p>
    </li>
  </ul>
  

  h1 {
    font-size: 1rem;
    line-height: 1.5rem;
    color: red;
  }
  p {
    font-size: 1rem;
    line-height: 1.5rem;
    color: red;
  }
  

• Universal selector (通用选择器)：包含（标签、class、ID）

  <ul>
    <li>
      <h1>标签选择器</h1>
    </li>
    <li>
      <p>标签选择器</p>
    </li>
  </ul>
  

  * {
    font-size: 1rem;
    line-height: 1.5rem;
    color: red;
  }
  

• 後代选择器：选择父元素里面的所有子元素
  • 写法：撰写 HTML class 时把外层标签写在前面，内层标签写在後面，中间用空格分隔。

ex：ul 内的 li 样式

• font-size：文字大小 1rem
• color：文字颜色 红色

<ul>
  <li>
    <h1>文字样式</h1>
  </li>
</ul>

ul li {
  font-size: 1rem;
  color: red;
}

ex：Bootstrap 5 按钮元件

• btn：按钮的预设样式
• btn-primary：按钮颜色
• btn-sm：按钮大小

<button 
  type="button" 
  class="btn btn-primary btn-sm"
  >Primary
</button>

後代选择器概念就像盖房子，需要钢筋、水泥、油漆...等等材料来打地基，而後续依照屋主的喜好做装潢。

• 地基：Bootstrap 将每个元素都写好各自的 class 样式
• 装潢：使用者透过不同的需求去撰写 class 样式

其余选选择器请参考这篇：CSS常见选择器（看这一篇就够了）

CSS Specificity 权重

撰写 CSS 样式时，若一个元素同时符合多个样式时，则会依照覆盖特性、权重，来决定 CSS 样式载入顺序。

权重顺序

important → html style → id → class → html tag

• 图像记忆法：透过分数来做权重来计算优先权顺序（非常建议收藏这张图）
  
  src：https://cssspecificity.com/

• 图片解说请参考：强烈推荐收藏好物 – CSS Specificity (CSS 权重一览)

• 权重分数计算解说请参考：Day20：小事之 CSS 权重 (css specificity)

覆盖特性

程序码由上到下，後面样式会覆盖前面样式。

Q：请问以下范例中的 box 是什麽颜色

<div class="box">权重</div>

.box {
	color: red;
}

.box {
	color: blue;
}

A：放在 CodePen 中

用一个职场小剧场来演释，为什麽要了解 CSS 权重

小剧场：善用覆盖特性修改讨人厌前辈的糙 code

• 不懂覆盖特性
  

• 懂覆盖特性
  

在讨人厌前辈的 css 後方引入另外写的 css，即可达到覆盖前者的效果。不再害怕要背锅

雷点

分享几个使用 CSS 尽量避免的雷点：

1. 不要用 id 作为选择器：因为权重很高，且 id 是不重复的（通常作为 anchor 描点使用或给後端工程师使用）
2. 尽量少使用 inline-style（html style）除非整个网站都没有 CSS 都是套版只需改一点点样式。
3. 非必要不然少用 important（但 Bootstrap 的 CSS 用了不少 important，因此当改不动样式的时候，就需要用到它）

权重 8 字口诀

先看权重，在看前後

获得额外技能捕食者

Bootstrap 5 世界中 CSS 代表了切版魔法师的攻击手段，因此可以使用捕食者来吸收其它魔法师的技能。