时间戳

首页 > 解决方案 > P 标签的 CSS 样式看起来像标题标签

html - P 标签的 CSS 样式看起来像标题标签

问题描述

我正在尝试为 P 标签下的某些文本添加样式，使其看起来类似于 h1、h2 和 h3 标签的样式。我尝试将 h1 的字体大小更改为 2em，将 h2 的字体大小更改为 1.5em。但是在屏幕的不同位置，根据附近的内容，这些P标签的大小会发生变化，它们看起来不像h1或h2标签。我的要求严格禁止我在那些地方直接使用标题标签。我需要样式以使 P 标签在所有屏幕中看起来都像标题标签。

到现在为止我做了什么？ 我目前正在向这些 P 标签添加一个类，并且我正在使用单独的 CSS 文件向它们添加样式。我的 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>

我得到的结果：

在此处输入图像描述

我希望它们看起来相似。我应该添加什么样式以使我的 P 标签文本看起来像 H 标签文本？

标签： htmlcss

解决方案

如果我没看错，您只想将<p>标签样式设置为<h1>等<h2>标签。

标题标签的默认样式略重且更大。

这被设置为<h2>标题。

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

从这个链接https://www.w3schools.com/tags/tag_hn.asp<h1>您可以看到<h6>标记默认样式。

推荐阅读