CSS Styles P 標簽看起來像 Header 標簽

Question

我正在嘗試將 styles 添加到 P 標簽下的某些文本中，使其看起來類似於 h1、h2 和 h3 標簽。 我嘗試將 h1 的字體大小更改為 2em，將 h2 的字體大小更改為 1.5em。 但是在屏幕的不同位置，根據附近的內容，這些P標簽的大小會發生變化，它們看起來不像h1或h2標簽。 我的要求嚴格禁止我在那些地方直接使用 header 標簽。 我需要 styles 使 P 標簽在所有屏幕中看起來像 Header 標簽。

到現在為止我做了什么？ 我目前正在向這些 P 標簽添加 class，並且我正在使用單獨的 CSS 文件向它們添加 styles。 我的 CSS 代碼：

p.smallText {
    font-size: 1.3em;
}
p.mediumText {
    font-size: 1.5em;
}
p.largeText {
    font-size: 2em;
}

我的 HTML 代碼：

<h3>Small Text</h3>
<p class="smallText">Small text</p>
<h2>Medium Text</h2>
<p class="mediumText">Medium Text</p>
<h1>Large Text </h1>
<p class="largeText">Large Text</p>

我得到的結果：

我希望它們看起來相似。 我應該添加什么 styles 以使我的 P 標簽文本看起來像 H 標簽文本？

Answer 1

如果我沒看錯，您只想將<p>標簽設置為<h1> 、 <h2>等標簽。

標題標簽默認的styles稍重更大。

這被設置為<h2>標題。

p {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
}

從這個鏈接https://www.w3schools.com/tags/tag_hn.asp你可以看到<h1>到<h6>標簽默認 styles。

Answer 2

嗯...我要猜測一下，不要使用em這個單位是相對於它的父大小的。 而是使用絕對的rem或px 。

我這里舉個例子

 .first-div { font-size: 36px; }.second-div{ font-size: 18px; } p { font-size: 2em; }

 <div class="first-div"> <p>First div</p> </div> <div class="second-div"> <p>Second div</p> </div>

所以如果你注意到p總是有font-size: 2em但em是相對於父元素字體大小的，因此對於第first-div 2em 將等於 72px 而在second-div 2em 將等於 36px

我希望這可以幫助您解決那里的問題；）

Answer 3

至關重要的是，您錯過了font-weight:bold 。

最重要的提示是在您選擇的瀏覽器中使用開發人員工具來檢查h元素並在其中應用 styles。

邊距也不同，但您可以根據需要使用上面的提示進行調整。

 p.smallText { font-size: 1.17em; font-weight:bold; } p.mediumText { font-size: 1.5em; font-weight:bold; } p.largeText { font-size: 2em; font-weight:bold; }

 <h3>Small Text</h3> <p class="smallText">Small text</p> <h2>Medium Text</h2> <p class="mediumText">Medium Text</p> <h1>Large Text </h1> <p class="largeText">Large Text</p>

您還可以對h標簽使用 html 重置並同時設置您的自定義p styles。

就像是：

 h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight:bold; } h5, .h5, h6, .h6 { font-weight:normal; } h1, .h1 { font-size: 2.15em; } h2, .h2 { font-size: 1.75em; } h3, .h3 { font-size: 1.17em; }

 <h3>Small Text</h3> <p class="h3">Small Text</p> <h2>Medium Text</h2> <p class="h2">Medium Text</p> <h1>Large Text </h1> <p class="h1">Large Text</p>

Answer 4

將 class 添加到 p 標簽並將 css 寫入該 class。 它應該如下所示。

<p class="custom-p">Text</p>

.custom-p {                       
  font-size:20px;
 }