當我添加 Boostrap 5 時字體大小縮小

Question

當我添加 Boostrap CDN 鏈接時，字體大小會發生變化。

我發現這是因為 Boostrap 有一個默認的字體大小。 我試圖通過在外部樣式表中指定字體大小並放置!import來更改字體大小，但它不起作用。 而且只有當我在內聯樣式表中輸入字體大小時它才有效。

 div.banner { font-size: 500%;important; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> <main> <div class="banner"> <h1 class="slideUp" style="font-family: 'EB Garamond', serif"> Yasuní National Park<br /> <span style="font-size: 40%">&nbsp; between oil exploitation and conservation</span> </h1> </div> </main>

這是我的代碼的一部分，我試圖通過應用下面的代碼來更改<h1>標簽的字體大小。 但它不起作用。 你能解釋為什么嗎？

div.banner {
    font-size: 500% !important;
}

Answer 1

首先，我們使用 em、rem 和 px 更改字體大小。

給定 CSS：

假設您為整個文檔聲明了字體大小，如下所示

* {
  font-size: 20px;
}

以像素為單位。

如果我們想更改您的這部分代碼。

<span style="font-size: 40%;">&nbsp; between oil exploitation and conservation</span></h1>

我們主要使用 rem。 喜歡：

<span style="font-size: 2rem;">&nbsp; between oil exploitation and conservation</span></h1>



//2rem means -> default 20px(declared) * 2 = 40px will be the font-size of 2rem, 3 rem is 60, etc.

我看到你也標記了specificity ..

即使在測試中也不是使用important的好習慣。

最高優先級是inline styling -> then IDs -> classes.